Working on Animations Bubble Animation

Dheeraj Kumar Gunti

Reading Time : ( words)


Hi All, Welcome Back.

Today we will see how to have a simple animation with bubble image view.

Here is the small example to create an simple animation.

Open Xamain Studio and Create new Empty Solution. Add new View Controller.

Download the below image for the sample.



Add the above image to resources.

Below is the code snippet for making the bubble to animate.

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();
    this.EdgesForExtendedLayout = UIRectEdge.None;
    this.View.BackgroundColor = UIColor.White;
	UIImageView view = new UIImageView (new CGRect (100, 100, 153, 153));
	view.Image = UIImage.FromBundle ("bubble");
    this.View.AddSubview (view);
	CAKeyFrameAnimation pathAnimation = (CAKeyFrameAnimation)CAKeyFrameAnimation.FromKeyPath ("position");
	pathAnimation.CalculationMode = CAAnimation.AnimationLinear;
	pathAnimation.FillMode = CAFillMode.Forwards;
	pathAnimation.RemovedOnCompletion = false;
	pathAnimation.RepeatCount = 18.0f;
	pathAnimation.Duration = 11.0;
	pathAnimation.TimingFunction = CAMediaTimingFunction.FromName (CAMediaTimingFunction.Linear);
	CGPath path = new CGPath ();
	path.AddRect (new CGRect (view.Frame.X, view.Frame.Y, 23, 23));
	pathAnimation.Path = path;
	view.Layer.AddAnimation (pathAnimation, "myCircleAnimation");
}


Enjoy Coding.... :)