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"];    

动画效果：

有问题请联系博主，邮箱：[e-mail]
著作权声明：本文由http://my.csdn.net/Nathan1987_原创，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