iphone - 使用 CoreAnimation 对形状进行动画处理

Question

我凭经验接近核心动画和绘图。我正在尝试为一个简单的形状设置动画；所讨论的形状由 3 条线加上一条贝塞尔曲线形成。还绘制了一条红线，以显示曲线控制点。

alt text http://img.skitch.com/20091119-1ufar435jdq7nwh8pid5cb6kmm.jpg

我的主 Controller 只是添加此 subview ，并在每次 touchesEnd 时调用 adjustWave 方法。这是我的形状绘图类的代码。正如您所看到的，该类有一个属性 cp1x(贝塞尔曲线控制点 1 的 x)。这就是我想要设置动画的值。请注意，这是一个愚蠢的尝试......

- (void)drawRect:(CGRect)rect {
    float cp1y = 230.0f;
    float cp2x = 100.0f;
    float cp2y = 120.0f;

    CGContextRef ctx = UIGraphicsGetCurrentContext(); 
    CGContextClearRect(ctx, rect);

    CGMutablePathRef path = CGPathCreateMutable(); 
    CGPathMoveToPoint(path, NULL, 10.0f, 200.0f); 
    CGPathAddCurveToPoint (path, NULL, cp1x, cp1y, cp2x, cp2y, 300.0f, 200.0f);
    CGPathAddLineToPoint(path, NULL, 300.0f, 300.0f); 
    CGPathAddLineToPoint(path, NULL, 10.0f, 300.0f); 
    CGPathCloseSubpath(path); 
    CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor); 
    CGContextAddPath(ctx, path); 
    CGContextFillPath(ctx);

    // Drawing a line from control points 1 and 2
    CGContextBeginPath(ctx);
    CGContextSetRGBStrokeColor(ctx,1,0,0,1);
    CGMutablePathRef cp1 = CGPathCreateMutable(); 
    CGPathMoveToPoint(cp1, NULL, cp1x, cp1y); 
    CGPathAddLineToPoint(cp1, NULL, cp2x, cp2y); 
    CGPathCloseSubpath(cp1); 
    CGContextAddPath(ctx, cp1); 
    CGContextStrokePath(ctx);
}

- (void)adjustWave {
    [UIView beginAnimations:@"movement" context:nil]; 
    [UIView setAnimationDelegate:self]; 
    [UIView setAnimationWillStartSelector:@selector(didStart:context:)]; 
    [UIView setAnimationDidStopSelector:@selector(didStop:finished:context:)]; 
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    [UIView setAnimationDuration:3.0f]; 
    [UIView setAnimationRepeatCount:3]; 
    [UIView setAnimationRepeatAutoreverses:YES]; 
    cp1x = cp1x + 20.0f;
    [UIView commitAnimations];
}

形状没有改变。相反，如果我取出 CA 代码并在最后一个方法中添加一个简单的“[self setNeedsDisplay]”，则形状会发生变化，但显然没有 CA。你能帮助中小企业吗？我确信我在这里犯了一个非常基本的错误......提前致谢，达维德

Answer 1

如果您是为 iPhone OS 3.x(或 Snow Leopard)编写此内容，则新的 CAShapeLayer class应该可以让你很容易地制作这种动画。如果您的路径保持相同数量的控制点(如您的情况)，则可以将该路径设置为 CAShapeLayer，然后将路径属性从该起始值设置为最终路径的动画。核心动画将对路径中的控制点执行适当的插值，以在这两种状态之间进行动画处理(如果您使用 CAKeyframeAnimation，则更多)。

请注意，这是一个图层，因此您需要将其添加为 UIView 的子图层。另外，我不认为路径属性隐式动画，因此您可能需要手动创建 CABasicAnimation 来动画形状从路径 1 到路径 2 的变化。

编辑(2009 年 11 月 21 日):Joe Ricioppo 有一篇关于 CAShapeLayer 的精彩文章 here ，包括一些展示此类动画的视频。