Moving several UIImages over a UIBezierPath evenly spread

Question

I'm trying to create a View that has a UIBezierPath on it. This works now. I would like to place UIImages (random number of images) on that UIBezierPath and animate them on request all to the next step or the previous step. All images at once and all to the same direction.

Have been looking at all documentation now and i can't figure it out.

So hopefully somebody can help me or point me in the right direction.

I think you can compare it to some racecars that are chasing eachother, not gaining eachother and all starting on different locations. I want to move them to a next point by touch, so no loops needed.

score 2 · Answer 1 · answered Apr 05 '12 at 07:09

2

Take a look at this tutorial. Relevant code:

//create the image layer
CALayer *car = [CALayer layer];
car.bounds = CGRectMake(0, 0, 44.0, 20.0);
car.position = CGPointMake(160, 25);
car.contents = (id)([UIImage imageNamed:@"carmodel.png"].CGImage);
[self.view.layer addSublayer:car];

// animate it
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
anim.path = trackPath.CGPath;
anim.rotationMode = kCAAnimationRotateAuto;
anim.repeatCount = HUGE_VALF;
anim.duration = 8.0;
[car addAnimation:anim forKey:@"race"];

Add this animation for all layers(images).

answered Apr 05 '12 at 07:09

tipycalFlow

7,594
4
34
45

It's something i've seen and i already use some of those methods. Problem is spreading images over the path – stackr Apr 05 '12 at 09:13
Hey did you get the solution of spreading multiple images over uibezierpath? – Max_Rai Sep 09 '13 at 09:46
Add a `CAKeyframeAnimation` to each image's layer. You can use the same `CGPath` for each image's animation – tipycalFlow Sep 09 '13 at 11:18

score 1 · Accepted Answer · answered Apr 12 '12 at 02:56

You'll probably have to construct an array of UIBezierPaths, one for each segment. Keep track of where each UIImage is, and animate it moving along the appropriate segment.

This only works if you have discrete steps. It's a shame that you can't use the values property to restrict movement to a portion of the total path... but that gets ignored. It should be possible to subclass CAMediaTimingFunction to change its output range to something other than 0 to 1, but all the important pieces of that are private.

score 0 · Answer 3 · answered Jul 26 '12 at 06:42

0

You can use strokeStart and strokeEnd property to get a value from 0 to 1 in order to get your objects positioned over the path.

answered Jul 26 '12 at 06:42

Naveed Abbas

1,157
1
14
37

Moving several UIImages over a UIBezierPath evenly spread

3 Answers3