CoreAnimation(二)-CAPropertyAnimation

CAPropertyAnimation也是一个抽象类,自身并不能对layer进行动画操作,需要其子类CABasicAnimation和CAKeyframeAnimation来实现动画操作。
属性解读:

属性 描述
keyPath 指定接收层动画的关键路径(入门篇提供了部分keyPath,敬请参考)
cumulative 下一次动画执行是否接着刚才的动画,默认为false
additive 如何处理多个动画在同一时间段执行的结果,若为true,同一时间段的动画合成为一个动画,默认为false。(使用 CAKeyframeAnimation 时必须将该属性指定为 true ,否则不会出现期待的结果)

一、CABasicAnimation(基础动画)

该子类中有三个属性:fromValuebyValuetoValue,主要用来操作缩放、平移和旋转等简单动画。随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值会在任意一个或两个属性值的范围内渐变。

fromValue:keyPath相应属性的初始值
byValue:keyPaht相应属性的相对插值
toValue:keyPath相应属性的结束值

有如下几种情况:

  • fromValue和toValue不为nil,keyPath属性值在fromValue与toValue之间渐变
  • fromValue和byValue不为nil,keyPath属性值在fromValue与(fromValue+byValue)之间渐变
  • byValue和toValue不为nil,keyPath属性值在(toValue-byValue)与toValue之间渐变
  • fromValue不为nil,keyPath属性值在fromValue与图层对应当前值之间渐变
  • toValue不为nil,keyPath属性值在图层对应当前值与toValue之间渐变
  • byValue不为nil,keyPath属性值在图层对应当前值与(图层对应当前值+toValue)之间渐变

注意:value的值可以设置为CATransform3D的对象,实现3D动画效果!

旋转动画
  //默认是绕着z轴旋转,也可指定绕某个轴旋转:transform.rotation.x
  let animation = CABasicAnimation(keyPath: "transform.rotation")
  //只设置toValue,动画会在图层对应当前值与toValue之间渐变
  animation.toValue = M_PI * 2
  //设置动画重复次数
  animation.repeatCount = MAXFLOAT
  //设置动画执行时间
  animation.duration = 1
  //添加动画到layer
  redView.layer.addAnimation(animation, forKey: nil)
缩放动画
  //transform.scale默认是x,y,z三个方向同时同比例缩放,也可指定某一个方向缩放
  let animation = CABasicAnimation(keyPath: "transform.scale")
  //只设置fromValue动画会在fromValue与图层对应当前值之前渐变
  animation.fromValue = -CGRectGetWidth(view.bounds)
  //设置动画重复次数
  animation.repeatCount = MAXFLOAT
  //设置动画执行时间
  animation.duration = 1
  //添加动画到layer,添加动画的key可以为nil,也可以为任意值,是用来在CAAnimation协议方法中区分不同动画,相当于UIView的tag
  greenView.layer.addAnimation(animation, forKey: nil)
平移动画:
  //keyPath可设置为x,y,z在对应方向平移或者直接写成transform.translation,在x和y方向同时平移
  let animation = CABasicAnimation(keyPath: "transform.translation.x")
  animation.fromValue = -CGRectGetWidth(view.bounds)
  animation.toValue = CGRectGetWidth(view.bounds)
  //设置动画重复次数
  animation.repeatCount = MAXFLOAT
  //设置动画执行时间
  animation.duration = 1
  //添加动画到layer
  blueView.layer.addAnimation(animation, forKey: nil)

动画效果图:



二、CAKeyframeAnimation

