复杂路径的动画,我们可以借助关键关键帧动画(CAKeyframeAnimation)来实现,给其的path属性设置相应的路径信息即可。

以下为一个红色的小球按照指定的路径运动的动画。

此动画关键在于如何把路径画出来(如两个圆弧)

  1. //创建一个可变路径
  2. let circleKeyframePath = CGPathCreateMutable()
  3. //创建用于转移坐标的Transform,这样我们不用按照实际显示做坐标计算,以这个坐标做基准点。坐标为下半个弧的中心点
  4. var circleKeyframeTransform:CGAffineTransform = CGAffineTransformMakeTranslation(self.view.frame.size.width / 2, 260)
  5.  
  6. CGPathMoveToPoint(circleKeyframePath, &circleKeyframeTransform, 0, 0)
  7. //CGPathAddLineToPoint(circleKeyframePath, &circleKeyframeTransform, -100, 0)
  8. //创建一个1/4弧(圆的左下角弧)
  9. CGPathAddArc(circleKeyframePath, &circleKeyframeTransform, 0, -100, 100, CGFloat(0.5 * M_PI), CGFloat(M_PI), false)
  10. CGPathAddLineToPoint(circleKeyframePath, &circleKeyframeTransform, -100, -100)
  11. CGPathAddLineToPoint(circleKeyframePath, &circleKeyframeTransform, -50, -100)
  12. //创建一个以半径为50的两条切线的内切圆弧
  13. CGPathAddArcToPoint(circleKeyframePath, &circleKeyframeTransform, 0, -200, 50, -100, 50)
  14. CGPathAddLineToPoint(circleKeyframePath, &circleKeyframeTransform, 50, -100)
  15.  
  16. CGPathAddLineToPoint(circleKeyframePath, &circleKeyframeTransform, 100, -100)
  17. //CGPathAddLineToPoint(circleKeyframePath, &circleKeyframeTransform, 100, 0)
  18. //创建一个1/4弧(圆的右下角弧)
  19. CGPathAddArc(circleKeyframePath, &circleKeyframeTransform, 0, -100, 100, 0, CGFloat(0.5 * M_PI), false)
  20. //关闭路径
  21. CGPathCloseSubpath(circleKeyframePath)
  22. let backgroundLayer:CAShapeLayer = CAShapeLayer()
  23. backgroundLayer.path = circleKeyframePath
  24. backgroundLayer.strokeColor = UIColor.yellowColor().CGColor
  25. backgroundLayer.lineWidth = 3
  26. backgroundLayer.fillColor = UIColor.clearColor().CGColor
  27. self.view.layer.addSublayer(backgroundLayer)

此时在模拟器上运行后的效果如下:

看起来还不错哦。像个元宝,呵,接下来就创建一个UIView对象让它成圆形,并按此路径做运动即可。

  1. let circleView:UIView = UIView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
  2. let redCircleLayer:CAShapeLayer = CAShapeLayer()
  3. let redCirclePath:UIBezierPath = UIBezierPath(ovalInRect: CGRect(x: 0, y: 0, width: 20, height: 20))
  4. redCircleLayer.path = redCirclePath.CGPath
  5. redCircleLayer.fillColor = UIColor.redColor().CGColor
  6. circleView.layer.addSublayer(redCircleLayer)
  7.  
  8. self.view.addSubview(circleView)
  9. //创建关键帧动画对象
  10. let circleKeyframeAnimation:CAKeyframeAnimation = CAKeyframeAnimation(keyPath: "position")
  11. circleKeyframeAnimation.path = circleKeyframePath
  12. circleKeyframeAnimation.duration = 5
  13. //让 Core Animation 向被驱动的对象施加一个恒定速度,不管路径的各个线段有多长。
  14. circleKeyframeAnimation.calculationMode = kCAAnimationPaced
  15. circleKeyframeAnimation.repeatCount = HUGE
  16. //让它自身也做旋转,不过是圆的看不出效果
  17. circleKeyframeAnimation.rotationMode = kCAAnimationRotateAutoReverse
  18. //print(circleView.layer.anchorPoint)
  19. circleView.layer.addAnimation(circleKeyframeAnimation, forKey: nil)

到此,就完成了,比较重要的要区分CGPathAddArc以及CGPathAddLineToPoint的不同,不同可以参考StackOverflow

CGPathAddArc方法工作方式类似于,(x,y)为圆心所在的坐标,radius为圆的半径,startAngle路径开始的角度按弧度算,endAngle路径结束的角度按弧度算,

