复杂路径的动画,我们可以借助关键关键帧动画(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. Windows 8.1 应用再出发 - 磁贴的更新

    本篇和大家一起了解一下Windows 8.1 中磁贴的更新,我们来看看如何利用它做出更好的应用磁贴. 首先我们从展现形式上来对比一下Windows 8 与 Windows 8.1 中的磁贴: Wind ...

  2. 基于OpenCv的人脸检测、识别系统学习制作笔记之一

    基于OpenCv从视频文件到摄像头的人脸检测 在OpenCv中读取视频文件和读取摄像头的的视频流然后在放在一个窗口中显示结果其实是类似的一个实现过程. 先创建一个指向CvCapture结构的指针 Cv ...

  3. SymmetricDS 3.5.0 发布,数据同步和复制

    SymmetricDS 3.5.0 关闭 53 个问题,新增对 SQLite on Android.Sybase ASE 和 Sybase ASA 的支持:增加了文件同步功能,可同步目录.文件过滤和脚 ...

  4. [C#] 與Android共舞–透過GET方式傳資料給Server(含解決中文編碼問題) (转帖)

    上一篇文章分享了透過POST 方式傳資料回Server,這一篇來談談有關於透過GET的方式傳遞 首先,如我預期的一樣,透過網址傳遞,會產生編碼問題,這邊我就順代解掉,希望有碰到的人 可以不用為此煩惱. ...

  5. Linux 下zip包的压缩与解压

    linux zip 命令详解 功能说明:压缩文件. 语 法:zip [-AcdDfFghjJKlLmoqrSTuvVwXyz$][-b <工作目录>][-ll][-n <字尾字符串& ...

  6. Swift 笔记

    苹果官方文档 https://developer.apple.com CocoaChina帮助文档 http://www.cocoachina.com/special/swift/ 74个Swift标 ...

  7. Wix 安装部署教程(四) 添加安装文件及快捷方式

    通过之前三篇的介绍,大家对wix的xml部署方式也应该有一些认识,今天天气不错,再来一发.主要介绍桌面,开始菜单,卸载等功能的如何添加.希望园友们支持! 一.如何添加文件 Demo打包程序很简单,就一 ...

  8. Book Review: PowerShell 3.0 Advanced Administration Handbook

    Recently I read a book, PowerShell 3.0 Advanced Administration Handbook, which I found really worthy ...

  9. CentOS7 修改系统时间

    yum -y install ntp [root@localhost kevin]# systemctl enable ntpdsystemctl start ntpdntpdate us.pool. ...

  10. Sublime Text 常用快捷键和优秀插件

    SublimeText3常用快捷键和优秀插件 SublimeText是前端的一个神器,以其精简和可DIY而让广大fans疯狂.好吧不吹了直入正题 -_-!! 首先是安装,如果你有什么软件管家的话搜一下 ...