iOS动画:CABasicAnimation

Author Avatar
Botasky 8月 28, 2017

介绍iOS的Layer层的CABasicAnimataion动画

1.CAAnimation

iOS中Core Animation层的动画是依赖CAAnimation类实现的.iOS中还有其他层的动画

iOS动画

越上层,动画的封装度越高,动画实现越简洁,但是相反的,自由度更低.

这里主要理解CAAnimation,CAAnimation分为几类:

  • CABasicAnimation基础动画,通过设定起始点,终点,时间动画会沿着指定的设定去做动画.可以看做特殊的CAKeyFrameAniamtion
  • CAKeyFrameAniamtion关键帧动画,可指定度度比CABasicAnimation高
  • CAAnimationGroup组动画,可以将一系列CABasicAniamtion或者CAKeyFrameAniamtion组合起来同时执行的动画方式.

2.CABasicAnimation

2.1缩放

1
2
3
4
5
6
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];
    scaleAnimation.autoreverses = YES;
    scaleAnimation.repeatCount = MAXFLOAT;
    scaleAnimation.duration = 0.8;
KeyPath Description ValueType
transform.scale 对三个轴做缩放变换 NSNumber
transform.scale.x 对x轴做缩放 NSNumber
transform.scale.y 对y轴做缩放 NSNumber
transform.scale.z 对z轴做缩放 NSNumber

2.2移动

1
2
3
4
5
6
CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    moveAnimation.fromValue = [NSValue valueWithCGPoint:groupLayer.position];
    moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(320 - 80, groupLayer.position.y)];
    moveAnimation.autoreverses = YES;
    moveAnimation.repeatCount = MAXFLOAT;
    moveAnimation.duration = 2;
KeyPath Description ValueType
transform.translation.x 沿着x轴平移 NSNumber
transform.translation.y 沿着y轴平移 NSNumber
transform.translation.z 沿着z轴平移 NSNumber
transform.translation 沿着x/y轴平移 NSSize/CGSize

2.3旋转

1
2
3
4
5
6
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];
    rotateAnimation.toValue = [NSNumber numberWithFloat:6.0 * M_PI];
    rotateAnimation.autoreverses = YES;
    rotateAnimation.repeatCount = MAXFLOAT;
    rotateAnimation.duration = 2;
KeyPath Description ValueType
transform.rotation.x 以x轴为轴心旋转 NSNumber
transform.rotation.y 以Y轴为轴心旋转 NSNumber
transform.rotation.z 以z轴为轴心旋转 NSNumber
transform.rotation 跟rotation.z一样以z为轴心旋转 NSNumber

2.4其他的KeyPath动画

KeyPath Description ValueType
position 中心变化,可以用来做移动动画 CGPoint
position.x 中心X变化 CGFloat
position.y 中心Y变化 CGFloat
opacity 透明度变化 NSNumber
contents 内容变化,如imageView.iamge Image.CGImage
cornerRadius 圆角变化 NSNum
bounds 大小变化，中心不变 CGRect
borderWidth 边框宽 NSNumber

2.5 组动画

1
2
3
4
5
CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];
    groupAnnimation.duration = 2;
    groupAnnimation.autoreverses = YES;
    groupAnnimation.animations = @[moveAnimation, scaleAnimation, rotateAnimation];
    groupAnnimation.repeatCount = MAXFLOAT;

3.CABasicAnimation中的关键属性

3.1keyPath

决定动画的类型,不能随便取,只能按文档上面的取值. 如改变中心位置要用position,改变透明度要用opacity,如上面的几张表所示.

3.2 fromValue/toValue

动画的起始状态跟结束状态的值,根据文档中相应的ValueType提供值.

3.3 autoreverse

是否反向动画,即正方向播放完动画,设置是否反方向播放.

3.4 fileMode

fillMode的作用就是决定当前对象过了非active时间段的行为. 非active时间段是指动画开始之前以及动画结束之后。

如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用.

*kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态

*kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态

*kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态。因为有可能出现fromValue不是目前layer的初始状态的情况，如果fromValue就是layer当前的状态，则这个参数就没太大意义。

*kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.

##