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

2025-05-29 0 85

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

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

椭圆.gif

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

实现步骤:

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

?

1

2

3

4

5

6
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,我们要改成椭圆,

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16
//短半轴和长半轴的比例

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.贝塞尔画椭圆

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

?

1

2

3

4

5

6

7
//整个椭圆

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
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 IOS 圆球沿着椭圆轨迹做动画 https://www.kuaiidc.com/91552.html

相关文章

发表评论
暂无评论