如何在iOS中实现此动画？

Question

I am not sure about how to present this question because I don't know the animation term that I should use.

I need to know about this tree presentation animation. As it is appearing form root to top.

Please take a look on attached .gif file and let me know if anyone know about this animation or if you can guide me with example.

I will really appreciate.

Thanks for your time.

Answer 1

The best option for you is to split up the gif into multiple images and then do the following:

NSArray *gifImagesArray = [NSArray arrayWithObjects:imageOne, imageTwo, imageThree, nil];
imageView.animationImages      = animateImagesArray;
imageView.animationRepeatCount = 1;
imageView.animationDuration    = 1.0f;
[imageView startAnimating];

Edit following comments:

If you can't use multiple images you have to write the animation yourself.

One suggestion is to add a circular mask to the UIImage and animate it's removal. This link explains how to draw a circular CALayer: Circular Progress Bars in IOS

This one here will show you how to create a mask on a UIImage: Simply mask a UIView with a rectangle

now all you have to do is a simple animation.

Answer 2

I have a solution that will work for this problem. We can use gif image and convert it into UIImage object. So image object will work same as animation.

Thanks all for your answers.

Answer 3

In my opinion, I will separate this animation to 4 parts:

1. animation to show full black tree from center.
2. animation to show Texts
3. animation to show blue leafs.
4. animation to show 2 buttons at bottom.

You can use this framework https://github.com/facebook/pop to operate all animations step by step or even Core Animation. Please do more research... I think you will success to make one.

Answer 4

You can achieve this animation using simple UIImageView, that can load multiple images using animationImages property of UIImageView.

First, create one NSMutablerArray of images. then asssign that images to imageView, and animationDuration for that images.

UIImageView *animationImageView = [[UIImageView alloc]  initWithFrame:CGRectMake(60, 95, 86, 193)];
animationImageView.animationImages = images;
animationImageView.animationDuration = 0.5;

add the imageview to view.

[self.view addSubview:animationImageView];
[animationImageView startAnimating];