最近一直在看关于CALayer的相关知识,这里整理一下CABasicAnimation相关知识
1.CAlayer
2.CoreAnimation
3.anchorPoint(锚点)
4.CABasicAnimation
一、关于CAlayer
CALayer.pngCALayer属性.png
CAlayer遵循CAMeidaTiming协议,CABasicAnimation继承于CAPropertyAnimation,CAPropertyAnimation继承于CAAnimation而CAAnimation遵CAMeidaTiming协议
CAMediaTiming属性列表
属性 | 类型 | 说明 |
---|---|---|
beginTime | CFTimeInterval | 指定接收方相对于其父对象(如果适用)的开始时间。 |
timeOffset | CFTimeInterval | 指定活动本地时间的额外时间偏移量。 |
repeatCount | float | 确定动画重复的次数。 |
repeatDuration | CFTimeInterval | 确定动画重复的秒数。 |
duration | CFTimeInterval | 指定动画的基本持续时间,以秒为单位。 |
speed | float | 指定从父时间空间将时间映射到接收者的时间空间。 |
autoreverses | BOOL | 确定动画在完成后是否相反执行 |
fillMode | NSString | 确定接收者的演示文稿是否在其活动持续时间完成后被冻结或删除。 |
FillMode
这些常数决定了定时对象在其活动持续时间完成后的行为。默认值是 kCAFillModeRemoved。
二、CAAnimation
CAAnimation可以分为以下几类:
- CABasicAnimation
基础动画,通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation - CAKeyframeAnimation
关键帧动画,可定制度比CABasicAnimation高,也是本系列的接下来的内容 - CAAnimationGroup
组动画,支持多个CABasicAnimation或者CAKeyframeAnimation动画同时执行
- CAAnimation 是一个抽象类, 遵循了CAMediaTiming协议和CAAction协议 我们不能直接使用CAAnimation类 而是使用其子类;
- CATransition:提供渐变效果,比如推拉push效果,消退fade效果,揭开reveal 效果
- CAAnimationGroup 允许多个动画同时播放
- CABasicAnimation 提供了对单一动画的实现
- CAKeyframeAnimation 关键帧动画 可以定义动画路线
- CAPropertyAnimation 属性动画 通常不直接使用,而是使用CABasicAnimation子类
** CABasicAnimation属性及说明**
属性和说明.jpeg
CABasicAnimation提供了最基础的动画属性设置,是简单的keyframe动画性能。CABasicAnimation可以看做是一种CAKeyframeAnimation的简单动画,因为它只有头尾的关键帧(keyframe)。
我们可以创建一个CABasicAnimaiton的对象通过keyPath的方式。CABasicAnimation提供了fromValue、toValue、byValue的设置(插值)。它们三个属性定义了一个动画的轨迹,并且最少两个值不能为空。
当设置了CABasicAnimation的起点与终点值后,中间的值都是通过插值方式计算出来的,插值计算是通过timingFunction来指定,timingFunction默认为空,使用liner(匀速运动)。例如,当我们设置了一个position的动画,设置了开始值PointA与结束值PointB,它们的运动先计算PointA与PointB的中间运动值PointCenter,而PointCenter是由timingFunction来指定值的,并且动画默认是直线匀速运动的。
-
CABasicAnimation遵循CAMediaTiming所以拥有CAMediaTiming的属性。
-
CABasicAnimation为图层属性提供基本的单关键帧动画功能的对象。
-
一个 CABasicAniamtion 的实例对象只是一个数据模型
-
速度控制函数(CAMediaTimingFunction)
-
kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉,这个是默认的动画行为。
-
kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开
-
kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地
-
kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。
CALayer *layer = [CALayer new];
layer.frame = CGRectMake(100, 100, 100, 100);
layer.backgroundColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer: layer];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.duration = 2;
animation.fromValue = [NSValue valueWithCGPoint:layer.position];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)];
//延时 1.0秒
animation.beginTime = CACurrentMediaTime() + 1.0;
// 指定动画重复是否累加
animation.cumulative = NO;
// 动画完成是否移除动画
animation.removedOnCompletion = YES;
// 设置移动的效果为快入快出
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
// 设置无限循环动画
animation.repeatCount = HUGE_VALF;
// 设置动画完成时,自动以动画回到原点
animation.autoreverses = YES;
// 设置动画完成时,返回到原点
animation.fillMode = kCAFillModeForwards;
[layer addAnimation:animation forKey:nil];
-
注意
** animation中的postion动画fromValue与fromValue均为layer的position,position与frame中origin不是同一个东西哦,开始弄了半天动画位置一直不对,才知道这里还有一个锚点的知识点。**
三、layer的position和anchorPoint(锚点)两个属性
锚点与位置测试.png锚点与位置验证.png
锚点影响位置.png
animationWithKeyPath值
值 | 说明 | value |
---|---|---|
transform.scale | 比例转化 | @(0.8) |
transform.scale.x | 宽的比例 | @(0.8) |
transform.scale.y | 高的比例 | @(0.8) |
transform.rotation.x | 围绕x轴旋转 | @(M_PI) |
transform.rotation.y | 围绕y轴旋转 | @(M_PI) |
transform.rotation.z | 围绕z轴旋转 | @(M_PI) |
cornerRadius | 圆角的设置 | @(50) |
backgroundColor | 背景颜色的变化 | (id)[UIColor purpleColor].CGColor |
bounds | 大小,中心不变 | [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)]; |
position | 位置(中心点的改变) | [NSValue valueWithCGPoint:CGPointMake(300, 300)]; |
contents | 内容,比如UIImageView的图片 | imageAnima.toValue = (id)[UIImage imageNamed:@"to"].CGImage; |
opacity | 透明度 | @(0.7) |
contentsRect.size.width | 横向拉伸缩放 | @(0.4)最好是0~1之间的 |
anchorPoint | 锚点(相当于改变position) | [NSValue valueWithCGPoint:CGPointMake(1, 1)] |
只要是CAlayer属性中的支持隐式动画的都可以作为keypath的值
四、CABasicAnimation
**CABasicAnimation为图层属性提供基本的单关键帧动画功能的对象最重要的三个属性就是fromValue、toValue、byValue **
属性 | 说明 |
---|---|
fromValue | 动画的效果变化的初始值 |
toValue | 动画效果变化的结束值(绝对值) |
byValue | byValue;动画效果变化的结束值(相对值) |
- fromValue和toValue不为空,动画的效果会从fromValue的值变化到toValue。
- fromValue和byValue都不为空,动画的效果将会从fromValue变化到fromValue+byValue。
- toValue 和byValue都不为空,动画的效果将会从toValue-byValue变化到toValue。
- 只有fromValue的值不为空,动画的效果将会从fromValue的值变化到当前的状态。
- 只有toValue的值不为空,动画的效果将会从当前状态的值变化到toValue的值。
- 只有byValue的值不为空,动画的效果将会从当前的值变化到(当前状态的值+byValue)的值。