用CAKeyframeAnimation构建动画路径
复杂路径的动画,我们可以借助关键关键帧动画(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构建动画路径的更多相关文章
- [翻译] AnimatedPath 动画路径(持续更新)
AnimatedPath动画路径 感谢原作者分享精神,有空补上使用教程 https://github.com/twotoasters/AnimatedPath AnimatedPath explore ...
- 使用path制作各类型动画路径
原文:使用path制作各类型动画路径 <Window x:Class="使用path制作各类型动画路径.MainWindow" xmlns="http://sche ...
- Flutter 1.17 新 Material motion 规范的预构建动画
老孟导读:在 Flutter 1.17 发布大会上,Flutter 团队还发布了新的 Animations 软件包,该软件包提供了实现新的 Material motion 规范的预构建动画. 软件包 ...
- 之二:CAKeyframeAnimation - 关键帧动画
是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CA ...
- iOS之CAKeyframeAnimation关键帧动画详解
CABasicAnimation算是CAKeyFrameAnimation的 特殊情况,即不考虑中间变换过程,只考虑起始点与目标点就可以了.而CAKeyFrameAnimation则更复杂一些,允许我 ...
- core Animation之CAKeyframeAnimation(关键帧动画)
CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSA ...
- IOS第18天(6,CAKeyframeAnimation关键帧动画)
******* #import "HMViewController.h" @interface HMViewController () @property (weak, nonat ...
- [osg]OSG相机添加动画路径
查看osg坐标系,camare默认姿态:http://www.cnblogs.com/lyggqm/p/8073688.html 首先搞清楚osg的坐标系以及osg::camare的默认姿态 下代码面 ...
- WPF -- 构建动画
写在前面:本文代码摘自<Head First C#> 本文使用ObjectAnimationUsingKeyFrames + Storyboard构建一个动画. ObjectAnimati ...
随机推荐
- KEIL MDK输出map文件分析
一.文件分析流程 1.第一部分:Section Cross References 主要是各个源文件生成的模块之间相互引用的关系. stm32f10x.o(STACK) refers (Special) ...
- css伪类运用
<!doctype html><html><head><meta charset="utf-8"><title>CSS输 ...
- hdu 5102 树上前k短路径长度和
http://acm.hdu.edu.cn/showproblem.php?pid=5102 给一棵树,求出所有节点的距离中前k小的路径长度和 由于路径长度的定义为两点之间的边的个数,所有遍历1~n- ...
- 用word-break: break-all解决不正确换行问题
这个在新闻频道存在已久的问题,今天终于把它给解决了! 问题是这样的,当一段文字中有比较长的链接地址,会造成链接地址之前的文字不能正确换行,效果如下: 对应的html代码如下: <p> 如图 ...
- console.log 被重写覆盖以后如何恢复
有时候一些项目中会使用类似如下的方式覆盖掉console对象: var console = {}; console.log = function(){}; console.info = functio ...
- [游戏模版18] Win32 五子棋
>_<:Learning its AI logic. >_<:resource >_<:code: #include <windows.h> // C ...
- JavaScript实用技巧总结
前言 总结一下最近接触到的JavaScript语法糖,与大家共享. 每块糖都有详细的说明和示例,就不多说了. 准确的类型检查 /* * @function: * 类型检查示例 * 通过此方法,可以检查 ...
- VS2015详细安装步骤
亲身经历记录下来,以备后用.也希望能够帮助到有需要的朋友们! 1.安装之前首先下载VS2015,下载地址: [VS2015社区版官方中文版下载]:http://download.microsoft.c ...
- AngularJS快速入门指南11:事件
AngularJS拥有自己的HTML事件指令. ng-click指令 ng-click指令定义了AngularJS的click事件. <div ng-app="" ng-co ...
- String.Format in javascript
有些时候,我们确实需要在JavaScript中进行字符串替换,类似于C#中的String.Format()方法一样,只不过这种格式化替换只局限于对由'{0}','{1}','{2}'...所组成的“占 ...