iOS Bezier 动画曲线，如何创建某种弧线？答案

【问题标题】：iOS UIBezierAnimation curves, howto to create some sort of arc?iOS Bezier 动画曲线，如何创建某种弧线？
【发布时间】：2011-08-18 22:19:13
【问题描述】：

我敢肯定，对于曾经尝试过此功能的任何人来说，这是一个相当简单直接的问题，但对于所谓的“高级”动画，我还是个新手。

我正在尝试使用 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;

【问题讨论】：

不清楚你遇到了什么问题。
嘿，只是为了简化我的问题 - 我没有问题，我只是在寻找一个示例代码，它可以创建将对象从 A 点移动到 B 点的动画那弧线的形状......
OK... 看起来您已经有了使用该路径进行动画的代码。你有什么问题吗？
好吧，我写下的代码只是我乱来的结果，它并没有像我想要的那样在弯曲的路径上工作，而且 - 我真的不明白它背后的逻辑，所以如果有人能解释 addCurveToPoint 的用法以及如何使用它来创建这种动画，那就太棒了:)

标签： iphone animation core-animation cakeyframeanimation uibezierpath

【解决方案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);

【讨论】：

【解决方案2】：

实现touches方法，在begin方法中添加起点

- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:myImageView];
    StartDrawPoint = point;
}

现在在 TouchMoved 中调用 draw 方法

-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{

    UITouch *touch = [touches anyObject];
    CGPoint currentTouchPoint = [touch locationInView:myImageView];
    [self drawline:currentTouchPoint ToPoint:StartDrawPoint];
}

Draw 方法

- (void)drawline:(CGPoint)FromPoint ToPoint:(CGPoint)ToPoint{
   UIGraphicsBeginImageContext(myImageView.frame.size);
    CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 1.0,1.0,1.0, 1.0);
    [imgView.image drawInRect:CGRectMake(0, 0, myImageView.frame.size.width, myImageView.frame.size.height)];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:FromPoint];
    [path addLineToPoint:ToPoint];
    [path setLineWidth:5.0f];
    [path stroke];
    [path closePath];
    myImageView.image = UIGraphicsGetImageFromCurrentImageContext();    
    UIGraphicsEndImageContext();
}

【讨论】：