Xamarin.iOS 波浪效果

以前Android寫過一個demo，是波浪效果，應該是仿照百度外賣的那個頭像效果。突然想拿Xamarin來試試，利用我的腦洞終於給弄出來了，不知道方法是不是合理。先貼出來展示一下吧.

實際效果是波浪在動，頭像以及文字也在上下動，給人一種效果就是頭像和文字是漂在波浪上面的。

下面來說一下實現吧：

首先將看見的這個view分成三個view，分別實現。第一個view就是波浪view，即如下圖

就是類似一個正弦曲線的這麼一個效果。

第二個就是頭像加文字的view，把她單獨出來做一個view目的就是可以單獨控制它的動畫來配合波浪的動畫。

下面首先來看看波浪view的畫法：建立一個View繼承UIView。通過Draw方法來畫線，想要實現波浪效果讓它動起來，最少要畫兩個螢幕長度的波浪，這個大家應該能理解吧。

還有一點注意的就是我沒有找到直接畫正弦的方法，最後是用貝茲路徑拼接而成的。

看下代碼：

using System;using System.Drawing;using CoreGraphics;using UIKit;namespace RuilaiGrow.iOS{/// <summary>/// 波浪View/// by ge/// </summary>public class WaveView : UIView{//正線曲線，頂部，中線，底部Y軸高度private nfloat _waveTop = 50f;private nfloat _waveHalfHei = 65f;private nfloat _waveBottom = 80f;public WaveView(){this.Frame = new RectangleF(0, 0, (float)(UIScreen.MainScreen.Bounds.Width * 2), (float)_waveBottom);this.BackgroundColor = UIColor.White;}//劃線public override void Draw(CoreGraphics.CGRect rect){base.Draw(rect);//本View上半部分紅色背景矩形CGContext contextBac = UIGraphics.GetCurrentContext();contextBac.SetFillColor(MvxTouchColor.DeepRed.CGColor);contextBac.AddRect(new RectangleF(0, 0, (float)(UIScreen.MainScreen.Bounds.Width * 2), (float)_waveHalfHei));contextBac.FillPath();//螢幕的寬度nfloat viewWid = UIScreen.MainScreen.Bounds.Width;//利用貝茲路徑完成正弦波浪曲線//分成兩次畫出正弦曲線for (int i = 0; i < 2; i++){nfloat startX = i * viewWid;//左半邊弧CGContext contextLeft = UIGraphics.GetCurrentContext();contextLeft.SetLineWidth(1f);contextLeft.SetStrokeColor(MvxTouchColor.DeepRed.CGColor);contextLeft.MoveTo(startX, _waveHalfHei);contextLeft.AddCurveToPoint(startX, _waveHalfHei,(startX + viewWid / 4), _waveTop,(startX + viewWid / 2), _waveHalfHei);contextLeft.SetFillColor(MvxTouchColor.White.CGColor);contextLeft.DrawPath(CGPathDrawingMode.EOFill);//右半邊弧CGContext contextRight = UIGraphics.GetCurrentContext();contextRight.SetLineWidth(1f);contextRight.SetStrokeColor(MvxTouchColor.DeepRed.CGColor);contextRight.MoveTo((startX + viewWid / 2), _waveHalfHei);contextRight.AddCurveToPoint((startX + viewWid / 2),_waveHalfHei, (startX + (System.nfloat)(viewWid * 0.75)),_waveBottom, startX + viewWid, _waveHalfHei);contextRight.SetFillColor(MvxTouchColor.AlphaDeepRed.CGColor);contextRight.DrawPath(CGPathDrawingMode.EOFill);}}}}

上面我將整個類都貼出來，因為沒啥難度，不過有一點要注意的，就是在波浪下凹處仔細看會有一點透明白色的地區，這個地區我是將右半邊弧度用了一個透明顏色填充了。大家可以自己換。

頭像和文字的view我就不佔用這裡的地方了，沒什麼要注意的。

下面直接貼出來整體的View的類：

註：

1.代碼中最下面部分就是波浪view與頭像view的動畫。波浪view還好說，就是一個迴圈左移的動畫，頭像的動畫的軌跡分析一下：一個正弦函數移動，應該是先向下移動一個駝峰距離，在向上移動兩個駝峰距離，在向下移動一個駝峰距離。這是一個完整的周期，下一個動畫迴圈這個周期即可。

2.代碼中使用了一種控制項間的約束方式，大家可以換成自己的，如果需要的話可以私聊我。

3.動畫屬性我設定的是勻速的，即UIViewAnimationOptions.CurveLinear這裡，相關屬性大家查ios原生的就可以查到。

4.本人水平有限，可能用的都是特別簡單的東西來實現這個功能，可能多走了些彎路或者有更好的實現方式，希望大家可以多多提建議，共同進步。

using System;using System.Drawing;using CoreGraphics;using RuilaiGrow.iOS.Common;using UIKit;namespace RuilaiGrow.iOS{/// <summary>/// 裡程碑模組首頁頂部頭像View/// by ge/// </summary>public class UserHeaderView : UIView{private nfloat _waveBottom = 80f;private nfloat _waveTopHei = 7f;//波浪條private WaveView _waveView = null;public WaveView WaveView { get {if (_waveView == null) {_waveView = new WaveView();}return _waveView;}}//頭像，名字，年齡布局private UIView _headerView = null;public UIView HeaderView { get {if (_headerView == null) {_headerView = new UIView();_headerView.AddSubview(HeaderImg);_headerView.AddSubview(NameText);_headerView.AddSubview(AgeText);}return _headerView;}}//頭像private UIButton _headerImg = null;public UIButton HeaderImg { get {if (_headerImg == null) {_headerImg = new UIButton();_headerImg.SetImage(UIImage.FromFile("icon_child_head.png"), UIControlState.Normal);}return _headerImg;}}//名字private UILabel _nameText = null;public UILabel NameText { get {if (_nameText == null) {_nameText = new UILabel();_nameText.Text = "小貝";_nameText.TextAlignment = UITextAlignment.Left;_nameText.TextColor = MvxTouchColor.White;_nameText.Font = UIFont.SystemFontOfSize(18f);return _nameText;}return _nameText;}}//月齡private UILabel _ageText = null;public UILabel AgeText { get {if (_ageText == null){_ageText = new UILabel();_ageText.Text = "43個月";_ageText.TextAlignment = UITextAlignment.Left;_ageText.TextColor = MvxTouchColor.GraySix;_ageText.Font = UIFont.SystemFontOfSize(13f);}return _ageText;}}/// <summary>/// 建構函式/// 設定背景色與frame/// </summary>public UserHeaderView(){this.Frame = new RectangleF(0, 0, (float)UIScreen.MainScreen.Bounds.Width, (float)_waveBottom);this.BackgroundColor = UIColor.White;}//提交viewpublic override void LayoutSubviews(){base.LayoutSubviews();nfloat textMarTop = 6f;nfloat marBottom = 6f;this.AddSubview(WaveView);this.AddSubview(HeaderView);//一種aotolayout方式進行view約束this.ConstrainLayout(() =>                     HeaderView.Frame.Bottom == this.Frame.Bottom - marBottom                     && HeaderView.Frame.Width == this.Frame.Width                     && HeaderView.Frame.Height == this.Frame.Height - marBottom                    );HeaderView.ConstrainLayout(() =>HeaderImg.Frame.Bottom == HeaderView.Frame.Bottom&& HeaderImg.Frame.GetCenterX() == HeaderView.Frame.GetCenterX()                           && NameText.Frame.Top == HeaderImg.Frame.Top + textMarTop                           && NameText.Frame.Left == HeaderImg.Frame.Right + textMarTop                           && NameText.Frame.Right == HeaderView.Frame.Right                           && AgeText.Frame.Top == NameText.Frame.Bottom                           && AgeText.Frame.Left == HeaderImg.Frame.Right + textMarTop                           && AgeText.Frame.Right == HeaderView.Frame.Right   );//開啟動畫startAnimation(UIScreen.MainScreen.Bounds.Width);}/// <summary>/// 開始波浪動畫 動畫結束監聽中重啟本方法/// </summary>/// <param name="leftMove">Left move.</param>public void startAnimation(nfloat leftMove){startHeadAnimation(_waveTopHei, true);var waveFrame = WaveView.Frame;waveFrame.X = WaveView.Frame.X - leftMove;UIView.Animate(12d, 0d, UIViewAnimationOptions.CurveLinear, () => WaveView.Frame = waveFrame,   () =>   {   waveFrame.X = WaveView.Frame.X + leftMove;   WaveView.Frame = waveFrame;   /** 動畫完成監聽 **/   startAnimation(leftMove);   });}/// <summary>/// 頭像初次view動畫/// </summary>/// <param name="waveTopHei">Wave top hei.</param>public void startHeadAnimation(nfloat waveTopHei, bool isFirst){var headerFrame = HeaderView.Frame;headerFrame.Y = HeaderView.Frame.Y + waveTopHei;UIView.Animate(3d, 0d, UIViewAnimationOptions.CurveLinear, () => HeaderView.Frame = headerFrame,   () =>   {   waveTopHei = waveTopHei * 2;   waveTopHei = -waveTopHei;   if (!isFirst)   return;   /** 動畫完成監聽 **/   startHeadAnimationAgain(waveTopHei);   });}/// <summary>/// 頭像view動畫/// </summary>/// <param name="waveTopHei">Wave top hei.</param>public void startHeadAnimationAgain(nfloat waveTopHei){var headerFrame = HeaderView.Frame;headerFrame.Y = HeaderView.Frame.Y + waveTopHei;UIView.Animate(6d, 0d, UIViewAnimationOptions.CurveLinear, () => HeaderView.Frame = headerFrame,   () =>   {   waveTopHei = waveTopHei / 2;   waveTopHei = -waveTopHei;   /** 動畫完成監聽 **/       startHeadAnimation(waveTopHei, false);   });}}}