0

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.

enter image description here

Mohd Haider
  • 673
  • 1
  • 5
  • 25
  • you can do this animation by setting multiple images to imageview with imageview property **@property(nonatomic, copy) NSArray *animationImages** – Saurabh Prajapati Apr 20 '15 at 08:27
  • 2
    I used this last year for playing animated gifs in app https://github.com/arturogutierrez/Animated-GIF-iPhone – Dan Atherton Apr 20 '15 at 08:38

4 Answers4

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.

Community
  • 1
  • 1
Mika
  • 5,807
  • 6
  • 38
  • 83
  • Thanks Mikael. But I have restriction that I can't use multiple images. Your answer will definitely work but I can't implement it in this way. I appreciate your quick answer but do we have any way to achieve this by single image? – Mohd Haider Apr 20 '15 at 10:34
  • there is no way to do this with a single image because the leafs overlap the branches. – Mika Apr 20 '15 at 10:41
  • For leafs we can use a different image view and image will have transparent background. So that we can see tree also. Main thing is that I need to achieve image appearing animation as for tree showing form root to top. – Mohd Haider Apr 20 '15 at 10:42
  • So I actually have images for tree, leafs , Ground Work text and bottom buttons. If I use array of images, then I need to use a lot of images. Which I can't because of restriction. – Mohd Haider Apr 20 '15 at 10:46
  • OK then you need to add a CAShapeLayer as a mask to your tree UIImage that is circular in shape. Then you need to animate the change in radius size. I will edit the answer with a few links but I can't write the code for you. – Mika Apr 20 '15 at 11:13
0

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.

Mohd Haider
  • 673
  • 1
  • 5
  • 25
-1

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.

Quang Hà
  • 4,613
  • 3
  • 24
  • 40
-1

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];
S Patel
  • 36
  • 2
  • Not very good practice to add another answer identical to one that is already there – Mika Apr 20 '15 at 09:00