UI一揽子计划 23 (动画的使用场景、UIView动画、CGAffineTransform2D仿射变换、CALayer、CAAnimation、)

在iOS 中的动画是指一些视图上的过渡效果,合理利用动画能提高用户体验.

一. UIView动画

1). UIView动画块的使用 ([UIView beginAnimations: nil context : nil]; ……改变属性的内容写在中间…….[UIView commitAnimations];)

属性 frame  / center / alpha / bounds / transform / backgroundColor

 

- ( void )actionButton:( UIButton *)button

{
// UIView 的动画    ��特点: 全是类方法调用,开始与结束之间的部分是动画改变的部分
    /**
     *  1.大小
        2.位置
        3.颜色
        4.透明度
        ...
     */
// 动画开始 (类方法)
    /**
     *  参数1: 名字(标识符)
        参数2: 携带的参数
     */
    [UIView beginAnimations:@"Start" context:nil];
   
// 设置动画
    // 1.设置时间 (设置时间在多少秒钟动画完结)
    [UIView setAnimationDuration:1];
    // 2.设置动画延迟 (延迟多少秒开始)
    [UIView setAnimationDelay:0];
    // 4.设置反转
    [UIView setAnimationRepeatAutoreverses:YES];
   
    // 5.设置一个代理
    [UIView setAnimationDelegate:self];
    // 6.设置代理方法
    [UIView setAnimationWillStartSelector:@selector(willStart)];
    [UIView setAnimationDidStopSelector:@selector(didStop)];
   
    // 7.设置速度曲线
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    //8.循环几次
    [UIView setAnimationRepeatCount:1];
    // 3.添加一个改变位置的动画
    self.imageView.center = CGPointMake(300, 300);
   
    // 设置持续动画
    [UIView setAnimationBeginsFromCurrentState:YES];

    // 9.改变颜色
    self.imageView.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
    //10.改变透明度
    self.imageView.alpha = 0;
    // 11.改变大小

    CGRect frame = self.imageView.frame;

    frame.size = CGSizeMake(200, 200);
    self.imageView.frame = frame;
// 动画提交

    [UIView commitAnimations];

}

2).UIViewBlock动画的方法及CGAffineTransform2D仿射变换

/**
 *  如果设置了翻转属性, 那么在结束之后不用再另行添加动效果了,不然动画套动画 略乱了
 */

UIView 动画的 Block 方法

- (void)actionBlockButton1:(UIButton *)button
{
//    [UIView animateWithDuration:1 animations:^{
//      // 执行的动画
//        self.imageView.center = CGPointMake(400, 400);

//    }];  

    // 上面方法不能复原
    // 参数3: 该block 块儿 结束后干的事情
//    [UIView animateWithDuration:1 animations:^{
//        // 执行的动画

        self.imageView.center = CGPointMake(400, 400);

2D 仿射变化 transform 的形变属性

//        /**
//         *  参数1: 要形变的View
//            参数2, 3: 形变的属性
//         */
//        [UIView setAnimationRepeatAutoreverses:YES];
//        self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 0, 100);
//    } completion:^(BOOL finished) {
//        // 上面动画结束后触发
//        [UIView animateWithDuration:1 animations:^{
//                  // 执行的动画
//            self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 0, -100);
//                }];
//
//    }];
//   
//    // 缩放
//    [UIView animateWithDuration:1 animations:^{
//        self.imageView.transform = CGAffineTransformScale(self.imageView.transform, -2, -2);
//    } completion:^(BOOL finished) {
//        [UIView animateWithDuration:2 animations:^{
//                              // 执行的动画
//            self.imageView.transform = _transform;
//                            }];
//
//    }];
//   
   
    // 需求: 点击按钮一直转 再按就停
    // 旋转
   
 //  [self.timer fire];
    [UIView animateWithDuration:0.00001 animations:^{
        self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI_4 / 5);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.00001 animations:^{
            // 执行的动画
            [self rotate];

        }];
    }];
   
    _isRun = !_isRun;
}
- (void)rotate
{
    if (_isRun == YES) {
        [UIView animateWithDuration:0.00001 animations:^{
            self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI_4 / 5);
            // 给一个转的初值
            _isRun = YES;
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.00001 animations:^{
                // 执行的动画
                [self rotate];
            }];
        }];

    } else {

    }  

}

UIViewController 视图之间的动画切换

