CAAnimation 基本使用总结

animation.gif

github地址:https://github.com/wangyansnow/WYAnimationDemo

一序言##

众所周知在iOS上做动画很容易,因为系统提供了很强大的api,今天就是给系统的Core Animation做一个总结.

继承结构图

inherit.png

CAPropertyAnimation: 属性动画,是一个基类,一般使用它的两个子类:CABasicAnimation和CAKeyframeAnimation.主要作用于CALayer的属性,使其产生动画效果.

CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position"]

常用的keyPath: position, transform.rotation, transform.scale
transform.translation.y

二效果和Code##

1.位移动画

位移position.gif

CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
positionAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 400)];
[self.animationView.layer addAnimation:positionAnimation forKey:@"position"];

3.旋转动画

旋转rotation.gif

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
scaleAnimation.byValue = @1;
[self.animationView.layer addAnimation:scaleAnimation forKey:@"scale"];

4.关键帧动画

关键帧动画position.gif

CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyframeAnimation.values = @[NSVALUEPOINT(100, 200), NSVALUEPOINT(150, 200), NSVALUEPOINT(150, 300), NSVALUEPOINT(100, 300)];
keyframeAnimation.duration = 2.0;
[self.animationView.layer addAnimation:keyframeAnimation forKey:@"keyframe"];

5.路径动画

路径动画position.gif

CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200) radius:80.0 startAngle:0 endAngle:M_PI * 2 clockwise:YES].CGPath;
pathAnimation.duration = 2.0;
[self.animationView.layer addAnimation:pathAnimation forKey:@"path"];

6.左右抖动

抖动动画rotation.gif

CAKeyframeAnimation *leftRightAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
leftRightAnimation.values = @[@(-0.2), @0.2, @-0.2];
leftRightAnimation.repeatCount = CGFLOAT_MAX;
leftRightAnimation.duration = 0.5;
[self.animationView.layer addAnimation:leftRightAnimation forKey:@"leftRight"];

7.动画组

动画组.gif

CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
// 1.平移动画
CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
positionAnimation.toValue = NSVALUEPOINT(200, 400);

// 2.缩放动画
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.byValue = @1;

// 3.左右抖动动画
CAKeyframeAnimation *leftRightAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
leftRightAnimation.values = @[@-0.2, @0.2, @-0.2];
leftRightAnimation.repeatCount = CGFLOAT_MAX;
leftRightAnimation.duration = 0.25;

groupAnimation.animations = @[positionAnimation, scaleAnimation, leftRightAnimation];
groupAnimation.duration = 2.0;

[self.animationView.layer addAnimation:groupAnimation forKey:@"group"];

8.转场动画

转场动画.gif

CATransition *transition = [CATransition animation];

/**
 1.苹果定义的常量
 kCATransitionFade 交叉淡化过渡
 kCATransitionMoveIn 新视图移到旧视图上面
 kCATransitionPush 新视图把旧视图推出去
 kCATransitionReveal 将旧视图移开,显示下面的新视图
 2.用字符串表示
 pageCurl 向上翻一页
 pageUnCurl 向下翻一页
 rippleEffect 滴水效果
 suckEffect 收缩效果，如一块布被抽走
 cube 立方体效果
 oglFlip 上下翻转效果
 */
transition.type = @"pageCurl";
//    transition.type = kCATransitionMoveIn;
transition.subtype = kCATransitionFromLeft;
transition.duration = 1.0;

self.animationView.backgroundColor = [UIColor darkGrayColor];
[self.animationView.layer addAnimation:transition forKey:@"transition"];

三补充##

在给layer添加动画addAnimation:forKey:记得带上key,这样在移除动画的时候可以移除指定key的动画.

// 移除所有动画
[self.animationView.layer removeAllAnimations];
// 移除key为position的动画
[self.animationView.layer removeAnimationForKey:@"position"];

使用核心动画是不会更改视图的frame的也就是,当动画结束后视图会回到初始位置.如果不想让视图回到初始位置可以使用

positionAnimation.removedOnCompletion = NO;
positionAnimation.fillMode = kCAFillModeForwards;

这里如果设置了removedOnCompletion为NO,则设置repeatCout将不会生效.