CAAnimation笔记

节选自:http://www.cnblogs.com/lee0oo0/p/4225730.html
设定动画的属性。以下是属性及其对应的说明:

C221A1BE-B020-41BF-B75F-4324E1A0011E.png

animation.duration = 2.5; // 动画持续时间  
animation.repeatCount = 1; // 不重复  
animation.beginTime = CACurrentMediaTime() + 2; // 2秒后执行  
animation.autoreverses = YES; // 结束后执行逆动画  
// 动画先加速后减速  
animation.timingFunction =  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; 

设定动画开始和结束帧时的状态。设定的值会变为KeyPath所指定的属性的值。
3F3702E4-5460-4680-B21F-FA95056C96DE.png
// 指定position属性(移动)  
CABasicAnimation *animation =  [CABasicAnimation animationWithKeyPath:@"position"];  
// 设定动画起始帧和结束帧  
animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)]; // 起始点  
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // 终了点  
  • 缩放动画(不停止)
    @property (weak, nonatomic) IBOutlet UIView *redView;
    @property (weak, nonatomic) IBOutlet UIImageView *imageV;
    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
    {
    // 创建动画
    CABasicAnimation *anim = [CABasicAnimation animation];

          // 描述下修改哪个属性产生动画
          //    anim.keyPath = @"position";
          // 只能是layer属性
          anim.keyPath = @"transform.scale";
          
          // 设置值
          //    anim.toValue = [NSValue valueWithCGPoint:CGPointMake(250, 500)];
          anim.toValue = @0.5;
          
          // 设置动画执行次数
          anim.repeatCount = MAXFLOAT;
          
          // 取消动画反弹
          // 设置动画完成的时候不要移除动画
          anim.removedOnCompletion = NO;
          
          // 设置动画执行完成要保持最新的效果
          anim.fillMode = kCAFillModeForwards;
          
          [_imageV.layer addAnimation:anim forKey:nil];
      }
    

  • 手指画一条线,让view随着这条线走
    @interface DrawView ()

      @property (nonatomic, strong) UIBezierPath *path;
      
      @end
      
      @implementation DrawView
      
      - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
      {
          // touch
          UITouch *touch = [touches anyObject];
          
          // 获取手指的触摸点
          CGPoint curP = [touch locationInView:self];
          
          // 创建路径
          UIBezierPath *path = [UIBezierPath bezierPath];
          _path = path;
          
          // 设置起点
          [path moveToPoint:curP];
          
      }
      
      - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
      {
          // touch
          UITouch *touch = [touches anyObject];
          
          // 获取手指的触摸点
          CGPoint curP = [touch locationInView:self];
          
          [_path addLineToPoint:curP];
          
          [self setNeedsDisplay];
      }
      
      - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
      {
          // 给imageView添加核心动画
          // 添加核心动画
          
          CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
          
          anim.keyPath = @"position";
          
          //    anim.values = @[@(angle2Radion(-10)),@(angle2Radion(10)),@(angle2Radion(-10))];
          
          anim.path = _path.CGPath;
          
          anim.duration = 1;
          
          anim.repeatCount = 1;
          //给这个view的图层加一个动画
          [[[self.subviews firstObject] layer] addAnimation:anim forKey:nil];
      }
      
      - (void)drawRect:(CGRect)rect
      {
          //根据_path画一条线
          [_path stroke];
      }
      
      @end
    

  • 转场动画
    @interface ViewController ()
    @property (weak, nonatomic) IBOutlet UIImageView *imageView;

      @end
      
      @implementation ViewController
      
      static int i = 1;
      - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
      {
          
          // 转场代码
          if (i == 4) {
              i = 1;
          }
          // 加载图片名称
          NSString *imageN = [NSString stringWithFormat:@"%d",i++];
          _imageView.image = [UIImage imageNamed:imageN];
          
          // 转场动画
          CATransition *anim = [CATransition animation];
          anim.type = @"pageCurl";
          anim.duration = 0.5;
          
          [_imageView.layer addAnimation:anim forKey:nil];
      }
      
      @end
    

  • 动画组
    @property (weak, nonatomic) IBOutlet UIView *redView;
    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
    {
    // 同时缩放,平移,旋转
    CAAnimationGroup *group = [CAAnimationGroup animation];

      CABasicAnimation *scale = [CABasicAnimation animation];
      scale.keyPath = @"transform.scale";
      scale.toValue = @0.5;
    
      CABasicAnimation *rotation = [CABasicAnimation animation];
      rotation.keyPath = @"transform.rotation";
      rotation.toValue = @(arc4random_uniform(M_PI));
    
      CABasicAnimation *position = [CABasicAnimation animation];
      position.keyPath = @"position";
      position.toValue = [NSValue valueWithCGPoint:CGPointMake(arc4random_uniform(200), arc4random_uniform(200))];
    
      group.animations = @[scale,rotation,position];
    
      [_redView.layer addAnimation:group forKey:nil];
    }
    

  • 折叠(根据x旋转)动画
