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

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

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

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

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

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

let circleView:UIView = UIView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
let redCircleLayer:CAShapeLayer = CAShapeLayer()
let redCirclePath:UIBezierPath = UIBezierPath(ovalInRect: CGRect(x: 0, y: 0, width: 20, height: 20))
redCircleLayer.path = redCirclePath.CGPath
redCircleLayer.fillColor = UIColor.redColor().CGColor
circleView.layer.addSublayer(redCircleLayer) self.view.addSubview(circleView)
//创建关键帧动画对象
let circleKeyframeAnimation:CAKeyframeAnimation = CAKeyframeAnimation(keyPath: "position")
circleKeyframeAnimation.path = circleKeyframePath
circleKeyframeAnimation.duration = 5
//让 Core Animation 向被驱动的对象施加一个恒定速度,不管路径的各个线段有多长。
circleKeyframeAnimation.calculationMode = kCAAnimationPaced
circleKeyframeAnimation.repeatCount = HUGE
//让它自身也做旋转,不过是圆的看不出效果
circleKeyframeAnimation.rotationMode = kCAAnimationRotateAutoReverse
//print(circleView.layer.anchorPoint)
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. IPD模式下开展敏捷开发的一些问题汇总

    1.      我们现在普遍用的是老系统情况下,什么时候把软件和硬件在敏捷项目里面集成? 答:有两种场景:第一种场景是把软件分几个迭代,最后把软件和硬件一起集成:第二种场景是更好的一种场景,每几个迭代 ...

  2. HTML之DOM

    对于B/S开发,客户端与服务器端的交互是非常必要的,JavaScript的提出解决了很多问题,AJAX的提出也解决了异步通信的问题,更加为用户着想了.而DOM是其中非常基础的知识,在学习AJAX的同时 ...

  3. 关于mysql占用CPU过高,问题解决

    使用SHOW PROCESSLIST 查看 原因: 使用了 一个触发器 不断的去删除日志,保证每个用户的日志只有10条 去掉之后,CPU使用率从97% 降到了 %. 利用show columns fr ...

  4. python numpy 介绍

    NumPy提供了两种基本的对象:ndarray(N-dimensional array object)和 ufunc(universal function object).ndarray(下文统一称之 ...

  5. C++中复制构造函数

    复制构造函数 复制构造函数用于: 根据另一个同类型的对象显示或隐式初始化一个对象 复制一个对象,将它作为实参传给一个函数 从函数返回时复制一个对象 初始化顺序容器中的元素 根据元素初始化式列表初始化数 ...

  6. linux-8 基本命令---echo

    1.echo   命令用于终端显示字符或变量 格式:“echo[字符串| 变量]” @1 .echo命令的字符串输出到终端: @2 .echo查看当前SHELL的变量值(前面有$符号): @3 .查看 ...

  7. HTTP协议之chunk编码(分块传输编码

    Transfer-Encoding: chunked 表示输出的内容长度不能确定,普通的静态页面.图片之类的基本上都用不到这个. 但动态页面就有可能会用到,但我也注意到大部分asp,php,asp.n ...

  8. Atitit.java eval功能的实现  Compiler API

    Atitit.java eval功能的实现  Compiler API 输出echo2 输出目录配置2 针对编译器,JDK 设计了两个接口,分别是 JavaCompiler 和JavaCompiler ...

  9. atitit。 hb Hibernate sql 查询使用

    atitit. hb  Hibernate sql 查询使用 #----------返回list<map>法..这个推荐使用.      q.setResultTransformer(Tr ...

  10. Oracle数据库建表+添加数据练习

    SQL脚本: --建表 --student表+注释 create table student( sno ) not null, sname ) not null, ssex ) not null, s ...