IOS 动画设计(5)——用缓动函数实现物理动画效果

1. 缓动函数简介
(1) 缓动函数的动画效果是建立在 CALayer 层级的关键帧动画基础之上的；
(2) 缓动函数是一系列模拟物理效果（如抛物线）方程式的统称，用以计算给定两点之间的插值(即两点间插入的关键帧)；
(3) 两点之间插的值越多，效果越好，但是会耗费更多的性能;
(4) 了解了缓动函数的原理对设计出自己想要的动画效果有很大帮助。

常用的缓动函数种类如下图所示，可根据需求自行选择：

关于 In、Out、InOut 的说明：

    ease ***in***：加速度缓动；
    ease ***out***：减速度缓动；
    ease ***InOut***：先加速度至50%，再减速度完成动画。

方法介绍：

Quad：二次方缓动
Cubic：三次方缓动
Quart：四次方缓动
Quint：五次方缓动
Sine：正弦曲线缓动
Expo：指数曲线缓动
Circ：圆形曲线的缓动
Elastic：指数衰减的正弦曲线缓动
Back：超过范围的三次方缓动
Bounce：指数衰减的反弹缓动

2. 缓动函数与关键帧动画的联系
(1) 关键帧动画需要提供很多的帧来完善动画效果；
(2) 关键帧动画的帧可以通过一定的数学计算来提供需要的帧数；
(3) 关键帧动画只需要提供起始点，结束点，就可以通过缓动函数来计算中间“缺失”的帧；
(4) 缓动函数可以指定计算出多少帧；
(5) 帧数越多，动画越流畅，但同时耗费更多的GPU性能。

3. 用缓动函数模拟物理动画

3.1 基本动画

基本动画部分比较简单, 但能实现的动画效果也很局限，使用方法大致为:
(1) 创建原始 UI 或者画面；
(2) 创建 CABasicAnimation 实例, 并设置； keypart/duration/fromValue/toValue ；
(3) 设置动画最终停留的位置；
(4) 将配置好的动画添加到 layer 层中；

举个例子，实现一个圆形从上往下移动，实例代码如下：

     //设置原始画面
    UIView *showView               = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    showView.layer.masksToBounds   = YES;
    showView.layer.cornerRadius    = 50.f;
    showView.layer.backgroundColor = [UIColor redColor].CGColor;
    [self.view addSubview:showView];

    //创建基本动画
    CABasicAnimation *basicAnimation = [CABasicAnimation animation];

    //设置属性
    basicAnimation.keyPath           = @"position";
    basicAnimation.duration          = 4.0f;
    basicAnimation.fromValue         = [NSValue valueWithCGPoint:showView.center];
    basicAnimation.toValue           = [NSValue valueWithCGPoint:CGPointMake(50, 300)];

    //设置动画结束位置
    showView.center = CGPointMake(50, 300);

    //添加动画到layer层
    [showView.layer addAnimation:basicAnimation forKey:nil];

3.2 关键帧动画

其实跟基本动画差不多, 只是能设置多个动画路径 使用方法也类似, 大致为：

1. 创建原始 UI 或者画面；
2. 创建 CAKeyframeAnimation 实例, 并设置keypart/duration/values 相比基本动画只能设置开始和结束点, 关键帧动画能添加多个动画路径点；
3. 设置动画最终停留的位置；
4. 将配置好的动画添加到layer层中。

举个例子，实现一个红色圆球左右晃动往下坠落，实例代码如下：

     //设置原始画面
    UIView *showView               = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    showView.layer.masksToBounds   = YES;
    showView.layer.cornerRadius    = 50.f;
    showView.layer.backgroundColor = [UIColor redColor].CGColor;

    [self.view addSubview:showView];

    //创建关键帧动画
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];

    //设置动画属性
    keyFrameAnimation.keyPath              = @"position";
    keyFrameAnimation.duration             = 4.0f;

    keyFrameAnimation.values = @[[NSValue valueWithCGPoint:showView.center],
                                 [NSValue valueWithCGPoint:CGPointMake(100, 100)],
                                 [NSValue valueWithCGPoint:CGPointMake(50, 150)],
                                 [NSValue valueWithCGPoint:CGPointMake(200, 200)]];

    //设置动画结束位置
    showView.center = CGPointMake(200, 200);

    //添加动画到layer层
    [showView.layer addAnimation:keyFrameAnimation forKey:nil];

3.3 用缓动函数配合关键帧动画实现比较复杂的物理性动画

（1）实现弹簧效果(时钟秒针振动的弹簧效果)

相应源码（包括缓动函数库）可在 摆动时钟源码下载 处下载。

（2）实现碰撞效果(指定图片往下的碰撞效果)

（3）实现衰减效果(屏幕向左滑动的背景衰减效果)