CALayer的关键帧动画与UIView的关键帧动画类似,UIView的动画可以看做是核心动画的简单封装。关键帧动画的值可以指定为一个值数组或者一个路径,和CABasicAnimation不同的是,关键帧动画在同一时间内对同一layer可以做多种不同动画,并且可以控制各动画的执行节奏。CAKeyframeAnimation常用的两个属性是valuesduration,这两个属性就可以简单的设置动画了,其余属性提供了更加细致化,更加强大的功能!
属性解读:

  • values:关键帧动画值的数组,当path为nil时设置有效,否则优先选择属性path做动画
  • path:动画执行的点路径(通过Core Graphics提供的API来绘制路径),设置了path,values将被忽略
  • keyTimes:关键帧动画每帧动画开始执行时间点的数组,取值范围为0~1,数组中相邻两个值必须遵循后一个值大于或等于前一个值,并且最后的值不能为大于1。设置的时候与calculationMode有关,具体请查看文档。未设置时默认每帧动画执行时间平均(公式:总时间/(总帧数-1))。例如,如果你指定了一个5帧,10秒的动画,那么每帧的时间就是2.5秒钟:10 /(5-1)=2.5
  • rotationMode:设置路径旋转,当设置path有不同角度时,会自动旋转layer角度与path相切
  • timingFunctions:动画执行效果数组,CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn),有kCAMediaTimingFunctionLinearkCAMediaTimingFunctionEaseInkCAMediaTimingFunctionEaseOutkCAMediaTimingFunctionEaseInEaseOutkCAMediaTimingFunctionDefault等选项|
  • calculationMode:关键帧时间计算方法,每帧动画之间如何过渡,类似与UIView的keyframeAnimation。有kCAAnimationLinearkCAAnimationDiscrete、** kCAAnimationPaced kCAAnimationCubic kCAAnimationCubicPaced**等选项
    不同calculationMode过渡示意图
摇一摇
        //摇一摇
        let shakeAnimation = CAKeyframeAnimation(keyPath: "transform.rotation")
        //设置晃动角度
        let angle = M_PI_4 / 2
        //设置关键帧动画的值
        shakeAnimation.values = [angle,-angle,angle]
        //设置关键帧动画每帧的执行时间,这里不设置也行,默认平均分配时间
        //shakeAnimation.keyTimes = [NSNumber(double: 0), NSNumber(double: 0.5), NSNumber(double: 1)]
        //设置动画重复次数,默认为1次
        shakeAnimation.repeatCount = MAXFLOAT
        //设置动画执行效果
        //shakeAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)]
        //设置相邻动画过渡方式
        //shakeAnimation.calculationMode = kCAAnimationCubic
        //添加动画
        view1.layer.addAnimation(shakeAnimation, forKey: nil)
贝赛尔曲线画“M”
    //创建贝赛尔曲线
        let path = UIBezierPath()
        //设置动画的执行路径为一个M的形状
        path.moveToPoint(CGPoint(x: 40, y: 300))
        path.addLineToPoint(CGPoint(x: 80, y: 150))
        path.addLineToPoint(CGPoint(x: 120, y: 300))
        path.addLineToPoint(CGPoint(x: 160, y: 150))
        path.addLineToPoint(CGPoint(x: 200, y: 300))
        let bezierAnimation = CAKeyframeAnimation(keyPath: "position")
        //由于CAKeyframeAnimation的path为CGPath,所以这里要转换一次
        bezierAnimation.path = path.CGPath
        //设置动画时间
        bezierAnimation.duration = 4
        //自动旋转layer角度与path相切
        bezierAnimation.rotationMode = kCAAnimationRotateAuto
        //设置动画重复次数
        bezierAnimation.repeatCount = MAXFLOAT
        //设置自动逆向
        bezierAnimation.autoreverses = true
        view2.layer.addAnimation(bezierAnimation, forKey: nil)
普通路径画圆
        let circlePath = CGPathCreateMutable()
        CGPathAddEllipseInRect(circlePath, nil, CGRect(x: 375/2, y: 667/2, width: 100, height: 100))
        let circleAnimation = CAKeyframeAnimation(keyPath: "position")
        circleAnimation.path = circlePath
        circleAnimation.duration = 2
        circleAnimation.repeatCount = MAXFLOAT
        view3.layer.addAnimation(circleAnimation, forKey: nil)
缩放
        let scaleAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
        scaleAnimation.values = [0.0, 0.4, 0.8, 1.2, 1.6, 1.2, 0.8, 0.4, 0.0]
        scaleAnimation.duration = 2
        scaleAnimation.autoreverses = true
        scaleAnimation.repeatCount = MAXFLOAT
        view4.layer.addAnimation(scaleAnimation, forKey: nil)

动画效果图:


结语

简单的介绍了CABasicAnimation和CAKeyframeAnimation的使用方法,希望对看这篇文章的你有些帮助。很多有趣的动画其实就是将普通动画用到极致,这就需要我们多动手去做,多动脑去想。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容