iOS开发UI篇:核心动画

一 : 核心动画介绍

Core Animation 翻译为核心动画,是一组非常强大的动画处理API,使用它能做出非常炫酷的动画效果,而且开发中往往事半功倍，使用少量的代码就可以实现非常强大的功能。

Core Animation 它是跨平台的，可以在MAC OSX和IOS中使用

Core Animation 的动画执行过程都是在后台操作的，不会阻塞主线程。不阻塞主线程，可以理解为在执行动画的时候还能点击（按钮）。

注意的是,Core Animation是直接作用在CALayer上,并非UIView

二 :Core Animation 的使用步骤

使用它需要先添加QuartzCore.framework框架和引入主头文件<QuartzCore/QuartzCore.h>(iOS7或IOS7以上不需要

初始化一个CAAnimation对象，并设置一些动画相关属性

通过调用CALayer的addAnimation:forKey:方法增加CAAnimation对象到CALayer中，这样就能开始执行动画了

通过调用CALayer的removeAnimationForKey:方法可以停止CALayer中的动画

三 :Core Animation 类的继承结构图

CAAnimation是所有动画类的父类，但是它不能直接使用，应该使用它的子类。

常见属性有：

duration：动画的持续时间

repeatCount：动画的重复次数

timingFunction：控制动画运行的节奏

说明：（1）能用的动画类只有4个子类：CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup

　　   （2）CAMediaTiming是一个协议(protocol)。

CAPropertyAnimation是CAAnimation的子类，但是不能直接使用，要想创建动画对象，应该使用它的两个子类：CABasicAnimation和CAKeyframeAnimation

它有个NSString类型的keyPath属性，你可以指定CALayer的某个属性名为keyPath，并且对CALayer的这个属性的值进行修改，达到相应的动画效果。比如，指定@"position"为keyPath，就会修改CALayer的position属性的值，以达到平移的动画效果

四 :补充说明

所有动画对象的父类，负责控制动画的持续时间和速度，是个抽象类，不能直接使用，应该使用它具体的子类

属性解析：(红色代表来自CAMediaTiming协议的属性)

duration：动画的持续时间

repeatCount：动画的重复次数

repeatDuration：动画的重复时间

removedOnCompletion：默认为YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态，那就设置为NO，不过还要设置fillMode为kCAFillModeForwards

fillMode：决定当前对象在非active时间段的行为.比如动画开始之前,动画结束之后

beginTime：可以用来设置动画延迟执行时间，若想延迟2s，就设置为CACurrentMediaTime()+2，CACurrentMediaTime()为图层的当前时间

timingFunction：速度控制函数，控制动画运行的节奏

delegate：动画代理

CATransaction 属性说明

 transform.rotation.x 围绕x轴翻转 参数：角度 angle2Radian(4)

 

 transform.rotation.y 围绕y轴翻转 参数：同上

 

 transform.rotation.z 围绕z轴翻转 参数：同上

 

 transform.rotation 默认围绕z轴

 

 transform.scale.x x方向缩放 参数：缩放比例 1.5

 

 transform.scale.y y方向缩放 参数：同上

 

 transform.scale.z z方向缩放 参数：同上

 

 transform.scale 所有方向缩放 参数：同上

 

 transform.translation.x x方向移动 参数：x轴上的坐标 100

 

 transform.translation.y x方向移动 参数：y轴上的坐标

 

 transform.translation.z x方向移动 参数：z轴上的坐标

 

 transform.translation 移动 参数：移动到的点 （100，100）

 

 opacity 透明度 参数：透明度 0.5

 

 backgroundColor 背景颜色 参数：颜色 (id)[[UIColor redColor] CGColor]

 

 cornerRadius 圆角 参数：圆角半径 5

 

 borderWidth 边框宽度 参数：边框宽度 5

 

 bounds 大小 参数：CGRect

 

 contents 内容 参数：CGImage

 

 contentsRect 可视内容 参数：CGRect 值是0～1之间的小数

 

 hidden 是否隐藏

 

 position

 

 shadowColor

 

 shadowOffset

 

 shadowOpacity

 

 shadowRadius

CAAnimation可分为四种：

1.CABasicAnimation

     

通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation

2.CAKeyframeAnimation

     

Keyframe顾名思义就是关键点的frame，你可以通过设定CALayer的始点、中间关键点、终点的frame，时间，动画会沿你设定的轨迹进行移动

3.CAAnimationGroup

     

Group也就是组合的意思，就是把对这个Layer的所有动画都组合起来。PS：一个layer设定了很多动画，他们都会同时执行，如何按顺序执行我到时候再讲。

     

4.CATransition

     

这个就是苹果帮开发者封装好的一些动画

五 :示例 

CATransition

#import "CAAnimationControll.h"

@interface CAAnimationControll ()
/**
 *  图片
 */
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
/**
 *  图片下标
 */
@property (nonatomic,assign)NSInteger index;
@end
@implementation CAAnimationControll
- (IBAction)nextBtn:(id)sender {
    ++self.index;
    if (self.index >= 17)
        self.index=0;
    NSString* path = [NSString stringWithFormat:@"%d_epinv.com",self.index];
    self.imageView.image = [UIImage imageNamed:path];
    // 转场动画
    CATransition* trans = [[CATransition alloc] init];
    // 转场类型
    trans.type  = @"pageUnCurl";
    // 过渡方向
    trans.subtype = kCATransitionFromRight;
    // 动画时间
    trans.duration = 1;
    // 开始位置百分比
    //trans.startProgress = 0.5;
    // 结束位置百分比
    //trans.endProgress = 0.5;
    // 加入动画
    [self.imageView.layer addAnimation:trans forKey:nil];

}
- (IBAction)lastBtn:(id)sender {
    --self.index;
    if (self.index <=-1)
        self.index = 17;
    NSString* path = [NSString stringWithFormat:@"%d_epinv.com",self.index];
    self.imageView.image = [UIImage imageNamed:path];
    // 转场动画
    CATransition* trans = [[CATransition alloc] init];
    // 转场类型
    trans.type  = @"rippleEffect";
    // 过度方向
    trans.subtype = kCATransitionFromLeft;
    // 动画时间
    trans.duration = 1;
    // 加入动画
    [self.imageView.layer addAnimation:trans forKey:nil];
    
}

 CATransition的type属性

 1: #define定义的常量

 kCATransitionFade   交叉淡化过渡

 kCATransitionMoveIn 新视图移到旧视图上面

 kCATransitionPush   新视图把旧视图推出去

 kCATransitionReveal 将旧视图移开,显示下面的新视图

 

 2: 用字符串表示

 pageCurl            向上翻一页

 pageUnCurl          向下翻一页

 rippleEffect        滴水效果

 suckEffect          收缩效果，如一块布被抽走

 cube                立方体效果

 oglFlip             上下翻转效果

效果

六 :示例 

CABasicAnimation

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 动画对象
    //CABasicAnimation* basicAnim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    CABasicAnimation* basicAnim = [[CABasicAnimation alloc] init];
    // 更改的键值对象(缩放)
    basicAnim.keyPath = @"transform.scale";
    // 更改范围
    basicAnim.fromValue = @(0.1);
    basicAnim.toValue = @(1);
    // 恢复初始值。
    basicAnim.removedOnCompletion = YES;
     basicAnim.fillMode = kCAFillModeForwards;
    // 时间
    basicAnim.duration = 2;
    // 重复次数
    basicAnim.repeatCount = MAXFLOAT;
    // 加入动画
    [self.imageView.layer addAnimation:basicAnim forKey:nil];
}

