美文网首页贝塞尔曲线及各种动画
iOS利用贝塞尔曲线和CAShapeLayer创建横向带动画柱状

iOS利用贝塞尔曲线和CAShapeLayer创建横向带动画柱状

作者: JasonEVA | 来源:发表于2016-06-28 11:37 被阅读1084次
    //创建出CAShapeLayer
    
    self.shapeLayer= [CAShapeLayer layer];
    
    //self.shapeLayer.frame = self.view.frame;//设置shapeLayer的尺寸和位置
    
    self.shapeLayer.fillColor= [UIColor clearColor].CGColor;//填充颜色为ClearColor
    
    //设置线条的宽度和颜色
    
    self.shapeLayer.lineWidth=30.0f;
    
    self.shapeLayer.strokeColor= [UIColor greenColor].CGColor;
    
    //创建出贝塞尔曲线
    
    UIBezierPath*circlePath = [UIBezierPath bezierPath];
    
    [circlePath moveToPoint:CGPointMake(20,200)];
    
    [circlePath addLineToPoint:CGPointMake(200,200)];
    
    //让贝塞尔曲线与CAShapeLayer产生联系
    
    self.shapeLayer.path= circlePath.CGPath;
    
    //添加并显示
    
    [self.view.layer addSublayer:self.shapeLayer];
    
    // Do any additional setup after loading the view.
    
    CABasicAnimation*pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    
    pathAnimation.duration=1.0f;
    
    pathAnimation.timingFunction= [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    pathAnimation.fromValue=@0.0f;
    
    pathAnimation.toValue=@(1);
    
    [self.shapeLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
    

    相关文章

      网友评论

        本文标题:iOS利用贝塞尔曲线和CAShapeLayer创建横向带动画柱状

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