![DB8436BD-EE3B-42F6-AE6B-95091EF411C3.png](http://upload-images.jianshu.io/upload_images/1766523-d664e17fb6a46dfb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    #import "ViewController.h"
    
    @interface ViewController ()
    @property (weak, nonatomic) IBOutlet UIImageView *topView;
    @property (weak, nonatomic) IBOutlet UIImageView *bottomView;
    // 添加手势的View
    @property (weak, nonatomic) IBOutlet UIView *dragView;
    
    @property (nonatomic, weak) CAGradientLayer *gradientL;
    
    @end
    
    @implementation ViewController
    // 一张图片必须要通过两个控件展示,旋转的时候,只旋转上部分控件
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        // 通过设置contentsRect可以设置图片显示的尺寸,取值0~1
        //topView和bottomView的frame一样 通过设置铆点anchorPoint来调整
        _topView.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
        _topView.layer.anchorPoint = CGPointMake(0.5, 1);
        
        _bottomView.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
        _bottomView.layer.anchorPoint = CGPointMake(0.5, 0);
        
        // 添加手势
        UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
        
        [_dragView addGestureRecognizer:pan];
        
        // 渐变图层
        CAGradientLayer *gradientL = [CAGradientLayer layer];
        
        // 注意图层需要设置尺寸
        gradientL.frame = _bottomView.bounds;
        
        gradientL.opacity = 0;
        gradientL.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
        _gradientL = gradientL;
        
        [_bottomView.layer addSublayer:gradientL];
    }
    
    // 拖动的时候旋转上部分内容,200(垂直(Y)偏移量) M_PI(旋转180度)
    - (void)pan:(UIPanGestureRecognizer *)pan
    {
        // 获取偏移量
        CGPoint transP = [pan translationInView:_dragView];
        NSLog(@"%@", NSStringFromCGPoint(transP));
        // 旋转角度,往下逆时针旋转
        CGFloat angle = -transP.y / 200.0 * M_PI;
        
        CATransform3D transfrom = CATransform3DIdentity;
        
        
        // 增加旋转的立体感,近大远小,d:距离图层的距离
        transfrom.m34 = -1 / 500.0;
        
        transfrom = CATransform3DRotate(transfrom, angle, 1, 0, 0);
        
        _topView.layer.transform = transfrom;
        
        // 设置阴影效果
        _gradientL.opacity = transP.y * 1 / 200.0;
        
        
        if (pan.state == UIGestureRecognizerStateEnded) { // 反弹
            /**
             * 弹簧效果的动画
             * usingSpringWithDamping 参数:  usingSpringWithDamping的范围为0.0f到1.0f,数值越小「弹簧」的振动效果越明显。
             * initialSpringVelocity 参数: initialSpringVelocity则表示初始的速度,数值越大一开始移动越快。
             *  http://www.renfei.org/blog/ios-8-spring-animation.html
             */
            [UIView animateWithDuration:0.6 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                
                _topView.layer.transform = CATransform3DIdentity;
                
            } completion:^(BOOL finished) {
                
            }];
        }
        
    }
    @end

  • 音量震动