效果

下面是属性的解释

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 一起使用。 

七 :示例 

CAKeyframeAnimation

<p class="p1"><span class="s1">#define ANGLERADIAN(angle) ((angle)/</span><span class="s2">180.0</span><span class="s1">*M_PI)</span></p>

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    CAKeyframeAnimation* keyAnim = [[CAKeyframeAnimation alloc] init];
    // 更改属性对象
    keyAnim.keyPath = @"position";
    // 创建可变路径
    CGMutablePathRef path = CGPathCreateMutable();
    // 添加一个圆形
    CGPathAddEllipseInRect(path, nil, CGRectMake(80, 430, 100, 100));
    // 添加一个矩形
    CGPathAddRect(path, nil, CGRectMake(80, 430, 100, 100));
    // 如果你设置了path，那么values将被忽略
    // 加入路径
    keyAnim.path = path;
    keyAnim.duration = 2.0;
    // 执行完毕还原初始值
    keyAnim.removedOnCompletion = NO;
    // 行为类型
    keyAnim.fillMode = kCAFillModeForwards;
    // 重复次数
    keyAnim.repeatCount = MAXFLOAT;
    // 执行动画
    [self.iconView.layer addAnimation:keyAnim forKey:nil];
    // 释放
    CGPathRelease(path);

    // 图标抖动动画
    CAKeyframeAnimation* keyAnim1 = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
    // 行为类型
    keyAnim1.fillMode  =kCAFillModeForwards;
    // 抖动角度
    keyAnim1.values = @[@(ANGLERADIAN(20)),@(ANGLERADIAN(-20)),@(ANGLERADIAN(20)),@(ANGLERADIAN(-20))];
    // 动画时间
    keyAnim1.duration = 0.2;
    // 重复次数
    keyAnim1.repeatCount = MAXFLOAT;
    // 执行动画
    [self.qqIconView.layer addAnimation:keyAnim1 forKey:nil];
    
  }

八 :示例 

CAAnimationGroup

<strong>- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 旋转动画
    CABasicAnimation* roataion = [CABasicAnimation animation];
    roataion.keyPath = @"transform.rotation";
    roataion.toValue = @(M_PI);
    // 缩放动画
    CABasicAnimation* scale = [CABasicAnimation animation];
    scale.keyPath = @"transform.scale";
    scale.toValue = @(0.0);
    // 平移动画
    CABasicAnimation* move = [CABasicAnimation animation];
    move.keyPath = @"transform.translation";
    move.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    
    // 组动画
    CAAnimationGroup* animGroup = [[CAAnimationGroup alloc] init];
    // 添加到动画组
    animGroup.animations = @[roataion,scale,move];
    // 属性
    animGroup.duration = 2;
    animGroup.removedOnCompletion = NO;
    animGroup.fillMode = kCAFillModeForwards;
    animGroup.repeatCount = MAXFLOAT;
    [self.imageView.layer addAnimation:animGroup forKey:nil];
}</strong>

<strong><img src="https://img-blog.csdn.net/20160124182331968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
</strong>

<strong>
</strong>

<strong><span style="font-size:18px;">组合效果</span></strong>