美文网首页
CAKeyframeAnimation

CAKeyframeAnimation

作者: 翻这个墙 | 来源:发表于2017-11-23 10:58 被阅读48次

    CAKeyframeAnimation

    • 父类是CAPropertyAnimation

    CAKeyframeAnimation——关键帧动画

    1. 是CAPropertyAnimation的子类,与CABasicAnimation的区别是:
      • CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值
    • 属性说明:
      1. values:上述的NSArray对象。里面的元素称为“关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
      2. path:可以设置一个CGPathRef、CGMutablePathRef,让图层按照路径轨迹移动。path只对CALayer的anchorPoint和position起作用。如果设置了path,那么values将被忽略
      3. keyTimes:可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧。如果没有设置keyTimes,各个关键帧的时间是平分的

    • CABasicAnimation可看做是只有2个关键帧的CAKeyframeAnimation

    CAKeyframeAnimation实现图案绕圆运行

        // 创建帧动画
        CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    ##核心代码
        anim.keyPath = @"position";
    
        // 创建路径
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:_imageView.center radius:100 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
    
        anim.path = path.CGPath;
    
        anim.repeatCount = MAXFLOAT;
    
        //去掉停顿效果(计算会有停顿)
        anim.calaulationMode = @"cubicpaced";
    
        //自动旋转
        anim.rotationMode = "autoReverse";
    ##
        anim.duration = 1;
    
        [_imageView.layer addAnimation:anim forKey:nil];
    

    CAKeyframeAnimation实现图形抖动

    #####define angle2Radion(angle) (angle / 180.0 * M_PI)
    // 帧动画
        CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    
        // 描述修改layer的属性,transform.rotation只能二维旋转
        anim.keyPath = @"transform.rotation";
    
    ##核心代码
        // 修改Layer值
        anim.values = @[@(angle2Radion(-5)),@(angle2Radion(5)),@(angle2Radion(-5))];
    ##
        anim.duration = 2;
    
        // 动画执行次数
        anim.repeatCount = MAXFLOAT;
    
        [_imageView.layer addAnimation:anim forKey:nil];
    

    CAKeyframeAnimation实现粒子效果

    • 步骤:
      1. 根据触摸绘制线段(粒子效果最好将所有线段都有一个路径管理,设置帧动画时才能赋值,帧动画不能赋值多个路径
      • 设置单个粒子,并设置复制层,加入到需要显示的layer层中 - 设置帧动画,让帧动画播放路径为绘制路径,将帧动画加入到显示的layer层中
    @interface DrawView ()
    //绿色点组图层
    @property (nonatomic, weak) CALayer *greenLayer;
    //粒子动画路径
    @property (nonatomic,strong)UIBezierPath *path;
    
    @end
    
    @implementation DrawView
    
    //懒加载路径
    - (UIBezierPath *)path
    {
        if (_path == nil) {
            _path = [UIBezierPath bezierPath];
        }
        return _path;
    }
    
    //懒加载绿色点组图层
    - (CALayer *)greenLayer
    {
        if (_greenLayer == nil) {
    
            // 创建复制层
            CAReplicatorLayer *repLayer = [CAReplicatorLayer layer];
            repLayer.frame = self.bounds;
    
            // 设置复制层的总份数
            repLayer.instanceCount = 10;
    
            // 设置动画延长的时间
            repLayer.instanceDelay = 0.3;
    
            [self.layer addSublayer:repLayer];
    
            // 绿色点
            CALayer *greenDot = [CALayer layer];
            greenDot.backgroundColor = [UIColor greenColor].CGColor;
    
            //开发中,一开始不用显示的可以移出屏幕范围
            greenDot.frame = CGRectMake(-1000, 0, 10, 10);
            greenDot.cornerRadius = 5;
            _greenLayer = greenDot;
    
            [repLayer addSublayer:greenDot];
        }
    
        return _greenLayer;
    }
    
    ## 根据触摸绘制线段并渲染
    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
    {
        // UITouch
        UITouch *touch = [touches anyObject];
    
        // 当前触摸点
        CGPoint curP = [touch locationInView:self];
    
        [self.path moveToPoint:curP];
    }
    
    - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
    {
        // UITouch
        UITouch *touch = [touches anyObject];
    
        // 当前触摸点
        CGPoint curP = [touch locationInView:self];
    
        [_path addLineToPoint:curP];
    
        // 重绘
        [self setNeedsDisplay];
    
    }
    
    ##绘制线段
    - (void)drawRect:(CGRect)rect {
    
        // 画线
        [_path stroke];
    }
    
    ## 帧动画
    - (void)startAnim
    {
        //设置帧动画
        CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    
        anim.keyPath = @"position";
        //设置帧动画路径
        anim.path = _path.CGPath;
    
        anim.duration = 2;
    
        anim.repeatCount = MAXFLOAT;
    
        [self.greenLayer addAnimation:anim forKey:nil];
    }
    

    相关文章

      网友评论

          本文标题:CAKeyframeAnimation

          本文链接:https://www.haomeiwen.com/subject/odtzvxtx.html