美文网首页
UI进阶路径动画

UI进阶路径动画

作者: geekAppke | 来源:发表于2018-05-24 22:11 被阅读5次
    UIBezierPath绘制路径
    - (UIBezierPath *)path
    {
        if (!_path) {
            _path = [UIBezierPath bezierPath];
        }
        return _path;
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        // 获取手触摸点
        UITouch *touch = [touches anyObject];
        CGPoint currentP = [touch locationInView:self];
        
        // 路径起点
        [self.path moveToPoint:currentP];
    }
    
    - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        // 获取手触摸点
        UITouch *touch = [touches anyObject];
        CGPoint currentP = [touch locationInView:self];
        
        // 不断添加点到某根线
        [self.path addLineToPoint:currentP];
        // 绘制出来
        [self setNeedsDisplay];
    }
    
    - (void)drawRect:(CGRect)rect
    {
        // 把路径画出来
        [self.path stroke];
    }
    




    搞一个和路径一样大的图层,绘制到屏幕上
    // 跟着路径动画
    - (void)startAnim
    {
        CAShapeLayer *layer = [CAShapeLayer layer];
        
        layer.path = self.path.CGPath;
        // 填充颜色,最后一个封闭的形状
        layer.fillColor = [UIColor whiteColor].CGColor;
        // 描边颜色
        layer.strokeColor = [UIColor redColor].CGColor;
        
        // 只画一部分
    //    layer.strokeEnd = 0.5;
        
        // 改变图层的某个熟悉
        CABasicAnimation *anim = [CABasicAnimation animation];
        anim.keyPath = @"strokeEnd";
        anim.fromValue = @0;
        anim.toValue = @1;
        anim.duration = 5;
        [layer addAnimation:anim forKey:nil];
        [self.layer addSublayer:layer];
        
        // 清空画线,图形还在,和路径一样图层
        [self clearAll];
    }
    
    - (void)clearAll
    {
        [self.path removeAllPoints];
        [self setNeedsDisplay];
    }
    

    相关文章

      网友评论

          本文标题:UI进阶路径动画

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