E9E73E8C-2511-4656-94FC-9D9179D452B4.png
F8B483F8-D235-4CD6-A220-1BFBEF203356.png
   #import "ViewController.h"
    
    @interface ViewController ()
    @property (weak, nonatomic) IBOutlet UIView *lightView;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // CAReplicatorLayer复制图层,可以把图层里面所有子层复制
        // 创建复制图层
        CAReplicatorLayer *repL = [CAReplicatorLayer layer];
        repL.frame = _lightView.bounds;
        [_lightView.layer addSublayer:repL];
        
        //设置一个layer震动条
        CALayer *layer = [CALayer layer];
        layer.anchorPoint = CGPointMake(0.5, 1);
        layer.position = CGPointMake(15, _lightView.bounds.size.height);
        layer.bounds = CGRectMake(0, 0, 30, 150);
        layer.backgroundColor = [UIColor whiteColor].CGColor;
        [repL addSublayer:layer];
        
        //设置图层的动画
        CABasicAnimation *anim = [CABasicAnimation animation];
        anim.keyPath = @"transform.scale.y";
        anim.toValue = @0.1;
        anim.duration = 0.5;
        anim.repeatCount = MAXFLOAT;
        
        // 设置动画反转 动画结束时是否执行逆动画
        anim.autoreverses = YES;
        [layer addAnimation:anim forKey:nil];
        
        // 复制层中子层总数
        // instanceCount:表示复制层里面有多少个子层,包括原始层
        repL.instanceCount = 3;
        // 设置复制子层偏移量,不包括原始层,相对于原始层x偏移
        repL.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
        // 设置复制层动画延迟时间
        repL.instanceDelay = 0.1;
        // 如果设置了原始层背景色,就不需要设置这个属性
        repL.instanceColor = [UIColor redColor].CGColor;
        // 颜色值递减
        repL.instanceRedOffset = -0.3;
    }
    
    @end

  • 菊花
45593372-4178-4EB6-925C-04765F9387AE.png
    #import "ViewController.h"
    
    @interface ViewController ()
    @property (weak, nonatomic) IBOutlet UIView *redView;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        
        CAReplicatorLayer *repL = [CAReplicatorLayer layer];
        repL.frame = _redView.bounds;
        [_redView.layer addSublayer:repL];
        
        
        CALayer *layer = [CALayer layer];
        layer.transform = CATransform3DMakeScale(0, 0, 0);
        layer.position = CGPointMake(_redView.bounds.size.width / 2, 20);
        layer.bounds = CGRectMake(0, 0, 10, 10);
        layer.cornerRadius = 10.0;
        layer.masksToBounds = YES;
        layer.backgroundColor = [UIColor purpleColor].CGColor;
        [repL addSublayer:layer];
        
        // 设置缩放动画
        CABasicAnimation *anim = [CABasicAnimation animation];
        anim.keyPath = @"transform.scale";
        anim.fromValue = @1;
        anim.toValue = @0;
        anim.repeatCount = MAXFLOAT;
        CGFloat duration = 1;
        anim.duration = duration;
        
        [layer addAnimation:anim forKey:nil];
        
        
        int count = 30;
        CGFloat angle = M_PI * 2 / count;
        // 设置子层总数
        repL.instanceCount = count;
        repL.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
        repL.instanceDelay = duration / count;
        
    }
    @end
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,485评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,110评论 5 13
  • 在iOS实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,092评论 1 23
  • Core Animation Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,...
    45b645c5912e阅读 3,027评论 0 21
  • 一、简介 Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽...
    莦婼姑娘阅读 963评论 0 4