The IOS orb is animated along the elliptical trajectory _ios

Foreword: Recent company Project has a demand, need to realize let a view follow ellipse trajectory to do animation, effect realizes, on own encapsulation made a small demo, use more convenient. First look at the effect:

Oval. gif

The white oval trajectory in the effect chart is actually drawn with a Bezier curve, in order to see the trajectory of the motion clearly. In fact, the project is not to show the trajectory line, that is, the ball is suspended motion. If you do not need to delete it.

Implementation steps:

1. First set the key frame animation cakeyframeanimation Some properties, such as time and repetition times and Calculationmode mode, we choose kcaanimationpaced to make the animation evenly.

  Cakeyframeanimation *pathanimation = [cakeyframeanimation animationwithkeypath:@ "position"];
  Pathanimation.calculationmode = kcaanimationpaced;
  Pathanimation.fillmode = kcafillmodeforwards;
  Pathanimation.removedoncompletion = NO;
  Pathanimation.duration = 5.0;
  Pathanimation.repeatcount = 2;

2. Set the key frame of the animation path, that is, an elliptical way. Need to use CGPATHADDARC,CGPATHADDARC is often used to draw a positive circle, such as the following is a positive circle, the meaning of each parameter:

160,200 is the center of the circle, 100 is the radius (startangle,endangle) is the starting angle and the end angle, 1 is clockwise, 0 is counterclockwise
Cgpathaddarc (Curvedpath, NULL, 160,200, StartAngle, Endangle, 0);

Note that because the coordinate system in iOS is the opposite of the y axis in the quartz coordinate system, the y-axis has done a conversion of scale-1 for the uiview when doing quartz drawing. So the result of the CGPATHADDARC function is the exact opposite of whether the last argument is clockwise, which means that if the final argument is yes, it should be clockwise according to the parameter, but the actual drawing result will be counterclockwise!

We need to draw an ellipse ah, don't worry, then make a little change. Positive circle the second parameter defaults to NULL, we want to change to an ellipse,

The ratio of the short half axis and the long half axis is
  float Radiuscale = 0.5;
  The coordinate value of the ellipse vertex
  cgfloat origin_x = SELF.FRAME.SIZE.WIDTH/2;
  CGFloat origin_y = SELF.FRAME.SIZE.HEIGHT/2;
  Long CGFloat radiusx of long half axes
  =;

  Cgmutablepathref Curvedpath = cgpathcreatemutable ();
  Cgaffinetransform t2 = Cgaffinetransformconcat (Cgaffinetransformconcat (
                                      cgaffinetransformmaketranslation (- Origin_x,-origin_y),
                                      cgaffinetransformmakescale (1, Radiuscale)),
                          cgaffinetransformmaketranslation ( Origin_x, origin_y));
  Cgpathaddarc (Curvedpath, &t2, origin_x, origin_y, Radiusx,startangle,endangle, 1);
  Pathanimation.path = Curvedpath;
  Cgpathrelease (Curvedpath);

Well, so far, the trajectory and properties of the animation have been written. Add to view on the OK.

3. Bezier Ellipse

If the entire ellipse, you only need to set the ideal ellipse of the tangent circle.

  The entire ellipse
  cgcontextref context = Uigraphicsgetcurrentcontext ();
  Cgcontextsavegstate (context);
  Uibezierpath *arc = [Uibezierpath bezierpathwithovalinrect:cgrectmake (origin_x-100, origin_y-50, MB)];
  [[Uicolor Whitecolor] setstroke];
  [Arc stroke];
  Cgcontextrestoregstate (context);

Conclusion: I hope this article will be helpful to you. If you have a better idea, welcome to communicate with me!
Demo Address: Https://github.com/xiaochenyi/CircleAnimateDemo

Wen/Autumn Rain W (Jane book author)
Original link: http://www.jianshu.com/p/d8cc02e7efa7
Copyright belongs to the author, reproduced please contact the author to obtain authorization, and labeled "Jane book author."