iOS UIBezierAnimation曲线,如何创建某种弧形?

时间:2011-08-18 22:19:14

标签: iphone animation core-animation cakeyframeanimation uibezierpath

我很确定这对于之前曾尝试过这个问题的人来说是一个相当简单明了的问题,但我对你称之为“高级”动画的人来说是个新手。

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

2 个答案:

答案 0 :(得分:6)

只想分享我为此做的最简单的方法,对于任何像CAAnimation这样的人来说,比如我自己。

我只是手动在屏幕(x,y)上为路径编写点,而不是使用UIBezierPath,而是使用这些点创建路径,从而创建所需的曲线。非常有用和容易。

希望您觉得这很有用:

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);

答案 1 :(得分:-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();
}