CABasicAnimation 真的很快吗？还是没有真正工作？对于圆形图

Posted 2023-03-13

【中文标题】CABasicAnimation 真的很快吗？还是没有真正工作？对于圆形图

【英文标题】：CABasicAnimation Really fast? or Not really working? for Circular Graphs

【发布时间】：2015-06-01 19:10:58

【问题描述】：

您好，我正在尝试为 UIBezier / CGPath 设置动画，它似乎正在快速移动。我尝试了一条缓和曲线，它似乎被忽略了。 虽然我觉得我应该是动画，但我没有为中风制作动画？这是它的样子。

// Perform animation with information.
    -(CABasicAnimation*) percentageChangeAnimation:(CGFloat) percent withLineWidth:(CGFloat) lineWidth andHighlightLayer:(CAShapeLayer*) highlightLayer
        // Address resize issue
        CGPoint center = [self centerOfGraphWithBounds:self.bounds];
        CGFloat radius =  [self radiusWithCenter:center andLineWidth:lineWidth];

        UIBezierPath* animateBeginValue = [self circularPathWithPercentage:0 andCenter:center andRadius:radius];
        UIBezierPath* animateEndValue = [self circularPathWithPercentage:percent andCenter:center andRadius:radius];

        CABasicAnimation* changeHighlight = [CABasicAnimation animationWithKeyPath:@"path"];

        // Property to animate uhh something odd going on... way to fast?
        changeHighlight.duration = 5.0;
        changeHighlight.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

        // begining path
        highlightLayer.path = [animateBeginValue CGPath];

        // CAST
        changeHighlight.fromValue = (id)[animateBeginValue CGPath];
        changeHighlight.toValue = (id)[animateEndValue CGPath];
        changeHighlight.fillMode = kCAFillModeForwards;

        // sync layer with model layer in a TODO
        // Don't remove revert to the model layer from the presentation layer.
        changeHighlight.removedOnCompletion = NO;

        [highlightLayer addAnimation:changeHighlight forKey:@"change"];

        // Id key for the animation
        return changeHighlight;
    

从灰色开始，这是一个单独的图层，顶部有一个高光图层 然后轨道层被紫色填充，但它似乎没有遵循缓动曲线

这几乎就好像它忽略了 CATiming 以及持续时间。 据我了解，路径可以设置动画。

编辑已解决：

// Perform animation with information.
-(CABasicAnimation*) percentageChangeAnimation:(CGFloat) percent withLineWidth:(CGFloat) lineWidth andHighlightLayer:(CAShapeLayer*) highlightLayer
    // Address resize issue
    CGPoint center = [self centerOfGraphWithBounds:self.bounds];
    CGFloat radius =  [self radiusWithCenter:center andLineWidth:lineWidth];

    /**
    UIBezierPath* animateBeginValue = [self circularPathWithPercentage:0 andCenter:center andRadius:radius];
    UIBezierPath* animateEndValue = [self circularPathWithPercentage:percent andCenter:center andRadius:radius];
    **/


    CABasicAnimation* changeHighlight = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    changeHighlight.duration = 2.0f;
    changeHighlight.fromValue = [NSNumber numberWithFloat:0.0f];
    changeHighlight.toValue = [NSNumber numberWithFloat:1.0f];


    /**
    CABasicAnimation* changeHighlight = [CABasicAnimation animationWithKeyPath:@"path"];


    // begining path

    highlightLayer.path = [animateBeginValue CGPath];
    // Property to animate uhh something odd going on...
    changeHighlight.duration = 5.0;
    changeHighlight.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    // CAST
    changeHighlight.fromValue = (id)[animateBeginValue CGPath];
    changeHighlight.toValue = (id)[animateEndValue CGPath];

  **/


    changeHighlight.fillMode = kCAFillModeForwards;

    // Don't remove revert to the model layer from the presentation layer.
    changeHighlight.removedOnCompletion = NO;
    highlightLayer.strokeColor = [[UIColor flatPurpleColor] CGColor];
    [highlightLayer addAnimation:changeHighlight forKey:@"change"];

    // Id key for the animation
    return changeHighlight;

现在我只需要调整图表百分比的计算。还是谢谢

【问题讨论】：

好的，所以我解决了这个问题，我应该使用笔画而不是计算新的 BezierPathe。所以我所做的是使用笔触来为路径设置动画。使突出显示的路径成为清晰的颜色，但使其成为完整的圆圈。然后从动画的高亮路径中改变笔触的颜色。

【参考方案1】：

上面的解决方法，你需要使用描边路径结束和开始。