UIView animations on a path not linear

Question

Possible Duplicate:
How can I animate the movement of a view or image along a curved path?

I have an iOS application that I want to animate a falling leaf (or several). I have my leaf image in an ImageView and I've figured out a simple animation from the documentation:

[UIView animateWithDuration:4.0f
                          delay:0
                          options:UIViewAnimationTransitionFlipFromLeft
                          animations:^(void)
                          {
                              leaf1ImageView.frame = CGRectMake(320, 480, leaf1ImageView.frame.size.width,leaf1ImageView.frame.size.height);
                          }
                          completion:NULL];

This will make the leaf go from its starting position to the bottom right corner in a straight line. How would I animate this to follow a path or curve like a parabola or sinusoid and maybe even rotate the image or view? Would this be done in the animations block? Thanks in advance!

score 10 · Accepted Answer · answered Sep 01 '12 at 22:01

10

You can do this with a CAKeyframeAnimation and a CGPath. The code looks something like this:

CAKeyframeAnimation *leafAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
leafAnimation.duration = 10.0;
leafAnimation.path = /* your CGPathRef */;
[leaf1ImageView.layer addAnimation:leafAnimation forKey:@"leafAnimation"];

answered Sep 01 '12 at 22:01

Felix

35,354
13
96
143

But if I use this I cannot get the position of UIView while animating them. – Sanjith Bravo Dastan Oct 19 '16 at 08:22

score 1 · Answer 2 · edited May 23 '17 at 11:46

1

The thing you are looking for is animating along a Bezier CGPath. For more details see this question:

How can I animate the movement of a view or image along a curved path?

Creating bezier paths in code is rather hard though, for easier ways to create a bezier curve to animate along look through the answers to the question here:

Drawing bezier curves with my finger in iOS?

edited May 23 '17 at 11:46

Community

1
1

answered Sep 01 '12 at 22:07

Kendall Helmstetter Gelner

74,769
26
128
150

the linked question is about drawing, but this question is about animation! – Felix Sep 01 '12 at 22:12
1

You need to define the path before you can animate on it. Defining Bezier Paths in code alone is nigh impossible, hence I linked to a useful resource. You'll note my answer DOES address animation. I agree though my answer was rather murky, so I added more detail, another link, and clarified why I was adding the drawing link. – Kendall Helmstetter Gelner Sep 01 '12 at 22:15
Yes, this is a good reference and is very useful – chis54 Sep 02 '12 at 19:55

UIView animations on a path not linear

2 Answers2