首先创建三个UIViewController.

将两个UIViewController写成属性,创建对象控制器,把控制器添加到rootVC 上,添加成子控制器,把子控制器显示出来.

- (void)addChildViews
{
    // 创建控制器
    self.thirdVC = [[ThirdViewController alloc]init];
    // 把该控制器添加到rootVC 上面 添加成子控制器
    [self addChildViewController:self.thirdVC];
    // 把thirdVC.view 显示出来
    [self.view addSubview:self.thirdVC.view];
   
    // 创建控制器
    self.secondVC = [[SecondViewController alloc]init];
    // 把该控制器添加到rootVC 上面 添加成子控制器
    [self addChildViewController:self.secondVC];
    // 把second.View 显示出来
    [self.view addSubview:self.secondVC.view];
}

 

添加按钮,在点击方法里实现视图的切换.

// 添加按钮
- (void)addBarButtonItem
{
    UIBarButtonItem *changeItem = [[UIBarButtonItem alloc]initWithTitle:@"Change" style:(UIBarButtonItemStylePlain) target:self action:@selector(actionChange:)];
    self.navigationItem.leftBarButtonItem = changeItem;
}

// 视图  实现切换
- (void)actionChange:(UIBarButtonItem *)changeItem
{
    _isChange = !_isChange;
    if (_isChange == YES) {
        [UIView transitionFromView:self.secondVC.view toView:self.thirdVC.view duration:0.5 options:(UIViewAnimationOptionTransitionFlipFromLeft) completion:^(BOOL finished) {
           
        }];
    } else {

        [UIView transitionFromView:self.thirdVC.view toView:self.secondVC.view duration:0.5 options:(UIViewAnimationOptionTransitionFlipFromRight) completion:^(BOOL finished) {

       }];

    }
   

}

二.CALayer

CALayer 和 UIView 之间的区别:

CALayer 负责绘制,提供UIView 需要展示的内容,不能交互.

是UIView 的一个只读的readonly的属性. 而UIView负责交互,显示CALayer绘制的内容.

属性:CornerRadius 圆角/ ShadowColor   阴影颜色

/  ShadowOffSet 阴影偏移距离/ ShadowRadius 阴影模糊程度/ ShadowOpacity  阴影透明度/ BorderColor 描边颜色/ BorderWidth 描边粗细/ anchorPoint 锚点/ position 位置信息/ transform  形变属性 

三. CAAnimation动画

CAAnimation 是一个抽象类, 通常使用它的子类实现动画效果,所有的 CAAnimation及其子类的对象都添加在View的layer 上.

CAAnimation {

CAAnimationGroup;

CAPropertyAnimation;—>{

                         CABasicAnimation;

                         CAKeyFrameAnimation;

                              }

CATransition;

}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];
    [self addSubViews];
   
    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(20, 80, 60, 150)];
    label.text = @"花\n好人\n月相\n圆思\n\n";
    label.numberOfLines = 0;
    label.font = [UIFont fontWithName:@"Courier-Bold" size:25];
    label.textColor = [UIColor whiteColor];
    [self.view addSubview:label];
    // Do any additional setup after loading the view.
}

