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

发布于 2024-11-30 05:48:47 字数 1019 浏览 5 评论 0原文

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

我试图使用 CAKeyframeAnimation (带有“位置”关键路径)

http://www.sumopaint.com/files/images800/aeegfexznpohlehd.jpg">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;

I'm pretty sure this is a rather simple and straightforward question for anyone that has ever tried this before , but i'm kind of a newbie to what you would call "advanced" animation.

I'm trying to create the following movement of an object by using CAKeyframeAnimation (with "position" key path)

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

I've tried setting the path with a UIBezierPath but got confused and frustrated pretty fast with not finding the logic behind it :)

I'd love to hear if you have an opinion about this...

This is my base code (which might as well be written from scratch if a better idea would occur :P)

Also i wanted to fade out the object on completion. is there such a selector that performs on animation completion? (such as [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;

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

奢望 2024-12-07 05:48:47

只是想与像我这样的 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);

Just wanted to share the simplest way i've found for doing this, for anyone who is a noob in CAAnimation such as myself.

Instead of using a UIBezierPath , i've just manually written the points on screen (x,y) for the path, and than created a path using those, thus creating the needed curve. Very useful and easy.

Hope you find this helpful:

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);
梦忆晨望 2024-12-07 05:48:47

实现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();
}

Implement touches methods, add a start point in the begin method

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

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

Now call the draw method in TouchMoved

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

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

The Draw method

- (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();
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文