UI课程23 动画

1.知识点图

属性动画

//开始动画
    [UIView beginAnimations:nil context:nil];

    //设置动画时间
    [UIView setAnimationDuration:5];
    //延时执行
    [UIView setAnimationDelay:2];
    //设置动画重复次数
    [UIView setAnimationRepeatCount:2];
    //设置动画反转(动画再变回来)
    [UIView setAnimationRepeatAutoreverses:YES];
    //设置动画路径(速率分布)
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    //设置代理
    [UIView setAnimationDelegate:self];
    //动画开始后执行的方法
    [UIView setAnimationWillStartSelector:@selector(begin)];
    //动画 开始后执行的方法
    [UIView setAnimationDidStopSelector:@selector(end)];//后面重写系统的begin，end方法

    //上升
    self.customView.center = CGPointMake(kScreenWidth/2, 50);
    //变大
    self.customView.bounds = CGRectMake(0, 0, 200, 200);
    //变色
    self.customView.backgroundColor = [UIColor yellowColor];

    //提交动画
    [UIView commitAnimations];



//自带延迟效果
    [UIView animateWithDuration:3 delay:0 options:UIViewAnimationOptionAutoreverse animations:^{

        //旋转pi/4角度
        _customView.transform = CGAffineTransformMakeRotation(M_PI_4);

    } completion:^(BOOL finished) {
        NSLog(@"动画执行完了");
    }];

    //usingSpringWithDamping(0-1):震动频率，initialSpringVelocity（0-1）厨师速度
    [UIView animateWithDuration:3 delay:1 usingSpringWithDamping:0.2 initialSpringVelocity:1 options:UIViewAnimationOptionAutoreverse animations:^{

        _customView.transform = CGAffineTransformMakeRotation(M_E);


    } completion:^(BOOL finished) {
        _customView.layer.masksToBounds = YES;
        _customView.layer.cornerRadius = self.customView.bounds.size.width/2;

    }];

transition：

//从一个视图到另一个视图
    [UIView transitionFromView:self.aView toView:self.bView duration:2 options:UIViewAnimationOptionTransitionCurlUp completion:^(BOOL finished) {

        //完成动画后的操作（给页面加载数据）

    }];

    //可以进行重复动画
    [UIView transitionWithView:self.aView duration:3 options:UIViewAnimationOptionTransitionCurlDown animations:^{

        self.aView.backgroundColor = [UIColor colorWithRed:0.400 green:0.400 blue:1.000 alpha:1.000];

    } completion:^(BOOL finished) {

    }];

2.CGAffineTransform2D仿射变换

//平移
    //(基于初始状态的平移)
    //self.tempView.transform = CGAffineTransformMake(1, 0, 0, 1, 50, 50);
    //self.tempView.transform = CGAffineTransformMakeTranslation(100, 0);//封装好的

    //基于视图已有状态平移（可多次平移）
    self.tempView.transform = CGAffineTransformTranslate(self.tempView.transform, 10, 10);


    //缩放
    //基于初始状态的缩放
    //self.tempView.transform = CGAffineTransformMake(0.5, 0, 0, 2, 0, 0);
    //self.tempView.transform = CGAffineTransformMakeScale(1, 3);//封装后的

    //基于视图已有状态缩放（可以多次缩放）
    self.tempView.transform = CGAffineTransformScale(self.tempView.transform, 0.2, 0.2);


    //旋转
    //基于初始状态的旋转
    //self.tempView.transform = CGAffineTransformMake(cos(M_PI_4), sin(M_PI_4), -sin(M_PI_4), cos(M_PI_4), 0, 0);
    //self.tempView.transform = CGAffineTransformMakeRotation(M_PI_4);//封装后的

    //基于视图已有状态的旋转（多次）
    self.tempView.transform = CGAffineTransformRotate(self.tempView.transform, M_PI_4/10);

使用定时器设置动画

//一直旋转
[NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(makeRotation) userInfo:nil repeats:YES];


- (void)makeRotation{
    _imgView.transform = CGAffineTransformRotate(_imgView.transform, M_PI_4/10);
}

3.CAAnimation，CALayer
CALayer负责绘制，提供UIView需要展示的内容。不能交互，是UIView的一个readonly属性
UIview负责交互，显示CALayer绘制的内容