- (void)addSubViews
{
    self.myView = [[UIView alloc]initWithFrame:CGRectMake(250, 100, 100, 100)];
    self.myView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:self.myView];
    [_myView release];
    /**
     *  layer 是负责显示图层的, 要更改看到的图形的形状, 需要修改 layer.
     */
    // 设置圆角  长 / 宽 除以2 就变成圆的了
    self.myView.layer.cornerRadius = 50;
    // CGColorRef 是专门图层绘制的颜色
    self.myView.layer.shadowColor = [UIColor yellowColor].CGColor;
    // 显示范围
    self.myView.layer.shadowOffset = CGSizeMake(0, 20);
    // 阴影的透明度
    self.myView.layer.shadowOpacity = 1;
    // 模糊程度
    self.myView.layer.shadowRadius = 50;
    // 边框的宽度
    self.myView.layer.borderWidth = 2;
    // 边框的颜色
    self.myView.layer.borderColor = [UIColor yellowColor].CGColor;
    // 边框的锚点
  //  self.myView.layer.anchorPoint = CGPointMake(0, 0);
    UIButton *button1 = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button1.frame = CGRectMake(20, 640, 40, 20);
    button1.backgroundColor = [UIColor blackColor];
    [button1 addTarget:self action:@selector(actionButton1:) forControlEvents:(UIControlEventTouchUpInside)];
    [button1 setTitle:@"旋转" forState:(UIControlStateNormal)];
    button1.titleLabel.textColor = [UIColor redColor];
    [self.view addSubview:button1];
    UIButton *button2 = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button2.frame = CGRectMake(70, 640, 40, 20);
    button2.backgroundColor = [UIColor blackColor];
    [button2 addTarget:self action:@selector(actionButton2:) forControlEvents:(UIControlEventTouchUpInside)];
    [button2 setTitle:@"变大" forState:(UIControlStateNormal)];
    button2.titleLabel.textColor = [UIColor redColor];
    [self.view addSubview:button2];
    UIButton *button3 = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button3.frame = CGRectMake(120, 640, 40, 20);
    button3.backgroundColor = [UIColor blackColor];
    [button3 addTarget:self action:@selector(actionButton3:) forControlEvents:(UIControlEventTouchUpInside)];
    [button3 setTitle:@"变色" forState:(UIControlStateNormal)];
    button3.titleLabel.textColor = [UIColor redColor];
    [self.view addSubview:button3];
    UIButton *button4 = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button4.frame = CGRectMake(170, 640, 40, 20);
    button4.backgroundColor = [UIColor blackColor];
    [button4 addTarget:self action:@selector(actionButton4:) forControlEvents:(UIControlEventTouchUpInside)];
    [button4 setTitle:@"移动" forState:(UIControlStateNormal)];
    button4.titleLabel.textColor = [UIColor redColor];
    [self.view addSubview:button4];
    UIButton *button5 = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button5.frame = CGRectMake(220, 640, 60, 20);
    button5.backgroundColor = [UIColor blackColor];
    [button5 addTarget:self action:@selector(actionButton5:) forControlEvents:(UIControlEventTouchUpInside)];
    [button5 setTitle:@"摇一摇" forState:(UIControlStateNormal)];
    button5.titleLabel.textColor = [UIColor redColor];
    [self.view addSubview:button5];
    UIButton *button6 = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button6.frame = CGRectMake(280, 640, 40, 20);
    button6.backgroundColor = [UIColor blackColor];
    [button6 addTarget:self action:@selector(actionButton6:) forControlEvents:(UIControlEventTouchUpInside)];
    [button6 setTitle:@"3D" forState:(UIControlStateNormal)];
    button6.titleLabel.textColor = [UIColor redColor];
    [self.view addSubview:button6];
    UIButton *button7 = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button7.frame = CGRectMake(320, 640, 40, 20);
    button7.backgroundColor = [UIColor blackColor];
    [button7 addTarget:self action:@selector(actionButton7:) forControlEvents:(UIControlEventTouchUpInside)];
    [button7 setTitle:@"组合" forState:(UIControlStateNormal)];
    button7.titleLabel.textColor = [UIColor redColor];
    [self.view addSubview:button7];

}

- (void)actionButton1:(UIButton *)button
{
    [self xyAnimation];

}
- (void)actionButton2:(UIButton *)button
{
    [self sizeAnimation];
}
- (void)actionButton3:(UIButton *)button
{
    [self changBackgroundColor];
}
- (void)actionButton4:(UIButton *)button
{
    [self positionPoint];
}
- (void)actionButton5:(UIButton *)button
{
    [self shakePositionPoint];
}
- (void)actionButton6:(UIButton *)button
{
    [self transform3DRotation];
}
- (void)actionButton7:(UIButton *)button
{
    [self groupAnimation];
}
// layer 层动画
/**
 *  CAPropertyAnimation // 抽象类
 *  CABasicAnimation // 基础动画 更改大小 旋转等
 *  CAKeyframeAnimation // 主要按轨迹移动
    // 比如播放执行一组事件 动画时候使用
 */
// 旋转
- (void)xyAnimation
{
    // 新建一个基础动画
    // 注意 KeyPath 一定不要拼错了  更改的是形变属性下 弧度的 x 轴
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    // 设置更改变化属性
    // toValue 需要一个对象类型的 即 NSNumber 或者 NSValue 转化一下
    animation.toValue = [NSNumber numberWithFloat:M_PI * 1];
   
    // 设置动画时间
    animation.duration = 1;
    // 设置动画重复
    animation.repeatCount = 2;
    // 把设置好的动画添加到layer 上  参数2 : 添加动画的表示
    [self.myView.layer addAnimation:animation forKey:@"transform.rotation.x"];
}

