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

 更新时间:2016年09月20日 10:49:22   作者:秋雨W  
这篇文章主要介绍了IOS 圆球沿着椭圆轨迹做动画的相关资料,需要的朋友可以参考下

前言:最近公司项目有个需求,需要实现让一个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,即一个椭圆形的路径。需要使用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 App开发中UIViewController的loadView方法使用

    详解iOS App开发中UIViewController的loadView方法使用

    这篇文章主要介绍了详解iOS App开发中UIViewController的loadView方法使用,讲解了访问view属性时loadView方法的调用及使用loadView时的一些注意点,需要的朋友可以参考下
    2016-03-03
  • 详解iOS 验证码输入的实现思路

    详解iOS 验证码输入的实现思路

    这篇文章主要介绍了iOS 验证码输入一种实现思路,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • iOS 屏幕解锁文字动画效果

    iOS 屏幕解锁文字动画效果

    这篇文章主要介绍了iOS 屏幕解锁文字动画效果的相关资料,需要的朋友可以参考下
    2016-09-09
  • iOS AFNetworking各种功能封装类代码

    iOS AFNetworking各种功能封装类代码

    下面小编就为大家分享一篇iOS AFNetworking各种功能封装类代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • ios下移动文件方法汇总

    ios下移动文件方法汇总

    这篇文章主要给大家汇总了一下ios下移动文件方法,从简单到复杂,十分的实用,有需要的小伙伴可以参考下。
    2015-05-05
  • 如何在 iOS 应用中添加位置信息

    如何在 iOS 应用中添加位置信息

    这篇文章主要介绍了如何在 iOS 应用中添加位置信息,帮助大家更好的理解和学习使用ios,感兴趣的朋友可以了解下
    2021-02-02
  • iOS 读取URL图片并存储到本地的实例

    iOS 读取URL图片并存储到本地的实例

    下面小编就为大家带来一篇iOS 读取URL图片并存储到本地的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • iOS实现自定义起始时间选择器视图

    iOS实现自定义起始时间选择器视图

    本篇文章主要介绍了iOS实现自定义起始时间选择器视图,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • iOS 监听回调机制KVO实例

    iOS 监听回调机制KVO实例

    下面小编就为大家分享一篇iOS 监听回调机制KVO实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • Objective-C中编程中一些推荐的书写规范小结

    Objective-C中编程中一些推荐的书写规范小结

    这篇文章主要介绍了Objective-C的一些编程书写规范小结,包括类与方法等面向对象编程相关的代码编写风格,需要的朋友可以参考下
    2016-04-04

最新评论