iOS开发13-iOS动画的学习

iOS开发13-iOS动画的学习

1UIView动画

动画影响的属性

frame:     视图框架

center:    视图中心点

bounds:  视图边际

backgroundColor:背景颜色

alpha:        视图透明度

transform: 视图转换

frame:      该view在父view坐标系统中的位置和大小。（参照点是，父亲的坐标系统）

bounds：该view在本地坐标系统中的位置和大小。（参照点是，本地坐标系统，就相当于View自己的坐标系统，以0,0点为起点）

center：  该view的中心点在父view坐标系统中的位置和大小。（参照点是，父亲的坐标系统）

1.1动画块

- (void)viewDidLoad {
    [super viewDidLoad];
    self.v1 = [[UIView alloc]init];
    self.v1.frame = CGRectMake(100, 100, 200, 200);
    self.v1.backgroundColor =[UIColor blueColor];
    [self.view addSubview:self.v1];
    }

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
  
    //开始动画
    [UIView beginAnimations:nil context:nil];//标记动画开始
    //设置各种动画属性
    /*
    //[UIView setAnimationDuration:(NSTimeInterval)]//设置动画持续时间
    //[UIView setAnimationDelay:(NSTimeInterval)]//设置动画开始前的延时
    //[UIView setAnimationRepeatAutoreverses:(BOOL)]//
    //[UIView setAnimationRepeatCount:(float)]//重复次数
    //[UIView setAnimationDelegate:(nullable id)]//设置动画的代理
    */
    
    //设置动画持续时间 2秒
    [UIView setAnimationDuration:5];
    //延迟开始         0.1秒后开始动画
    [UIView setAnimationDelay:0.1];
    //重复次数 1次
    [UIView setAnimationRepeatCount:1];
    //动画的速度曲线-开始结束的运行速度
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    //setAnimationCurve的枚举
    /*
     UIViewAnimationCurveEaseInOut,//开始和结束时候慢速
     UIViewAnimationCurveEaseIn,   //开始慢速
     UIViewAnimationCurveEaseOut,  //结束慢速
     UIViewAnimationCurveLinear    //线性，正常速度
     */
    
    //设置动画过渡到的效果
    //背景颜色
    self.v1.backgroundColor=[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
    //中心点
    //self.v1.center=CGPointMake(300, 300);
    //开始时候，V1在父View里的位置和大小：self.v1.frame = CGRectMake(100, 100, 200, 200);
    self.v1.frame = CGRectMake(300, 300, 30, 30);
    
    //提交动画
    [UIView commitAnimations];//标记动画结束
    
   }

动画效果：

1.2动画Block

[UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        
        //在这里设置各种属性
        self.fromView.backgroundColor=[UIColor greenColor];
        
                     } completion:^(BOOL finished) {
        
        //动画完成之后
        
                                  }];

2CAAnimation动画

2.1CABasicAnimation基本动画

可以通过animationWithKeyPath键值对的方式来改变动画
animationWithKeyPath的值：
　 transform.scale = 比例转换
    transform.scale.x = 宽的比例转换
    transform.scale.y = 高的比例转换
    transform.rotation.z = 平面图的旋转
    opacity = 透明度
    margin
    zPosition
    backgroundColor    背景颜色
    cornerRadius    圆角
    borderWidth
    bounds
    contents
    contentsRect
    cornerRadius
    frame
    hidden
    mask
    masksToBounds
    position
    shadowColor
    shadowOffset
    shadowOpacity
    shadowRadius

1、沿直线移动

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.v1=[[UIView alloc]init];
    self.v1.frame=CGRectMake(50, 50, 100, 100);
    self.v1.backgroundColor=[UIColor redColor];
    [self.view addSubview:self.v1];
    }

 //CABasicAnimation //基本动画
    //position
    //从一个位置到另外一个位置，沿着直线路径
    CABasicAnimation * basic1 = [CABasicAnimation animationWithKeyPath:@"position"];
    basic1.duration = 3.0f;//5秒
   
    //从哪儿开始
    NSValue *value1 = [NSValue valueWithCGPoint:self.v1.layer.position];
    basic1.fromValue = value1;
    
    //到哪里去
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(300, 400)];
     basic1.toValue =value2;
    
    
    [self.v1.layer addAnimation:basic1 forKey:@"position"];
    
    //不设置的话，动画结束后会回到原来的位置
    self.v1.layer.position=CGPointMake(300, 400);
    //移除动画
    //[self.v1.layer removeAnimationForKey:@"positon"];
    

