Xamarin.ios Wave Effect

Android has previously written a demo, is the wave effect, should be modeled on Baidu's external sales of the Avatar effect. Suddenly want to take Xamarin to try, use my brain hole finally to get out, do not know the method is not reasonable. Just stick it out and show it.

The actual effect is the wave in motion, head and text is also moving up and down, giving people an effect is the head and text is floating in the waves above.

Here's a little bit of implementation:

First you will see this view into three view, respectively. The first view is the Wave view, which is the following figure

Is like a sine wave of such an effect.

The second one is the view of the Avatar and the text, and leave her alone to do a view the goal is to control its animation individually to match the animation of the wave.

Let's take a look at the Wave view first: Create a new view inheritance UIView. To draw a line through the draw method to make it move, at least two screen-length waves should be understood.

There is also a point of attention is that I did not find a direct way to draw the sine, and finally with the Bezier curve splicing.

Look at the code:

Using System;
Using System.Drawing;
Using Coregraphics;

Using Uikit; namespace Ruilaigrow.ios {///<summary>///wave view///by GE///</summary> public class Waveview:uivi
		EW {//Normal line curve, top, midline, bottom y-axis height 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; }//Dash public override void Draw (Coregraphics.cgrect rect) {base.

			Draw (rect);
			The upper half of the view is red background rectangle 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 ();

			The width of the screen nfloat viewwid = UIScreen.MainScreen.Bounds.Width; Using Bezier curve to complete sine wave curve//divide two times to draw out sine curves for (int i = 0; i < 2; i++) {Nfloat StartX = i * VIEWWID;
				Left half arc 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);
				Right half arc 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); }
		}
	}
}

I put the whole class on top, because it's not difficult, but one thing to note is that in the wavy recesses of the concave there will be a little transparent white area, this area I will be the right half radian with a transparent color filled. We can change it for ourselves.

Head and text view I will not occupy the place here, there is nothing to pay attention to.

The following directly post the whole view of the class:

Note:

1. The bottom part of the code is the animation of the wavy view and Avatar view. Wave view Fortunately, is a loop left animation, Avatar animation trajectory analysis: a sine function move, should be first move down a hump distance, move up two hump distance, move a hump distance down. This is a complete cycle, the next animation cycle can be.

2. The code uses a constraint between the controls, you can change their own, if necessary, you can chat privately with me.

3. Animation properties I set the uniform, that is, uiviewanimationoptions.curvelinear here, the relevant properties of the original iOS you can find.

4. I have a limited level, may be used are particularly simple things to achieve this function, may have gone some detours or a better way to achieve, I hope you can make a lot of suggestions and common progress.

Using System;
Using System.Drawing;
Using Coregraphics;
Using RuilaiGrow.iOS.Common;

Using Uikit; namespace Ruilaigrow.ios {///<summary>///milestone module Home top avatar View///by GE///</summary> public class Userhe
		Aderview:uiview {private Nfloat _wavebottom = 80f;

		Private Nfloat _wavetophei = 7f;
		Wave Bar private Waveview _waveview = null;
				Public Waveview Waveview {get {if (_waveview = null) {_waveview = new Waveview ();
			return _waveview;
		}//Avatar, name, age layout 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;
		}//Avatar 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;
		}///name private Uilabel _nametext = null;
					Public Uilabel Nametext {get {if (_nametext = null) {_nametext = new Uilabel ();
					_nametext.text = "Xiao Bei";
					_nametext.textalignment = Uitextalignment.left;
					_nametext.textcolor = Mvxtouchcolor.white;
					_nametext.font = Uifont.systemfontofsize (18f);
				return _nametext;
			return _nametext;
		}//month age private Uilabel _agetext = null;
					Public Uilabel Agetext {get {if (_agetext = null) {_agetext = new Uilabel ();
					_agetext.text = "43 months";
					_agetext.textalignment = Uitextalignment.left;
					_agetext.textcolor = Mvxtouchcolor.graysix;
				_agetext.font = Uifont.systemfontofsize (13f);
			return _agetext; }///<summary>///constructor///set background color with frame///</summary> public Userheaderview () {this. Frame = new RectangleF (0, 0, (float) uiscreen.mainscreen.
			Bounds.width, (float) _wavebottom); This.
		BackgroundColor = Uicolor.white; //Submit view public override void Layoutsubviews () {base.

			Layoutsubviews ();
			Nfloat textmartop = 6f;

			Nfloat marbottom = 6f; This.
			Addsubview (Waveview); This.

			Addsubview (Headerview); A aotolayout way to make a view constraint 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 && heade RImg.Frame.GetCenterX () = = HeaderView.Frame.GetCenterX () && NameText.Frame.Top = H EaderImg.Frame.Top + textmartop && NameText.Frame.Left = = HeaderImg.Frame.Right + te
		Xtmartop	                           && 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

			);
		Open animation startanimation (UIScreen.MainScreen.Bounds.Width); ///<summary>///Start the wave animation End listener Restart this method///</summary>///<param name= "Leftmove" >left
			;/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;
					/** Animation Complete Monitoring **/		   Startanimation (Leftmove);
		}); ///<summary>///Avatar First view animation///</summary>///<param name= "Wavetophei" >wave top Hei.</pa
			ram> 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;
						   /** Animation completes the monitoring **/startheadanimationagain (Wavetophei);
		}); ///<summary>///Avatar View animation///</summary>///<param name= "Wavetophei" >wave top Hei.</para
			m> 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 = Waveto
							   PHEI/2;

							   Wavetophei =-wavetophei;
						   /** Animation completes monitoring **/startheadanimation (Wavetophei, false);
		});
 }

	}
}