iphone - iOS UI Bezier 动画曲线，如何创建某种弧线？

Question

我很确定对于以前尝试过此操作的人来说，这是一个相当简单和直接的问题，但我对所谓的“高级”动画来说是个新手。

我正在尝试使用 CAKeyframeAnimation (使用“位置”关键路径)创建对象的以下移动

http://www.sumopaint.com/files/images800/aeegfexznpohlehd.jpg

我尝试使用 UIBezierPath 设置路径，但很快就感到困惑和沮丧，因为没有找到其背后的逻辑:)

我很想听听您对此有何看法......

这是我的基本代码(如果有更好的想法，也可以从头开始编写:P)

我还想在完成后淡出该对象。是否有这样一个选择器可以在动画完成时执行？ (例如 [UIView animateWithDuration] )？

UIBezierPath *thumbPath = [UIBezierPath bezierPath];
[thumbPath moveToPoint: P(99,270)];
[thumbPath addCurveToPoint:P(164,260) controlPoint1:P(164,280) controlPoint2:P(164,280)];
[thumbPath addCurveToPoint:P(164,260) controlPoint1:P(260,310) controlPoint2:P(260,310)];

CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = thumbPath.CGPath;
pathAnimation.duration = 2.0;

Answer 1

只是想与像我这样的 CAAnimation 菜鸟分享我发现的最简单的方法。

我没有使用 UIBezierPath ，而是在屏幕上手动编写路径的点 (x,y)，然后使用这些点创建路径，从而创建所需的曲线。非常有用且简单。

希望您觉得这有帮助:

NSArray *myPoints = [NSArray arrayWithObjects: 
                             [NSValue valueWithCGPoint:P(77,287)],
                             [NSValue valueWithCGPoint:P(97,270)],
                             [NSValue valueWithCGPoint:P(112,260)],
                             [NSValue valueWithCGPoint:P(130,250)],
                             [NSValue valueWithCGPoint:P(154,245)],
                             [NSValue valueWithCGPoint:P(174,250)],
                             [NSValue valueWithCGPoint:P(193,260)],
                             [NSValue valueWithCGPoint:P(210,270)],
                             [NSValue valueWithCGPoint:P(231,287)],
                             nil];

CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 77, 280);

for(NSValue *val in myPoints){
    CGPoint p = [val CGPointValue];
    CGPathAddLineToPoint(path, NULL, p.x, p.y);
}

CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = path;
CGPathRelease(path);