0%

CAAnimation 的属性(动画)

动画方式

动画方式有2D移动。

对于CABasicAnimation类:

1
2
3
//2D移动
CABasicAnimation* basicAnimation;
basicAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];

以上代码表示沿着竖直方向移动。同理,将y换成x就表示沿着水平方向移动。

3D旋转
1
2
3
//3D旋转
CABasicAnimation* basicAnimation;
basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

以上代码表示以y轴为对称轴进行旋转。同理,还有以x轴和z轴为对称轴进行旋转。
三维空间中的x,y,z方向如下图所示,其中z的方向和屏幕垂直:

三维空间中的x,y,z方向

x,y,z方向的动画效果如下:

transform.rotation.x的旋转效果

transform.rotation.y的旋转效果

transform.rotation.z的旋转效果

fromValue和toValue

fromValue表示动画的起始位置

toValue表示动画的结束位置

duration

duration表示一次动画持续的时间

repeatCount

repeatCount表示动画的重复次数

cumulative

cumulative表示动画的位置是否要进行累加。

当repeatCount大于1,而且cumulative为YES的时候:第n+1次动画的起始位置的值,就是第n次动画结束时的位置加上第n+1次动画的fromValue。

1
2
3
4
5
basicAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
basicAnimation.fromValue = @200;
basicAnimation.toValue = @250;
basicAnimation.cumulative = YES;
basicAnimation.repeatCount = 2;

此时,第1次动画,起始位置是纵坐标为200处;第2次动画,起始位置的纵坐标就变为450。

beginTime

beginTime用于设置动画的开始时间,也可以用来设置动画的延时。

1
2
basicAnimation.beginTime = CACurrentMediaTime()+3;
//表示延时3秒钟开始动画
fillMode

用来设置动画之前或者之后的状态,有4种选择:

  • kCAFillModeForwards:表示动画结束之后,保持状态不变

  • kCAFillModeBackwards:表示在动画开始之前,只要layer被加入了一个动画,即使动画还没有开始(beginTime属性设置了延时),layer也会马上进入动画状态。有一个fromValue的属性,此时layer会马上进入fromValue所在的位置。

  • kCAFillModeBoth:同时有kCAFillModeForwards和kCAFillModeBackwards的效果。

  • kCAFillModeRemoved:表示动画结束之后,恢复到动画之前的状态。效果和kCAFillModeForwards正好相反。

kCAFillModeBackwards的效果:假设一个layer开始的时候纵坐标为0,动画方式为position.y,fromValu为200,toValue为300,beginTime为延时3秒钟。如果fillMode设置为kCAFillModeBackwards,那么这个layer一旦添加了这个动画效果,马上就会下移200,等待3秒钟之后,再开始动画。如果没有设置kCAFillModeBackwards,那么在添加了动画效果之后,这个layer会在纵坐标为0的地方等待3秒钟,然后瞬间下移200,再开始动画。

removedOnCompletion

removedOnCompletion表示动画结束之后,是否会回到动画开始之前的状态,默认情况下是YES。

如果想要将动画效果设置成,动画结束之后,保持状态不变,不但removedOnCompletion要设置成NO,fillMode也必须设置成kCAFillModeForwards。(经测试,仅仅设置其中的一个条件,动画结束之后,还是会恢复原状)

叶世昌 wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!