使用CoreAnimation对形状进行动画处理 [英] Animating a shape with CoreAnimation

问题描述

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

I approaching core animation and drawing empirically. I am trying to animate a simple shape; the shape in question is formed by 3 lines plus a bezier curve. A red line is also drawn, to show the curve control points.

我的主控制器只是添加这个子视图，并调用 adjustWave c $ c> touchesEnd 。
下面是我的形状绘制类的代码。正如你看到的类有一个属性，cp1x（贝塞尔控制点1的x）。这是我想要动画的价值。这是一个愚蠢的尝试...

My main controller simply adds this subview and calls the adjustWave method whenever touchesEnd. Here is the code for my shape drawing class. As you see the class has one property, cp1x (the x of the bezier control point 1). This is the value I would like to animate. Mind, this is a dumb attempt ...

- (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。
你能帮助sme吗？我确信我在这里犯了一个很基本的错误...
提前感谢，
Davide

The shape doesn't change. If, conversely, I take out the CA code and add a simple `[self setNeedsDisplay] in the last method the shape changes, but obviously without CA. Can you help sme? I am sure I am making a very basic mistake here… Thanks in advance, Davide

推荐答案

如果您正在为iPhone OS 3.x（或Snow Leopard）编写此文档，则新的 CAShapeLayer类应该让你很容易做这种动画。如果您有一个路径维护相同数量的控制点（如在您的情况下），您可以设置该路径到CAShapeLayer，然后动画路径属性从该起始值到最终路径。 Core Animation将对路径中的控制点进行适当的插值，以便在这两个状态之间进行动画处理（更多地，如果使用CAKeyframeAnimation）。

If you are writing this for iPhone OS 3.x (or Snow Leopard), the new CAShapeLayer class should let you do this kind of animation pretty easily. If you have a path that maintains the same number of control points (like in your case), you can set that path to the CAShapeLayer, then animate the path property from that starting value to your final path. Core Animation will perform the appropriate interpolation of the control points in the path to animate it between those two states (more, if you use a CAKeyframeAnimation).

一个图层，所以你需要将它添加为你的UIView的子图层。此外，我不相信path属性隐式动画，所以你可能需要手动创建一个CABasicAnimation来动画的形状从路径1到路径2的变化。

Note that this is a layer, so you will need to add it as a sublayer of your UIView. Also, I don't believe that the path property implicitly animates, so you may need to manually create a CABasicAnimation to animate the change in shape from path 1 to path 2.

EDIT（11/21/2009）：Joe Ricioppo对CAShapeLayer有一个很好的写法这里，包括一些展示这些动画的视频。

EDIT (11/21/2009): Joe Ricioppo has a nice writeup about CAShapeLayer here, including some videos that show off these kinds of animations.

这篇关于使用CoreAnimation对形状进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！