美文网首页
路径动画

路径动画

作者: Areyouhere | 来源:发表于2017-03-20 09:02 被阅读0次
@interface HJHPullDownView : UIView
- (void)startAnim;

@end
@interface HJHPullDownView ()

@property (nonatomic ,retain) UIBezierPath *path;
@property (nonatomic ,retain) CAShapeLayer * shapeLayer ;
@end

@implementation HJHPullDownView

- (UIBezierPath *)path
{
    if (!_path)
    {
        _path = [UIBezierPath bezierPath];
    }
    return _path;
}
- (CAShapeLayer *)shapeLayer
{
    if (!_shapeLayer)
    {
        _shapeLayer = [CAShapeLayer layer];
    }
    return _shapeLayer;
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    // 清空画线
    [_shapeLayer removeFromSuperlayer];
    
    UITouch *touch = [touches anyObject];
    // 获取手指的触摸点
    CGPoint curP = [touch locationInView:self];
    
    [self.path moveToPoint:curP];
}
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    
    // 获取手指的触摸点
    CGPoint curP = [touch locationInView:self];
    
    [self.path addLineToPoint:curP];
    [self setNeedsDisplay];
    
}
- (void)drawRect:(CGRect)rect
{
    [self.path stroke];
}
// 跟随路径而动画
- (void)startAnim
{    
    self.shapeLayer.path = self.path.CGPath;
    
    _shapeLayer.fillColor = [UIColor whiteColor].CGColor;
    
    _shapeLayer.strokeColor = [UIColor redColor].CGColor;
    
    _shapeLayer.strokeEnd = 1; //图层画百分之多少
    
    [self.layer addSublayer:_shapeLayer];
    
    CABasicAnimation *anim = [CABasicAnimation animation];
    
    anim.keyPath = @"strokeEnd";
    
    anim.fromValue = @0;
    
    anim.toValue = @1;
    
    anim.duration = 2;
    
    [_shapeLayer addAnimation:anim forKey:nil];
    
    
    // 清空画线
    [self.path removeAllPoints];
    
    [self setNeedsDisplay];
}
@end

621EF14B-F26B-4B5E-B746-8FBB0191861F.png

点击按钮开始 描绘上面的路径动画

51AE4F8C-32D5-4CA3-82FB-7A603A8A412A.png

相关文章

  • 路径动画

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

  • 路径动画

    点击按钮开始 描绘上面的路径动画

  • cocos creator动画编辑器编辑地图路径

    思路 1、利用动画编辑器,设置一个路径,多个路径就编辑多个动画 2、用特定的代码对动画进行处理,获取到路径坐标,大...

  • iOS路径动画创建

    //路径动画,三步曲 //1,创建路径path1, //2,创建视图view //3,创建关键帧动画animati...

  • 路径动画(波浪)

  • SVG 路径动画

    简单百搭普普通通平平无奇 SVG 路径动画优化网站效果, 如何实现一个 SVG 进度条动画以及虚线走马灯动画 我习...

  • 动画

    CABasicAnimation基础核心动画 缩放动画 图片抖动 根据圆形的路径做移动的效果. 转场动画 创建转场...

  • CAKeyframeAnimation

    动画分类: CAKeyframeAnimation:属性说明: path: 路径 calculationMode:...

  • 浅谈swift动画(四)

    CAKeyframeAnimation 1.透明度动画 2.路径动画 动画组 1.旋转缩小平移 2.按钮点击

  • Android的View动画

    View动画 建议采用XML来定义动画文件路径(res/anim/filename.xml) 包括四种动画 平移动...

网友评论

      本文标题:路径动画

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