CALayer的常用属性
属性 作⽤
CornerRadius 圆⾓角
ShadowColor 阴影颜⾊色
ShadowOffset 阴影偏移距离
ShadowRadius 阴影模糊程度
ShadowOpacity 阴影透明度
BorderWidth 描边粗细
BorderColor 描边颜⾊色
anchorPoint 锚点
position 位置信息
transfrom 使CALayer产⽣生3D空间内的平移、 缩放、旋转等变化

3.CAAnimation动画
CAAnimation是抽象类，通常使用它的子类实现动画效果，CAAnimation及其子类的对象都添加在view的layer上，也可以移除动画

锚点默认是图形的中点（0.5，0.5），图形的宽高被认为是1，可以手动修改锚点的坐标（eg：（0，0））

    //_simpleView.layer.anchorPoint = CGPointMake(0, 0);
   NSLog(@"%@",NSStringFromCGPoint(_simpleView.layer.anchorPoint));//锚点，旋转的时候是绕着锚点旋转的
    NSLog(@"%@",NSStringFromCGPoint(_simpleView.layer.position));//位置，平移是根据position平移的



     //标准动画
    //创建CABasicAnimation动画并设定变换的属性
    CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];//animationWithKeyPath的内容需要强打(是系统的)

    //设定变换的初始值
    ba.fromValue = @0;//将数字转换为对象类型的
    //设定变换的结束值
    ba.toValue = @50;
    //设定动画间隔
    ba.duration = 4;
    //添加到动画视图的layer层
    //[self.simpleView.layer addAnimation:ba forKey:@"1"];


    //因为CA动画结束后会回到初始位置，可以使用延时器将视图固定在目标状态
    [self performSelector:@selector(makeNewView) withObject:nil afterDelay:4];




    //关键帧动画
    CAKeyframeAnimation *keya = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    //准备路径
    CGPoint p1 = CGPointMake(100, 100);
    CGPoint p2 = CGPointMake(200, 100);
    CGPoint p3 = CGPointMake(300, 400);
    CGPoint p4 = CGPointMake(150, 300);
    CGPoint p5 = CGPointMake(100, 100);
    //将机构提类型转换成对象类型，用于存放数组中作为关键帧
    NSValue *v1 = [NSValue valueWithCGPoint:p1];
    NSValue *v2 = [NSValue valueWithCGPoint:p2];
    NSValue *v3 = [NSValue valueWithCGPoint:p3];
    NSValue *v4 = [NSValue valueWithCGPoint:p4];
    NSValue *v5 = [NSValue valueWithCGPoint:p5];

    keya.values = @[v1,v2,v3,v4,v5];
    //设置动画间隔
    keya.duration = 4;
    //添加动画
    //[self.simpleView.layer addAnimation:keya forKey:@"keya"];


    CAAnimationGroup *group = [CAAnimationGroup animation];
    //设置同时执行的动画的效果
    group.animations = @[keya,ba];
    group.duration = 4;
    //[self.simpleView.layer addAnimation:group forKey:@"group"];



    //
    CATransition *transition = [CATransition animation];
    //设置动画类型
    //transition.type = @"cameraIrisHollowClose";
    //间隔
    transition.duration = 3;
    //设置动画路径
    transition.subtype = kCATransitionFromBottom;

    [self.simpleView.layer addAnimation:transition forKey:@"transition"];

- (void)makeNewView{
    _simpleView.transform = CGAffineTransformMakeRotation(M_PI_4);

    //移除动画（结束后需要移除）
    [self.simpleView.layer removeAnimationForKey:@"1"];
}

动画类型：

enum AnimationType:Int {
case Fade = 1, //淡入淡出
Push, //推挤
Reveal, //揭开
MoveIn, //覆盖
Cube, //立方体
SuckEffect, //吮吸
OglFlip, //翻转
RippleEffect, //波纹
PageCurl, //翻页
PageUnCurl, //反翻页
CameraIrisHollowOpen, //开镜头
CameraIrisHollowClose, //关镜头
CurlDown, //下翻页
CurlUp, //上翻页
FlipFromLeft, //左翻转
FlipFromRight //右翻转