// 改变大小的
- (void)sizeAnimation
{
    // 更改大小的话需要更改 bounds.size
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
    // 设置改变的值
    // 初始值
    animation.fromValue = [NSValue valueWithCGSize:CGSizeMake(10, 10)];
    // 结束值
    animation.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
    animation.duration = 1;
    [self.myView.layer addAnimation:animation forKey:@"bounds.size"];
}

// 改变颜色
- (void)changBackgroundColor
{
    // 可以执行一组动画
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
    // 改变一组颜色
    // 创建颜色
    CGColorRef green = [UIColor greenColor].CGColor;
    CGColorRef red = [UIColor redColor].CGColor;
    CGColorRef yellow = [UIColor yellowColor].CGColor;
    CGColorRef orange = [UIColor orangeColor].CGColor;
    CGColorRef blue = [UIColor blueColor].CGColor;
   

    animation.values = [NSArray arrayWithObjects:(id)green,(id)red,(id)yellow,(id)orange,(id)blue, nil];
    animation.duration = 5;
    animation.repeatCount = 5;
    [self.myView.layer addAnimation:animation forKey:@"backgroundColor"];
}

// 轨迹移动
- (void)positionPoint
{
    NSLog(@"%@", NSStringFromCGPoint(self.myView.layer.position));
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(250, 200)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(200, 250)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(150, 300)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(100, 350)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(50, 400)];
    NSValue *value6 = [NSValue valueWithCGPoint:CGPointMake(300, 150)];
    animation.values = @[value1,value2,value3,value4,value5,value6];
    animation.duration = 1;
    [self.myView.layer addAnimation:animation forKey:@"position"];
}
// 摇一摇

- (void)shakePositionPoint
{
    // 方法一
//    NSLog(@"%@", NSStringFromCGPoint(self.myView.layer.position));
//    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(280, 150)];
//    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(300, 150)];
//    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(320, 150)];
//
//    animation.values = @[value1,value2,value3];
//    animation.duration = 0.1;
//    animation.repeatCount = 3;
//    [self.myView.layer addAnimation:animation forKey:@"position"];
   
   
    // 方法二
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
    CGFloat center = self.myView.layer.position.x;
   
    NSNumber *l = [NSNumber numberWithFloat:center - 10];
    NSNumber *r = [NSNumber numberWithFloat:center + 10];
    NSNumber *c = [NSNumber numberWithFloat:center];

    animation.values = @[l,c,r];
    animation.duration = 0.1;
    animation.repeatCount = 3;
    [self.myView.layer addAnimation:animation forKey:@"position.x"];
}


// 3D旋转
- (void)transform3DRotation
{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    // 结束值
    animation.toValue = [NSValue valueWithCATransform3D:(CATransform3DRotate(self.myView.layer.transform, M_PI, 50, 50, 100))];
    animation.duration = 1;
    animation.repeatCount = 2;
    [self.myView.layer addAnimation:animation forKey:@"transform"];
}


// 组动画
// 可以执行一组动画

- (void)groupAnimation
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
// 改变一组颜色
    // 创建颜色
    CGColorRef green = [UIColor greenColor].CGColor;
    CGColorRef red = [UIColor redColor].CGColor;
    CGColorRef yellow = [UIColor yellowColor].CGColor;
    CGColorRef orange = [UIColor orangeColor].CGColor;
    CGColorRef blue = [UIColor blueColor].CGColor;
    animation.values = [NSArray arrayWithObjects:(id)green,(id)red,(id)yellow,(id)orange,(id)blue, nil];
    animation.duration = 5;
    animation.repeatCount = 5;
// 更改大小的话需要更改 bounds.size
    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
    // 设置改变的值
    // 初始值
    animation1.fromValue = [NSValue valueWithCGSize:CGSizeMake(10, 10)];
    // 结束值
    animation1.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
    animation1.duration = 1;
   
   
   
// 创建组动画
    CAAnimationGroup *group = [CAAnimationGroup animation];
    // 设置组动画的时间
    group.duration = 3;
    // 设置执行的数组
    // 数组当中
    group.animations = @[animation,animation1];
   
    [self.myView.layer addAnimation:group forKey:@"group"];

}