iOS UIBezierAnimation curves, howto to create some sort of arc?
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;
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);
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();
}
上一篇: 没有从我的模型返回JSON？