为贝塞尔曲线的一个点设置动画

Question

是否可以为贝塞尔曲线的点设置动画？我正在尝试从一条线到箭头的平滑过渡。

以下是代码

中的行

//// Color Declarations
UIColor* white = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 0.374];

//// Group
{
    //// Bezier Drawing
    UIBezierPath* bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint: CGPointMake(30.5, 43.5)];
    [bezierPath addLineToPoint: CGPointMake(30.5, 29.59)];
    [bezierPath addLineToPoint: CGPointMake(30.5, 15.5)];
    bezierPath.lineCapStyle = kCGLineCapRound;

    bezierPath.lineJoinStyle = kCGLineJoinBevel;

    [white setStroke];
    bezierPath.lineWidth = 5.5;
    [bezierPath stroke];
}

...但是我不知道如何选择一个点并为此制作动画。这甚至可能吗？

Answer 1

使用CAShapeLayer显式CGPath动画：

// Create the starting path. Your curved line.
UIBezierPath * startPath; 
// Create the end path. Your straight line.
UIBezierPath * endPath; 

// Create the shape layer to display and animate the line.
CAShapeLayer * myLineShapeLayer = [[CAShapeLayer alloc] init];

CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
pathAnimation.fromValue = (__bridge id)[startPath CGPath];
pathAnimation.toValue = (__bridge id)[endPath CGPath];
pathAnimation.duration = 5.0f;
[myLineShapeLayer addAnimation:pathAnimation forKey:@"animationKey"];

Answer 2

目前尚不清楚你在问什么。您是否尝试通过移动其中一个控制点来动画更改线条的形状？

为路径更改设置动画的方法是创建CAShapeLayer并将其安装为视图图层的子图层。然后，如果更改与形状图层关联的路径，系统将使用隐式动画进行更改。

请注意，形状图层中的路径需要具有相同数量/类型的控制点，或者动画的结果是“未定义的”。