CALayer显式动画记录
2016-01-07 14:07
302 查看
每天被一堆业务逻辑搅来搅去,抽空学习点动画的知识还是很舒心的。虽然平时用到的并不多,但还是简单记录一下。
通过给layer添加CABasicAnimation对象,设置的keyPath就是想要改变的属性,fromValue是动画的开始值,toValue就是动画后对应的属性值。
因为只是设置了动画的开始值和结束值,并没有真正改变layer的属性值,所以动画结束后还是会恢复到初始状态。
为了让layer颜色在动画后不回到原来的值,我们可以在动画结束后设置它的最终值。这需要用到CAAnimation的代理方法。
将animation的代理设为自身,并实现代理方法。
这样动画结束后图层就不会回到先前的状态了。
查看CABasicAnimation定义,可以看到还有一个byValue
byValue及fromValue和toValue的用法都有详细解释。
如果同时设置了3个值要保证fromValue+byValue == toValue,不然会很奇怪,动画不知道结束值是toValue还是fromValue+byValue。
也可以通过设置动画的路径path:
这样图层会沿着爱心路线运动。
知识还是要有的,万一哪天用到了呢。
CABasicAnimation
CABasicAnimation *animation = [CABasicAnimation animation]; animation.keyPath = @"backgroundColor"; animation.fromValue = (__bridge id)_colorLayer.backgroundColor; animation.toValue = (__bridge id)color.CGColor; [_layer addAnimation:animation forKey:nil];
通过给layer添加CABasicAnimation对象,设置的keyPath就是想要改变的属性,fromValue是动画的开始值,toValue就是动画后对应的属性值。
因为只是设置了动画的开始值和结束值,并没有真正改变layer的属性值,所以动画结束后还是会恢复到初始状态。
为了让layer颜色在动画后不回到原来的值,我们可以在动画结束后设置它的最终值。这需要用到CAAnimation的代理方法。
将animation的代理设为自身,并实现代理方法。
animation.delegate = self; - (void)animationDidStop:(CABasicAnimation *)anim finished:(BOOL)flag{ [CATransaction begin]; [CATransaction setDisableActions:YES]; _layer.backgroundColor = (__bridge CGColorRef)anim.toValue; [CATransaction commit]; }
这样动画结束后图层就不会回到先前的状态了。
查看CABasicAnimation定义,可以看到还有一个byValue
@interface CABasicAnimation : CAPropertyAnimation @property(nullable, strong) id fromValue; @property(nullable, strong) id toValue; @property(nullable, strong) id byValue;
byValue及fromValue和toValue的用法都有详细解释。
fromValue->toValue both `fromValue' and `toValue' non-nil. Interpolates between `fromValue' and `toValue'. fromValue->fromValue + byValue `fromValue' and `byValue' non-nil. Interpolates between `fromValue' and `fromValue' plus `byValue'. toValue-byValue->toValue `byValue' and `toValue' non-nil. Interpolates between `toValue' minus `byValue' and `toValue'. fromValue->当前layer对应属性值 `fromValue' non-nil. Interpolates between `fromValue' and the current presentation value of the property. 当前layer对应属性值->toValue `toValue' non-nil. Interpolates between the layer's current value of the property in the render tree and `toValue'. 当前layer对应属性值->当前layer对应属性值+byValue `byValue' non-nil. Interpolates between the layer's current value of the property in the render tree and that plus `byValue'. */
如果同时设置了3个值要保证fromValue+byValue == toValue,不然会很奇怪,动画不知道结束值是toValue还是fromValue+byValue。
CAKeyframeAnimation
CAKeyframeAnimation可以通过设置values数组来控制动画过程中关键帧,像这样:CAKeyframeAnimation *animation = [CAKeyframeAnimation animation]; animation.keyPath = @"backgroundColor"; animation.duration = 2; animation.values = @[(__bridge id)[UIColor blueColor].CGColor, (__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor greenColor].CGColor, (__bridge id)[UIColor blueColor].CGColor ]; [_layer addAnimation:animation forKey:nil];
也可以通过设置动画的路径path:
//画一个爱心路径 UIBezierPath *bezierPath = [UIBezierPath bezierPath]; [bezierPath moveToPoint:CGPointMake(kScreenWidth/2., 200)]; //通过两个中间控制点画出右半圆 [bezierPath addCurveToPoint:CGPointMake(kScreenWidth/2., 400) controlPoint1:CGPointMake(kScreenWidth/2.+200, 20) controlPoint2:CGPointMake(kScreenWidth/2.+200, 300)]; //通过两个中间控制点画出左半圆 [bezierPath addCurveToPoint:CGPointMake(kScreenWidth/2., 200) controlPoint1:CGPointMake(kScreenWidth/2.-200, 300) controlPoint2:CGPointMake(kScreenWidth/2.-200, 20)]; [bezierPath closePath]; CAKeyframeAnimation *animation = [CAKeyframeAnimation animation]; animation.keyPath = @"position"; animation.duration = 4; animation.path = bezierPath.CGPath; [_layer addAnimation:animation forKey:nil];
这样图层会沿着爱心路线运动。
CAAnimation
过渡动画,可以通过type和subtype设置过渡样式CATransition *animation = [CATransition animation]; animation.type = @"push" animation.subtype = @"fromLeft"; [_layer addAnimation:animation forKey:nil];
相关文章推荐
- iOS开发中CAlayer层的属性以及自定义层的方法
- iOS开发 显式动画的原理及实现
- CALayer与UIView的关系
- CALayer Animatable Properties 之animationWithKeyPath
- CALayer 与UIView介绍
- CALayer、CGAffineTransform
- iOS CALayer-实现颜色的渐变和曲线图
- 使用CALayer的delegate绘制layer的内容导致程序崩溃
- iOS 动画分类浅析
- CALayer(Transform)旋转后产生锯齿
- CoreAnimation
- AsyncDisplayKit入门指南
- ios中如何对view画圆角
- iOS CALayer讲解(转载)
- CALayer 详解(转载)
- IOS 之 CALayer详解
- CALayer的隐式动画
- CALayer的position和anchorPoint
- CALayer的常用属性(笔记与分享)
- 实现透明度渐变和颜色渐变