用CAShapeLayer和UIBezierPath和CABaseAnimation制作動畫折線圖


 // 創建layer並設置屬性
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.lineWidth =  2.0f;
    layer.lineCap = kCALineCapRound;
    layer.lineJoin = kCALineJoinRound;
    layer.strokeColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:layer];
    
    // 創建貝塞爾路徑~
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 100)];
    [path addLineToPoint:CGPointMake(100, 200)];
    [path addLineToPoint:CGPointMake(200, 50)];
    [path addLineToPoint:CGPointMake(240, 150)];
    [path addLineToPoint:CGPointMake(300, 120)];
    
    // 關聯layer和貝塞爾路徑~
    layer.path = path.CGPath;
    
    // 創建Animation
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = @(0.0);
    animation.toValue = @(1.0);
    layer.autoreverses = NO;
    animation.duration = 2.0;
    
    // 設置layer的animation
    [layer addAnimation:animation forKey:nil];
    
    // 第一種設置動畫完成,不移除結果的方法
    //    animation.fillMode = kCAFillModeForwards;
    //    animation.removedOnCompletion = NO;
    
    // 第二種
    layer.strokeEnd = 1;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM