iOS Animation讲解

核心动画类讲解：

1、CAAnimation：核心动画的基础类，不能直接使用，负责动画运行时间，速度控制，本身实现了CAMediaTiming协议

2、CAPropertyAnimation：不能直接使用 继承于CAAnimation，属性动画的基类（通过属性进行动画设置，是可动画属性）

3、CAAnimationGroup：动画组，动画组是一种组合设计模式，可以通过动画组来进行所有动画行为的统一控制，组中所有动画效果可以并发执行，

4、CATransition：继承与CAAnimation，转场动画，主要通过滤镜进行动画效果设置

5、CABasicAnnimation： 继承于CAPropertyAnnimation，基础动画，通过属性修改进行动画参数控制，只有初始状态和结束状态。

6、CAKeyFrameAnimation：继承于CAPropertyAnnimation，关键帧动画，同样是通过属性进行动画参数控制名单时统计处动画不同的它可以有多个状态控制

7、CASpringAnimation:弹簧动画 继承于CABasicAnnimation iOS9 才出来的

属性类详解：

@property(nullable,
strong)
CAMediaTimingFunction *timingFunction; //时间函数定义动画的节奏。默认为*nil表示线性踱来踱去

主要有以下几种函数动画

/*CA_EXTERN
NSString *
const kCAMediaTimingFunctionLinear

*    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
*CA_EXTERN
NSString * const kCAMediaTimingFunctionEaseIn
*    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
*CA_EXTERN
NSString * const kCAMediaTimingFunctionEaseOut
*    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
*CA_EXTERN
NSString * const kCAMediaTimingFunctionEaseInEaseOut
*    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
*CA_EXTERN
NSString * const kCAMediaTimingFunctionDefault
*    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_3_0);*/
@property
CFTimeInterval duration;//动画的持续时间

@property(nullable,
strong) id delegate;//动画协议的代理

@property(getter=isRemovedOnCompletion)
BOOL removedOnCompletion;// 完成动画从layer是否移除
*** 以上都是CAAnimation 的属性

**** 以下基本都是CABasicAnnition的属性

@property CFTimeInterval beginTime;//开始时间 主要用来做延迟操作的 CACurrentMediaTime()
标示当前时间秒数

@property float speed; //速度 通常为1

@property CFTimeInterval timeOffset;//时间偏移量的动画 eg:动画时间为3秒 设置timeOffset 为1秒时layer动画的画面 有点难理解相当于scrolView的contentOffset 

@property float repeatCount;//重复次数

@property CFTimeInterval repeatDuration;//重复时间

@property BOOL autoreverses;//自动返回

@property(copy)NSString *fillMode;//决定当前对象在非active时间段的行为.比如动画开始之前,动画结束之后
有以下几种模式
/*
*CA_EXTERNNSString
*const kCAFillModeForwards

*   __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
*CA_EXTERNNSString *
const kCAFillModeBackwards
*    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
*CA_EXTERNNSString *
const kCAFillModeBoth
*    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
*CA_EXTERNNSString *
const kCAFillModeRemoved
*    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);*/

一、CAAnimationGroup

CAAninmationGroup就是把所有动画放到动画数组中去完成,这个很简单 直接上代码

- (void)viewDidLoad {
[super viewDidLoad];

UIImageView *imv = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 72, 72)];
imv.image = [UIImage imageNamed:@"解锁.png"];
self.imv = imv;
[self.view addSubview:self.imv];

//二次贝塞尔曲线路径
UIBezierPath *movePath = [UIBezierPath bezierPath];
[movePath moveToPoint:CGPointMake(330.0, 400.0)];
[movePath addQuadCurveToPoint:CGPointMake(100, 300) controlPoint:CGPointMake(300, 100)];

//以下必须导入QuartzCore包
CAKeyframeAnimation * posAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
posAnim.path = movePath.CGPath;
posAnim.removedOnCompletion = YES;

//缩放动画
CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
scaleAnim.removedOnCompletion = YES;

//透明动画
CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];
opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
opacityAnim.removedOnCompletion = YES;

//动画组
CAAnimationGroup *animGroup = [CAAnimationGroup animation];
animGroup.animations = [NSArray arrayWithObjects:posAnim, scaleAnim, opacityAnim, nil];
animGroup.duration = 1;

[self.imv.layer addAnimation:animGroup forKey:nil];

}

二、CATransition(转场动画)

系统API已经定义了很多动画效果的实现，基本能满足日常的APP开发，如果要用到炫酷屌炸天的动画效果的时候可以使用CATransition

它有几本四种效果

1、KCATransitionPush 推入效果

2、KCATransitionMoveIn 移入效果

3、KCATransitionReveal 截开效果

4、KCATransitionFade 渐入渐出效果

这些IPA效果可以安全使用：suckEffect（三角）、rippleEffect(水波抖动)、pageCurl（上翻页）、oglFlip(下翻页)、cameraIrisHollowOpen (镜头打开)、cameraIrisHollowClose（镜头关闭）以下慎用

spewEffect 新版面在屏幕下方中间位置被释放出来覆盖旧版面.
genieEffect 旧版面在屏幕左下方或右下方被吸走, 显示出下面的新版面
unGenieEffect 新版面在屏幕左下方或右下方被释放出来覆盖旧版面.
twist 版面以水平方向像龙卷风式转出来.
tubey 版面垂直附有弹性的转出来.
charminUltra 旧版面淡出并显示新版面.
zoomyIn 新版面由小放大走到前面, 旧版面放大由前面消失.
zoomyOut 新版面屏幕外面缩放出现, 旧版面缩小消失.
oglApplicationSuspend 像按”home” 按钮的效果.

