美文网首页
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进阶路径动画

    UIBezierPath绘制路径 搞一个和路径一样大的图层,绘制到屏幕上

  • T2第三天

    今天学习了希沃交互式课件备课进阶教程,学习了利用色差、路径动画、旋转动画、触发器等,来设置动画效果,让课堂交互效果...

  • Bezier曲线

    参考自iOS开发 贝塞尔曲线UIBezierPath和iOS-UI进阶13 - 贝塞尔曲线和帧动画结合 使用UIB...

  • Runtime图形总结

    RunTime基础 基础路径图: RunTime进阶 进阶路径图: 消息机制: objc_msgSend objc...

  • iOS的UI 进阶(Swift),UI -> IB: @I

    iOS的UI 进阶(Swift),UI -> IB: @IBDesignable, @IBInspectable

  • iOS学前tips

    学习大体路径 1 UI 2 多线程网络 3 HTML5 4 项目实战 5 实用技术 6 一些进阶技术 7 Swif...

  • Day3——路径动画

    今天学习路径动画,进阶了。 注意事项1.画正圆,需要设置像素纵横比:2.新建形状,不要选中当前图层,否则,形状会新...

  • iOS篇-UI篇-CoreAnimation(核心动画)

    iOS篇-UI篇-CoreAnimation(核心动画) iOS篇-UI篇-CoreAnimation(核心动画)

  • laya动画播放

    1.直接拖拽资源到属性面板,代码里面获取播放2.动画在UI上,直接UI["动画名"]获取动画播放

  • 路径动画

    自定义view -懒加载路径 -触摸方法 -移动手指把路径添加到path中 -开始绘制 -开始动画点击

网友评论

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

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