动画 CALayer

最新推荐文章于 2022-12-12 18:30:59 发布

原创最新推荐文章于 2022-12-12 18:30:59 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

UI 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了如何使用UIView及其底层的CALayer来实现不同类型的动画效果，包括位置移动、大小变化、Z字形移动及组合动画等，并展示了翻转效果的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UIView的属性动画,会修改属性产生动画.

CALayer,没有修改UIView属性.

初始化myView

@property (nonatomic,strong)UIView *myView;

self.myView=[[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
    
    self.myView.backgroundColor=[UIColor purpleColor];
    
 
    //设置圆角
    self.myView.layer.cornerRadius=20;
    //边框粗细
    self.myView.layer.borderWidth=10;
    //边框颜色(注意类型转换)
    self.myView.layer.borderColor=[UIColor redColor].CGColor;
    
    //阴影颜色
    self.myView.layer.shadowColor=[UIColor grayColor].CGColor;
    //阴影偏移
    self.myView.layer.shadowOffset=CGSizeMake(10, 10);
    //阴影透明度(必须设置的)
    self.myView.layer.shadowOpacity=0.3;
    //模糊程度(越小越重)
    self.myView.layer.shadowRadius=1;

   //打印position
    NSLog(@"position:%@",NSStringFromCGPoint(self.myView.layer.position));
    //打印锚点
    NSLog(@"锚点:%@",NSStringFromCGPoint(self.myView.layer.anchorPoint));
    [self.view addSubview:self.myView];

第一种:位置移动动画CABacic

 //创建animation对象
    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"position"];
    //从哪开始
    animation.fromValue=[NSValue valueWithCGPoint:self.myView.layer.position];
    //到哪结束
    animation.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
    //设置持续时间
    animation.duration=2.0;
    //自动执行
    animation.autoreverses=YES;
    //执行次数
    animation.repeatCount=3;
    
    [self.myView.layer addAnimation:animation forKey:@"position动画"];

第二种:改变自身大小的动画(没改变Frame)CABacic

CABasicAnimation *animation1=[CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
    //初始值
    animation1.fromValue=[NSNumber numberWithFloat:1.0];

    //结束值
    animation1.toValue=[NSNumber numberWithFloat:3.0];
    //设置持续时间
    animation1.duration=2.0;
    //自动执行
    animation1.autoreverses=YES;
     //执行次数
    animation1.repeatCount=3;
    
    [self.myView.layer addAnimation:animation1 forKey:@"缩放动画"];

第三种: Z 字型动画移动keyFrame:

CAKeyframeAnimation *animation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
    //持续时间
    animation.duration=2.0;
    
    //自动开启
    animation.autoreverses=YES;
    //次数
    animation.repeatCount=3;
    NSArray *array=@[[NSValue valueWithCGPoint:CGPointMake(50+50, 50+50)],[NSValue valueWithCGPoint:CGPointMake(200, 50+50)],[NSValue valueWithCGPoint:CGPointMake(50+50, 200)],[NSValue valueWithCGPoint:CGPointMake(200, 200)]];
    animation.values=array;
    
    [self.myView.layer addAnimation:animation forKey:@"动画"];

第四种.组合动画(将好几种动画组合到一起)group

- (IBAction)group:(id)sender {
    
    
    CAAnimationGroup *group=[CAAnimationGroup animation];
    CABasicAnimation *animation1=[CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
    //初始值
    animation1.fromValue=[NSNumber numberWithFloat:1.0];
    //结束值
    animation1.toValue=[NSNumber numberWithFloat:3.0];

    
    CAKeyframeAnimation *animation2=[CAKeyframeAnimation animationWithKeyPath:@"position"];

    NSArray *array=@[[NSValue valueWithCGPoint:CGPointMake(50+50, 50+50)],[NSValue valueWithCGPoint:CGPointMake(200, 50+50)],[NSValue valueWithCGPoint:CGPointMake(50+50, 200)],[NSValue valueWithCGPoint:CGPointMake(200, 200)]];
    animation2.values=array;

    
    //动画们
    NSArray *arr=@[animation1,animation2];
    group.animations=arr;
    //持续时间
    group.duration=2.0;
    //自动开启
    group.autoreverses=YES;
    //次数
    group.repeatCount=3;
    [self.myView.layer addAnimation:group forKey:@"组合动画"];
    
    
    
}

第五种:CATransition翻转效果

- (IBAction)tansition:(id)sender {
    
    
    CATransition *ani=[CATransition animation];
    ani.type=@"cube";
//    pageCurl            向上翻一页
//    pageUnCurl          向下翻一页
//    rippleEffect        滴水效果
//    suckEffect          收缩效果，如一块布被抽走
//    cube                立方体效果
//    oglFlip             上下翻转效果
    
    //方向
    ani.subtype=kCATransitionFromLeft;
    
    ani.duration=0.8;
    ani.repeatCount=3;
    [self.myView.layer addAnimation:ani forKey:@"动画"];
    
    
}