动画效果：

2、旋转

//旋转
    
    CABasicAnimation * basic2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    
    basic2.duration = 5;//5秒
  
    basic2.fromValue = @(0);
    
    basic2.toValue =@(M_PI*5);
    [self.v1.layer addAnimation:basic2 forKey:@"b2"];

动画效果：

3、放大缩小

 //放大缩小
    
    CABasicAnimation * basic3 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    
    basic3.duration = 5.f;//5秒
    
    basic3.fromValue = @(1);
    
    basic3.toValue =@(3);
    [self.v1.layer addAnimation:basic3 forKey:@"b3"];

动画效果：

2.2 CAKeyframeAnimation动画

2.2.1按照给定路线移动

// CAKeyframeAnimation
    
    //移动路线
    
    CAKeyframeAnimation *kf = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    kf.duration = 5.f;
    
    
    
    id p1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    
    
    id p2 = [NSValue valueWithCGPoint:CGPointMake(350, 100)];
    
    id p3 = [NSValue valueWithCGPoint:CGPointMake(150, 550)];
    
    id p4 = [NSValue valueWithCGPoint:CGPointMake(350, 550)];
    
    
    
    kf.values=@[p1,p2,p3,p4];
    
    [self.v1.layer addAnimation:kf forKey:@"kf1"];

动画效果：

2.2.2连续变换颜色

 //变颜色
    
    CAKeyframeAnimation *kf2 =[CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];

    
    
    kf2.duration = 5.f;
    //变化过程
    
    id c1 =(id)[UIColor blackColor].CGColor;
    
    id c2 =(id)[UIColor greenColor].CGColor;
    
    id c3 =(id)[UIColor yellowColor].CGColor;
    
    id c4 =(id)[UIColor redColor].CGColor;
    
    kf2.values=@[c1,c2,c3,c4];
    
    
    [self.v1.layer addAnimation:kf2 forKey:@"kf2"];
    

动画效果：

2.3 CAAnimationGroup组合动画

 //旋转
    
    CABasicAnimation * basic2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    
    basic2.duration = 5;//5秒
  
    basic2.fromValue = @(0);
    
    basic2.toValue =@(M_PI*5);

 //移动路线
    
    CAKeyframeAnimation *kf = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    kf.duration = 5.f;
    
    
    
    id p1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    
    
    id p2 = [NSValue valueWithCGPoint:CGPointMake(350, 100)];
    
    id p3 = [NSValue valueWithCGPoint:CGPointMake(150, 550)];
    
    id p4 = [NSValue valueWithCGPoint:CGPointMake(350, 550)];
    
    
    
    kf.values=@[p1,p2,p3,p4];
 //变颜色
    
    CAKeyframeAnimation *kf2 =[CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];

    
    
    kf2.duration = 5.f;
    //变化过程
    
    id c1 =(id)[UIColor blackColor].CGColor;
    
    id c2 =(id)[UIColor greenColor].CGColor;
    
    id c3 =(id)[UIColor yellowColor].CGColor;
    
    id c4 =(id)[UIColor redColor].CGColor;
    
    kf2.values=@[c1,c2,c3,c4];
 // CAAnimationGroup
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.duration=5;
    group.animations = @[kf,kf2];
    
    //添加组合动画
    [self.v1.layer addAnimation:group forKey:@"group"];

动画效果：

2.4 CATransition动画

  CATransition *tran1 = [CATransition animation];
    tran1.duration = 5.f;
    //动画效果
    
  
    tran1.type = @"reveal";//类型 // fade, moveIn, push , reveal
     tran1.subtype = @"fromLeft";//方向
    /*
     fromLeft
     fromRight
     fromTop
     fromBottom
     */
    
    [self.v1.layer addAnimation:tran1 forKey:@"tran1"];
    

动画效果：