clockwise方向(与实际的方向相反)

CGPathAddLineToPoint方法工作如下图,x1,y1,x2,y2为方法的四个位置参数,r为半径。

用CAKeyframeAnimation构建动画路径的更多相关文章

  1. [翻译] AnimatedPath 动画路径(持续更新)

    AnimatedPath动画路径 感谢原作者分享精神,有空补上使用教程 https://github.com/twotoasters/AnimatedPath AnimatedPath explore ...

  2. 使用path制作各类型动画路径

    原文:使用path制作各类型动画路径 <Window x:Class="使用path制作各类型动画路径.MainWindow" xmlns="http://sche ...

  3. Flutter 1.17 新 Material motion 规范的预构建动画

    老孟导读:在 Flutter 1.17 发布大会上,Flutter 团队还发布了新的 Animations 软件包,该软件包提供了实现新的 Material motion 规范的预构建动画. 软件包 ...

  4. 之二:CAKeyframeAnimation - 关键帧动画

    是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CA ...

  5. iOS之CAKeyframeAnimation关键帧动画详解

    CABasicAnimation算是CAKeyFrameAnimation的 特殊情况,即不考虑中间变换过程,只考虑起始点与目标点就可以了.而CAKeyFrameAnimation则更复杂一些,允许我 ...

  6. core Animation之CAKeyframeAnimation(关键帧动画)

    CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSA ...

  7. IOS第18天(6,CAKeyframeAnimation关键帧动画)

    ******* #import "HMViewController.h" @interface HMViewController () @property (weak, nonat ...

  8. [osg]OSG相机添加动画路径

    查看osg坐标系,camare默认姿态:http://www.cnblogs.com/lyggqm/p/8073688.html 首先搞清楚osg的坐标系以及osg::camare的默认姿态 下代码面 ...

  9. WPF -- 构建动画

    写在前面:本文代码摘自<Head First C#> 本文使用ObjectAnimationUsingKeyFrames + Storyboard构建一个动画. ObjectAnimati ...

随机推荐

  1. python import 模块异常问题

    新项目开始了,(tornado,python) 结果出现了一个比较诡异的问题. import 自己的在conf文件夹下配置文件settings的时候, from conf.settings impor ...

  2. UITableView表格视图、UITableView代理方法及应用

    一.基本知识点 UITableView表格视图,是一个可以滚动的界面(理解为垂直滚动的UIScrollView),可展示多行数据,没有行数的限制,只能有一列. 使用UITableView: 1.展示信 ...

  3. Java集合框架面试题

    www.cnblogs.com/zhxxcq/archive/2012/03/11/2389611.html 这里的两个图很形象,由于放进图片链接,图片显示不了,所以只能给出该链接. Java集合框架 ...

  4. WinRAR安装、破解与去除弹窗广告

    本教程教大家怎么破解WinRAR压缩软件和去除广告(教程属于总结类,总结网上给出的方法,并且亲测有效,非本人原创)WinRAR5.40 2016.10.06 首先下载WinRAR软件,去它的官方英文网 ...

  5. SQL Server In-Memory OLTP 无损PPT分享

    我在今年DTCC上SQL Server内存数据库分享 PPT.感兴趣的朋友可以看下,无闩锁的数据结构使得热区问题成为过去,并行很好的维护了CPU Cache的命中率,Native代码执行使得CPU流水 ...

  6. json原理和jquey循环遍历获取所有页面元素

    1.json原理: javascript object notation (javascript 对象表示法) 是一种轻量级的数据交换语言,由javascript衍生而出,适用于.NET java c ...

  7. Jquery最全过滤器总结

    不管什么时候,总是有这么些时候:当我们使用jQuery的各种过滤器时,总是有那么几个记不牢,还要搜索一下或者翻翻手册!多少次想总结一下,最终都没总结,现在网上找到一篇总结的不错的,但是排版有点乱,本人 ...

  8. 简单SQL分页

    Select * From (     Select     Row_Number() Over(Order By 表1.CreateTime desc) as rowId,     表1.Alumn ...

  9. HTTP权威指南阅读笔记三:HTTP报文

    报文的组成部分 报文由三部分组成:对报文进行描述的起始行(start line).包含属性的首部(header),以及可选的.包含数据的主体(body)部分. 请求报文格式 <method> ...

  10. load css use javascript

    var $ = document; // shortcut var cssId = 'myCss'; // you could encode the css path itself to genera ...