看代码:

CATransition *animation = [CATransition animation];
[animation setDuration:1.0];
[animation setFillMode:kCAFillModeForwards];

[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[animation setType:@"rippleEffect"];// rippleEffect
[animation setSubtype:kCATransitionFromTop];
[self.imv.layer addAnimation:animation forKey:nil];

三、CABasicAnnimation

CABasicAnimation 有2个重要属性:

1、fromValue:开始的值

 2、toValue:目的地的值

看列子

UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
// animation.beginTime = CACurrentMediaTime() + 2;
animation.duration = 2;
animation.autoreverses = YES;
animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 400)];
animation.timeOffset = 2;
[redView.layer addAnimation:animation forKey:@"position"];

Autoreverses 

当你设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到 开始的值。 

Duration

Duration 这个参数你已经相当熟悉了。它设定开始值到结束值花费的时间。期间会被速度的属性所影响。 RemovedOnCompletion
这个属性默认为 YES,那意味着,在指定的时间段完成后,动画就自动的从层上移除了。这个一般不用。

假如你想要再次用这个动画时,你需要设定这个属性为 NO。这样的话,下次你在通过set方法设定动画的属
性时,它将再次使用你的动画,而非默认的动画。

Speed

默认的值为 1.0.这意味着动画播放按照默认的速度。如果你改变这个值为 2.0,动画会用 2 倍的速度播放。
这样的影响就是使持续时间减半。如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟---一半的
持续时间。

BeginTime

这个属性在组动画中很有用。它根据父动画组的持续时间,指定了开始播放动画的时间。默认的是 0.0.组 动画在下个段落中讨论“Animation
Grouping”。

TimeOffset

如果一个时间偏移量是被设定,动画不会真正的可见,直到根据父动画组中的执行时间得到的时间都流逝 了。

RepeatCount

默认的是 0,意味着动画只会播放一次。如果指定一个无限大的重复次数,使用 1e100f。这个不应该和 repeatDration 属性一块使用。

RepeatDuration

这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间流逝完。它不应该和 repeatCount 一起使用。 

我们可以通过animationWithKeyPath键值对的方式来改变动画

animationWithKeyPath的值：

　 transform.scale = 比例轉換

    transform.scale.x = 闊的比例轉換

    transform.scale.y = 高的比例轉換

    transform.rotation.z = 平面圖的旋轉

    opacity = 透明度

    margin 边缘

    zPosition z轴的位置

    backgroundColor    背景颜色

    cornerRadius    圆角

    borderWidth //边框

    bounds  //大小

    contents  内容

  contentsRect  //内容rect

    cornerRadius  //圆角

    frame  //坐标

    hidden  //是否隐藏

    mask 

    masksToBounds 

    opacity //透明度

    position  //位置

    shadowColor  //阴影颜色

    shadowOffset //阴影偏移量

    shadowOpacity //阴影透明度

    shadowRadius //阴影圆角

四、CAKeyFrameAnnimation

@property(nullable,
copy) NSArray *values;//这个是Rect的数组值

@property(nullable)
CGPathRef path;//这个与values互斥

@property(nullable,
copy) NSArray<NSNumber *> *keyTimes;//动画的方式

@property(nullable,
copy)
NSArray<CAMediaTimingFunction *> *timingFunctions;//动画的时间函数方式

@property(copy)
NSString *calculationMode;//模式
看代码:CAKeyframeAnimation *keyframeAnnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyframeAnnimation.values = @[[NSValue valueWithCGPoint:redView.frame.origin],
[NSValue valueWithCGPoint:CGPointMake(100, 200)],
[NSValue valueWithCGPoint:CGPointMake(200, 200)],
[NSValue valueWithCGPoint:CGPointMake(200, 100)],
[NSValue valueWithCGPoint:CGPointMake(100, 100)]];

keyframeAnnimation.keyTimes = @[[NSNumber numberWithFloat:0],
[NSNumber numberWithFloat:0.3],
[NSNumber numberWithFloat:0.6],
[NSNumber numberWithFloat:0.8],
[NSNumber numberWithFloat:1.0]];
keyframeAnnimation.timingFunctions = @[
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut],
// [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault]
];

keyframeAnnimation.duration = 4;
keyframeAnnimation.repeatCount = 1000;
keyframeAnnimation.calculationMode = kCAAnimationCubicPaced;
[redView.layer addAnimation:keyframeAnnimation forKey:@"position"];



五、CASpringAnimation

CA SpringAnimation是iOS9才出来的弹性动画 他有几个重要属性

mass:质量，影响图层运动时的弹簧惯性，质量越大，弹簧拉伸和压缩的幅度越大

stiffness:刚度系数(劲度系数/弹性系数)，刚度系数越大，形变产生的力就越大，运动越快

damping:阻尼系数，阻止弹簧伸缩的系数，阻尼系数越大，停止越快

initialVelocity:初始速率，动画视图的初始速度大小 速率为正数时，速度方向与运动方向一致，速率为负数时，速度方向与运动方向相反

settlingDuration:结算时间 返回弹簧动画到停止时的估算时间，根据当前的动画参数估算 通常弹簧动画的时间使用结算时间比较准确

代码如下:

CASpringAnimation *ann = [CASpringAnimation animationWithKeyPath:@"position.x"];
ann.stiffness = 100;
ann.mass = 10;
ann.damping = 10;
ann.initialVelocity = -5;
ann.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
ann.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 100)];
ann.repeatCount = 10000;
[redView.layer addAnimation:ann forKey:nil];