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:携带的参数
     */
    [UIViewbeginAnimations:@"Start"context:nil];
   
//设置动画
    // 1.设置时间(设置时间在多少秒钟动画完结)
    [UIViewsetAnimationDuration:1];
    // 2.设置动画延迟(延迟多少秒开始)
    [UIViewsetAnimationDelay:0];
    // 4.设置反转
    [UIViewsetAnimationRepeatAutoreverses:YES];
   
    // 5.设置一个代理
    [UIViewsetAnimationDelegate:self];
    // 6.设置代理方法
    [UIViewsetAnimationWillStartSelector:@selector(willStart)];
    [UIViewsetAnimationDidStopSelector:@selector(didStop)];
   
    // 7.设置速度曲线
    [UIViewsetAnimationCurve:UIViewAnimationCurveEaseIn];
    //8.循环几次
    [UIViewsetAnimationRepeatCount:1];
    // 3.添加一个改变位置的动画
    self.imageView.center= CGPointMake(300,300);
   
    // 设置持续动画
    [UIViewsetAnimationBeginsFromCurrentState:YES];

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

    CGRect frame = self.imageView.frame;

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

    [UIViewcommitAnimations];

}

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];
    [UIViewanimateWithDuration:0.00001animations:^{
        self.imageView.transform= CGAffineTransformRotate(self.imageView.transform,M_PI_4 / 5);
    } completion:^(BOOLfinished) {
        [UIViewanimateWithDuration:0.00001animations:^{
            // 执行的动画
            [selfrotate];

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

    }else {

    } 

}

UIViewController 视图之间的动画切换

首先创建三个UIViewController.

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

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

 

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

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

//视图 实现切换
- (void)actionChange:(UIBarButtonItem*)changeItem
{
    _isChange = !_isChange;
    if (_isChange== YES) {
        [UIViewtransitionFromView:self.secondVC.viewtoView:self.thirdVC.viewduration:0.5options:(UIViewAnimationOptionTransitionFlipFromLeft)completion:^(BOOLfinished) {
           
        }];
    } else {

        [UIViewtransitionFromView:self.thirdVC.viewtoView:self.secondVC.viewduration:0.5options:(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 {
    [superviewDidLoad];
    self.view.backgroundColor= [UIColorblackColor];
    [selfaddSubViews];
   
    UILabel *label = [[UILabelalloc]initWithFrame:CGRectMake(20,80,60,150)];
    label.text= @"花\n好人\n月相\n圆思\n\n";
    label.numberOfLines= 0;
    label.font= [UIFontfontWithName:@"Courier-Bold"size:25];
    label.textColor= [UIColorwhiteColor];
    [self.viewaddSubview:label];
    // Do any additional setup after loading the view.
}

- (void)addSubViews
{
    self.myView= [[UIViewalloc]initWithFrame:CGRectMake(250,100,100,100)];
    self.myView.backgroundColor= [UIColorwhiteColor];
    [self.viewaddSubview:self.myView];
    [_myViewrelease];
    /**
     *  layer 是负责显示图层的,要更改看到的图形的形状,需要修改 layer.
     */
    // 设置圆角 长 / 宽 除以2就变成圆的了
    self.myView.layer.cornerRadius= 50;
    // CGColorRef 是专门图层绘制的颜色
    self.myView.layer.shadowColor= [UIColoryellowColor].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= [UIColoryellowColor].CGColor;
    // 边框的锚点
  //  self.myView.layer.anchorPoint = CGPointMake(0, 0);
    UIButton *button1 = [UIButtonbuttonWithType:(UIButtonTypeCustom)];
    button1.frame= CGRectMake(20,640,40,20);
    button1.backgroundColor= [UIColorblackColor];
    [button1 addTarget:selfaction:@selector(actionButton1:)forControlEvents:(UIControlEventTouchUpInside)];
    [button1 setTitle:@"旋转"forState:(UIControlStateNormal)];
    button1.titleLabel.textColor= [UIColorredColor];
    [self.viewaddSubview:button1];
    UIButton *button2 = [UIButtonbuttonWithType:(UIButtonTypeCustom)];
    button2.frame= CGRectMake(70,640,40,20);
    button2.backgroundColor= [UIColorblackColor];
    [button2 addTarget:selfaction:@selector(actionButton2:)forControlEvents:(UIControlEventTouchUpInside)];
    [button2 setTitle:@"变大"forState:(UIControlStateNormal)];
    button2.titleLabel.textColor= [UIColorredColor];
    [self.viewaddSubview:button2];
    UIButton *button3 = [UIButtonbuttonWithType:(UIButtonTypeCustom)];
    button3.frame= CGRectMake(120,640,40,20);
    button3.backgroundColor= [UIColorblackColor];
    [button3 addTarget:selfaction:@selector(actionButton3:)forControlEvents:(UIControlEventTouchUpInside)];
    [button3 setTitle:@"变色"forState:(UIControlStateNormal)];
    button3.titleLabel.textColor= [UIColorredColor];
    [self.viewaddSubview:button3];
    UIButton *button4 = [UIButtonbuttonWithType:(UIButtonTypeCustom)];
    button4.frame= CGRectMake(170,640,40,20);
    button4.backgroundColor= [UIColorblackColor];
    [button4 addTarget:selfaction:@selector(actionButton4:)forControlEvents:(UIControlEventTouchUpInside)];
    [button4 setTitle:@"移动"forState:(UIControlStateNormal)];
    button4.titleLabel.textColor= [UIColorredColor];
    [self.viewaddSubview:button4];
    UIButton *button5 = [UIButtonbuttonWithType:(UIButtonTypeCustom)];
    button5.frame= CGRectMake(220,640,60,20);
    button5.backgroundColor= [UIColorblackColor];
    [button5 addTarget:selfaction:@selector(actionButton5:)forControlEvents:(UIControlEventTouchUpInside)];
    [button5 setTitle:@"摇一摇"forState:(UIControlStateNormal)];
    button5.titleLabel.textColor= [UIColorredColor];
    [self.viewaddSubview:button5];
    UIButton *button6 = [UIButtonbuttonWithType:(UIButtonTypeCustom)];
    button6.frame= CGRectMake(280,640,40,20);
    button6.backgroundColor= [UIColorblackColor];
    [button6 addTarget:selfaction:@selector(actionButton6:)forControlEvents:(UIControlEventTouchUpInside)];
    [button6 setTitle:@"3D"forState:(UIControlStateNormal)];
    button6.titleLabel.textColor= [UIColorredColor];
    [self.viewaddSubview:button6];
    UIButton *button7 = [UIButtonbuttonWithType:(UIButtonTypeCustom)];
    button7.frame= CGRectMake(320,640,40,20);
    button7.backgroundColor= [UIColorblackColor];
    [button7 addTarget:selfaction:@selector(actionButton7:)forControlEvents:(UIControlEventTouchUpInside)];
    [button7 setTitle:@"组合"forState:(UIControlStateNormal)];
    button7.titleLabel.textColor= [UIColorredColor];
    [self.viewaddSubview:button7];

}

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

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

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

//改变颜色
- (void)changBackgroundColor
{
    // 可以执行一组动画
    CAKeyframeAnimation *animation = [CAKeyframeAnimationanimationWithKeyPath:@"backgroundColor"];
    // 改变一组颜色
    // 创建颜色
    CGColorRef green = [UIColorgreenColor].CGColor;
    CGColorRef red = [UIColorredColor].CGColor;
    CGColorRef yellow = [UIColoryellowColor].CGColor;
    CGColorRef orange = [UIColororangeColor].CGColor;
    CGColorRef blue = [UIColorblueColor].CGColor;
   

    animation.values= [NSArrayarrayWithObjects:(id)green,(id)red,(id)yellow,(id)orange,(id)blue,nil];
    animation.duration= 5;
    animation.repeatCount= 5;
    [self.myView.layeraddAnimation:animationforKey:@"backgroundColor"];
}

//轨迹移动
- (void)positionPoint
{
    NSLog(@"%@",NSStringFromCGPoint(self.myView.layer.position));
    CAKeyframeAnimation *animation = [CAKeyframeAnimationanimationWithKeyPath:@"position"];
    NSValue *value1 = [NSValuevalueWithCGPoint:CGPointMake(250,200)];
    NSValue *value2 = [NSValuevalueWithCGPoint:CGPointMake(200,250)];
    NSValue *value3 = [NSValuevalueWithCGPoint:CGPointMake(150,300)];
    NSValue *value4 = [NSValuevalueWithCGPoint:CGPointMake(100,350)];
    NSValue *value5 = [NSValuevalueWithCGPoint:CGPointMake(50,400)];
    NSValue *value6 = [NSValuevalueWithCGPoint:CGPointMake(300,150)];
    animation.values= @[value1,value2,value3,value4,value5,value6];
    animation.duration= 1;
    [self.myView.layeraddAnimation:animationforKey:@"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 = [CAKeyframeAnimationanimationWithKeyPath:@"position.x"];
    CGFloat center = self.myView.layer.position.x;
   
    NSNumber *l = [NSNumbernumberWithFloat:center -10];
    NSNumber *r = [NSNumbernumberWithFloat:center +10];
    NSNumber *c = [NSNumbernumberWithFloat:center];

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


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


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

- (void)groupAnimation
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimationanimationWithKeyPath:@"backgroundColor"];
//改变一组颜色
    // 创建颜色
    CGColorRef green = [UIColorgreenColor].CGColor;
    CGColorRef red = [UIColorredColor].CGColor;
    CGColorRef yellow = [UIColoryellowColor].CGColor;
    CGColorRef orange = [UIColororangeColor].CGColor;
    CGColorRef blue = [UIColorblueColor].CGColor;
    animation.values= [NSArrayarrayWithObjects:(id)green,(id)red,(id)yellow,(id)orange,(id)blue,nil];
    animation.duration= 5;
    animation.repeatCount= 5;
//更改大小的话需要更改 bounds.size
    CABasicAnimation *animation1 = [CABasicAnimationanimationWithKeyPath:@"bounds.size"];
    // 设置改变的值
    // 初始值
    animation1.fromValue= [NSValuevalueWithCGSize:CGSizeMake(10,10)];
    // 结束值
    animation1.toValue= [NSValuevalueWithCGSize:CGSizeMake(100,100)];
    animation1.duration= 1;
   
   
   
//创建组动画
    CAAnimationGroup *group = [CAAnimationGroupanimation];
    // 设置组动画的时间
    group.duration= 3;
    // 设置执行的数组
    // 数组当中
    group.animations= @[animation,animation1];
   
    [self.myView.layeraddAnimation:groupforKey:@"group"];

}