对贝塞尔曲线点进行动画处理

我正在尝试对用 Paintcode （很棒的应用程序，顺便说一句）制作的贝塞尔曲线进行动画处理，并在“drawRect”方法中的自定义 UIView 中进行绘制。

绘图工作正常，但我想为贝塞尔曲线中的单个点设置动画。

这是我的非工作方法：

-(void)animateFlame{
    NSLog(@"Animating");
    // Create the starting path. Your curved line.
    //UIBezierPath * startPath;
    // Create the end path. Your straight line.
    //UIBezierPath * endPath = [self generateFlame];
    //[endPath moveToPoint: CGPointMake(167.47, 214)];

    int displacementX = (((int)arc4random()%50))-25;
    int displacementY = (((int)arc4random()%30))-15;
    NSLog(@"%i %i",displacementX,displacementY);

    UIBezierPath* theBezierPath = [UIBezierPath bezierPath];
    [theBezierPath moveToPoint: CGPointMake(167.47, 214)];
    [theBezierPath addCurveToPoint: CGPointMake(181+displacementX, 100+displacementY) controlPoint1: CGPointMake(89.74, 214) controlPoint2: CGPointMake(192.78+displacementX, 76.52+displacementY)];
    [theBezierPath addCurveToPoint: CGPointMake(167.47, 214) controlPoint1: CGPointMake(169.22+displacementX, 123.48+displacementY) controlPoint2: CGPointMake(245.2, 214)];
    [theBezierPath closePath];
    // Create the shape layer to display and animate the line.
    CAShapeLayer * myLineShapeLayer = [[CAShapeLayer alloc] init];

    CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    pathAnimation.fromValue = (__bridge id)[bezierPath CGPath];
    pathAnimation.toValue = (__bridge id)[theBezierPath CGPath];
    pathAnimation.duration = 0.39f;
    [myLineShapeLayer addAnimation:pathAnimation forKey:@"pathAnimation"];

    bezierPath = theBezierPath;
}

使用此功能，屏幕上根本没有任何移动。生成的随机位移很好，并且 bezierPath 变量是使用类范围声明的 UIBezierPath。

我错过了什么吗？ （目标是制作一种类似蜡烛的动画）

快速编辑刚刚看到你的图层代码。您混淆了几个不同的概念。像drawRect，CAShapeLayer，旧的动画代码等等......

通过执行下面的方法，您应该能够实现此目的。

你不能这样做:(你不能对drawRect的内容进行动画处理（即你不能让它在动画过程中多次绘制）。

您也许可以使用计时器或其他东西来创建自己的动画类型代码。 （即创建一个每秒触发 30 次的计时器并运行一个函数来计算您在动画中的位置并更新您想要更改的值并调用[self setNeedsDisplay];触发绘制矩形方法。

除此之外，你无能为力。

另一个编辑

只是在这里添加另一个选项。使用 CAShapeLayer 执行此操作可能会导致性能非常差。您可能最好将 UIImageView 与一系列 UIImage 一起使用。

UIImageView 上有内置属性、animationImages、animationDuration 等。

可能的解决方案

The path的财产CAShapeLayer是可动画的，所以你可以使用它。

就像是...

// set up properties for path
@property (nonatomic, assign) CGPath startPath;
@property (nonatomic, assign) CGPath endPath;
@property (nonatomic, strong) CAShapeLayer *pathLayer;

// create the startPath
UIBezierPath *path = [UIBezierPath //create your path using the paint code code
self.startPath = path.CGPath;

// create the end path
path = [UIBezierPath //create your path using the paint code code
self.endPath = path.CGPath;

// create the shapee layer
self.pathLayer = [CAShapeLayer layer];
self.pathLayer.path = self.startPath;
//also set line width, colour, shadows, etc...

[self.view.layer addSubLayer:self.pathLayer];

那么你应该能够像这样为路径设置动画......

- (void)animatePath
{
    [UIView animateWithDuration:2.0
        animations^() {
            self.pathlayer.path = self.endPath;
    }];
}

文档中有很多关于 CAShapeLayer 和动画路径属性的注释。

不过这应该可行。

另外，摆脱旧的动画代码。自 iOS4.3 以来它已经消失了，您应该使用更新的块动画。