IOS 圆球沿着椭圆轨迹做动画

2019-10-21 18:52:28

字体：大中小

来源：转载

供稿：网友

前言：最近公司项目有个需求，需要实现让一个view沿着椭圆轨迹做动画，效果实现后，就自己封装做了一个小demo，使用更方便。先看效果：

IOS,圆球沿着椭圆轨迹做动画,椭圆轨迹做动画,圆球沿着椭圆轨迹做动画实例

椭圆.gif

效果图中的白色椭圆轨迹线其实是用贝塞尔曲线画出来的，为了清晰的看出来运动的轨迹。其实项目中是不显示轨迹线的，也就是小球是悬空运动的。若不需要删除掉即可。

实现步骤：

1.首先设定关键帧动画CAKeyframeAnimation的一些属性，比如运动时间和重复次数和calculationMode模式，我们选择kCAAnimationPaced 使得动画均匀进行。

  CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];  pathAnimation.calculationMode = kCAAnimationPaced;  pathAnimation.fillMode = kCAFillModeForwards;  pathAnimation.removedOnCompletion = NO;  pathAnimation.duration = 5.0;  pathAnimation.repeatCount = 2;

2.设定好关键帧动画的path，即一个椭圆形的路径。需要使用CGPathAddArc，CGPathAddArc经常用于画正圆，比如下面就是一个正圆，各个参数的意义：

//160,200为圆心,100为半径（startAngle，endAngle）为起始角度和结束角度，1为顺时针，0 为逆时针
CGPathAddArc(curvedPath, NULL, 160,200, 100, startAngle, endAngle, 0);

需要注意的是由于iOS中的坐标体系是和Quartz坐标体系中Y轴相反的，所以iOS UIView在做Quartz绘图时，Y轴已经做了Scale为-1的转换，因此造成CGPathAddArc函数最后一个是否是顺时针的参数结果正好是相反的，也就是说如果设置最后的参数为YES，根据参数定义应该是顺时针的，但实际绘图结果会是逆时针的！

我们需要画的是椭圆啊，别急，接下来稍作更改即可。正圆第二个参数默认为NULL，我们要改成椭圆，

//短半轴和长半轴的比例  float radiuscale = 0.5;  //椭圆顶点的坐标值  CGFloat origin_x = self.frame.size.width/2;  CGFloat origin_y = self.frame.size.height/2;  //长半轴的长  CGFloat radiusX = 100;  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);

好了，至此，动画的轨迹和属性都写好了。添加到view上就ok了。

3.贝塞尔画椭圆

如果是整个椭圆的话，只需要设定好理想中的椭圆的外切圆即可。

  //整个椭圆  CGContextRef context = UIGraphicsGetCurrentContext();  CGContextSaveGState(context);  UIBezierPath *arc = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(origin_x-100, origin_y-50, 200, 100)];  [[UIColor whiteColor] setStroke];  [arc stroke];  CGContextRestoreGState(context);

总结: 希望本文能对你有帮助。如果你有更好的想法,欢迎和我交流!
demo地址:https://github.com/xiaochenyi/CircleAnimateDemo

文／秋雨W（简书作者）
原文链接：http://www.jianshu.com/p/d8cc02e7efa7
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

注：相关教程知识阅读请移步到IOS开发频道。

上一篇：iOS渐变圆环旋转动画CAShapeLayer CAGradientLayer

下一篇：IOS 实现3D 浮动效果动画