圆球沿着椭圆轨迹做动画

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

椭圆.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,即一个椭圆形的路径。需要使用CGPathAddArcCGPathAddArc经常用于画正圆,比如下面就是一个正圆,各个参数的意义:

 //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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 10,570评论 5 13
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 12,733评论 6 30
  • 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你...
    被吹落的风阅读 5,547评论 1 2
  • 每天的阅读已成习惯,最近雨比较多,晚上吃完饭也不能出去散步,一家人就会坐在儿子的活动区阅读,老公陪儿子读绘...
    小玲儿_阅读 1,220评论 2 8
  • 清晨打开手机,看到上面日期:8月23日。 突然意识到今天是我来简书写作整整一年的时间。 此时想起了慕芝妹妹的约稿:...
    RainbowPeng阅读 9,621评论 127 161

友情链接更多精彩内容