PDA

View Full Version : how to animate an image to follow a line




mandude
Nov 22, 2009, 12:57 AM
hi i have a line that is created everytime the user taps the screen going from one constant point (150, 150) to the point the user taps. I would like an image (image.png) to move from right to left along this line when the line appears, and when the picture reaches the end of the line.. disappears. heres the code of the line when the user taps :


CGContextMoveToPoint(context, 150.0, 150.0);
CGContextAddLineToPoint(context, touch.x, touch.y);
CGContextStrokePath(context);



heres the arc:
CGContextMoveToPoint(context, 220.0, 200.0);
CGContextAddQuadCurveToPoint(context, 150.0, 20.0, firstTouch.x, firstTouch.y);
CGContextStrokePath(context);



dejo
Nov 22, 2009, 11:02 AM
I'd start by looking at the MoveMe (http://developer.apple.com/iphone/library/samplecode/MoveMe/index.html) sample app.

mandude
Nov 22, 2009, 01:24 PM
thanks for the reply, but the MoveMe app doesn't see, to meet the criteria i need. I need and image to follow an arc that is prduced

alexandergre
Nov 22, 2009, 01:44 PM
thanks for the reply, but the MoveMe app doesn't see, to meet the criteria i need. I need and image to follow an arc that is prduced

I would also like to know that.

dejo
Nov 22, 2009, 03:41 PM
I need and image to follow an arc that is prduced
An arc? Your OP said a line. MoveMe has an image move along a line.

Darkroom
Nov 22, 2009, 08:59 PM
i think you can still follow with Move Me example, replacing CGPathAddLineToPoint with CGPathAddArcToPoint to achieve what you want.

check out CGPath Reference (http://developer.apple.com/IPhone/library/documentation/GraphicsImaging/Reference/CGPath/Reference/reference.html) in the docs.

mandude
Nov 22, 2009, 09:10 PM
yes you're right i can create a path that is the same here is the code, but i now need to know how to make the image appear and start to follow the path in the "EaseIn" animation curve type.


// Making the red line appear where the arc is.
CGContextMoveToPoint(context, 220.0, 200.0);
CGContextAddQuadCurveToPoint(context, 150.0, 20.0, firstTouch.x, firstTouch.y);
CGContextStrokePath(context);
//making the same animation path as the red line will show.
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath, NULL, 220.0, 200.0);
CGPathAddQuadCurveToPoint(thePath, NULL, 150.0, 20.0, firstTouch.x, firstTouch.y);