Text and Image effect/animation

[murad357]

Hello All,

This is the very first post of mine in this forum (and I am a very new on iPhone development world).

I would like to know what would be the best way to create a Image and also Text effect (similar to what we can do in Microsoft power point).

For example, flying a Letter of a Text from left side and place it in between the Text. For image effect, Check the link below to see a Google image. If I want to place the plane (which is in the picture) flying out from left side of the window and place it as same as in the picture, what would be the best way to do it?

Google's Doodles: 10 of the best including UFOs and Googlle - Telegraph

I hope I was able to explain what I want to accomplish. Thank you in advance.

[Duncan C]

Originally Posted by murad357

Hello All,

This is the very first post of mine in this forum (and I am a very new on iPhone development world).

I would like to know what would be the best way to create a Image and also Text effect (similar to what we can do in Microsoft power point).

For example, flying a Letter of a Text from left side and place it in between the Text. For image effect, Check the link below to see a Google image. If I want to place the plane (which is in the picture) flying out from left side of the window and place it as same as in the picture, what would be the best way to do it?

Google's Doodles: 10 of the best including UFOs and Googlle - Telegraph

I hope I was able to explain what I want to accomplish. Thank you in advance.

iOS includes a set of animation tools called Core Animation.

The simplest way to use it is to do UIView animation. If you have an image view called theImageView that you want to animate across the screen from left to right, you could do something like this:

CGPoint center = theImageView.center;

// move the image off-screen to the left:
center.x = -theImageView.bounds.width; 
theImageView.center = center;

//Unhide the image view while it's off-screen.
theImageView.hidden = FALSE;

[UIImageView animateWithDuration: 0.5 
animations: ^{
  center.x = self.view.bounds.center;
}];

That would cause the image to slide from off-screen on the left to the center of the screen.

The code is written assuming the image starts out hidden. it moves the image view off-screen, makes it visible, and then creates an animation that slides the image view onto the screen.

There are lots of other things you can do with the simple animateWithDuration:animation: method.

Views are backed by something called CALayer, and you can do a bunch of different animations (called implicit animations) simply by changing the properties of a view's layer.

There is also a special family of animation objects called CAAnimation that lets you do all kinds of cool stuff.

There's a great demo Core Animation application called "tapharmonic-Core-Animation-Demos" by a guy named Bob McCune. You can download it from GitHub at this link:

https://github.com/tapharmonic/Core-Animation-Demos

[murad357]

Great!!! Thank you for your quick reply. I will check the code later and try to run it. Thank you again.

[murad357]

Hello Duncan,

Hope you are doing great. Quick question, as per your sample code the image will come from left to right similar to image slide. Would you give me some suggestions what to do if I want to fly out the image, like flying out in a Curve (like 'U' shaped path) and set it somewhere at the end?


Thank you again for your help ...

[Duncan C]

Originally Posted by murad357

Hello Duncan,

Hope you are doing great. Quick question, as per your sample code the image will come from left to right similar to image slide. Would you give me some suggestions what to do if I want to fly out the image, like flying out in a Curve (like 'U' shaped path) and set it somewhere at the end?


Thank you again for your help ...

You want your image to follow a curve path instead of a straight line?

That's doable, but quite a bit more complex. You have to create a Core Animation object called a CAKeyframeAnimation, and attach it to your view's layer. You use a CGPath object (the Core Foundation equivalent of a UIBezierPath) to describe the curve you want your object to follow.


If you take a look at the tutorial on core animation linked in my signature, there's an example of animating an object along a curved path. The method to look for is called animateEgg. It's part of a fairly complex series of animations, so it includes a bunch of stuff you won't need like using a counter to find one of a group of different image view objects to animate (It animates a whole group of easter eggs from a fixed point into a pile, where each egg follows an arced path. Each egg also grows from a reduced size to full size during the animation by combining a UIView animation to the view's transform property.)

Marcus Zarra has a book on Core Animation that's pretty good. If you want to learn more about the subject, I suggest you buy that book. The section on keyframe animation is fairly short and sweet.