ios Animation Image Expanding from within a circle

Question

I have a page in my app in which there is user's profile pic in a circle as its there in Twitter profile page.

I have to add a functionality such that when I tap on it, the image should expand. Animation needs to be added in such a way that a new bigger circle should slowly appear from the centre of the smaller circle and reach the centre of the screen.

Any ideas as to how this can be implemented?

Maverick · Accepted Answer · 2015-09-09T10:41:19.227

0

Try UIView Animation block with changing bigger circle's position, size, alpha, and corner radius (if required).

Place your bigger circle (with smaller size initially) on top of smaller circle and hide it initially. Then before animation, un-hide it and animate using a block like this:

[UIView animateWithDuration:1.0 animations:^{
        // set bigger circle destination position i.e. centre of screen
        // set bigger circle final size
        // set other properties like alpha, corner radius etc
    } completion:nil];

edited Sep 09 '15 at 10:41

answered Sep 07 '15 at 08:12

Maverick

3,209
1
34
40

Thanks a lot for your suggestion! – Kavita Kanwar Sep 09 '15 at 06:28

score 0 · Answer 2 · answered Sep 07 '15 at 08:51

0

Use CATransform3DScale transform and UIView Animation

CATransform3D avatarTransform = CATransform3DIdentity;
avatarTransform = CATransform3DScale(avatarTransform, avatarScaleFactor,avatarScaleFactor, 0);


[UIView animateWithDuration:1.0 animations:^{
    //Change the frame to reach the center of screen
    self.avatar.layer.transform = headerTransform
} completion:nil]

answered Sep 07 '15 at 08:51

Mukesh

3,680
1
15
32

Thanks for your suggestion. But, I do not have to animate the same imageview. – Kavita Kanwar Sep 09 '15 at 06:29

score 0 · Answer 3 · edited May 23 '17 at 11:58

You can simply use CGAffineTransformScale and scale your ImageView inside UIView's animateWithDuration block.

imgV.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.0, 0.0);

[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseInOut
                 animations:^{
                     imgV.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.0, 1.0);

                 }
                 completion:^(BOOL finished) {
                    NSLog(@"done");
                 }];

For further references you can look into these Stackoverflow questions :

Thanks for your suggestion. But, I do not have to animate the same imageview. — Kavita Kanwar, Sep 09 '15 at 06:29

ios Animation Image Expanding from within a circle

3 Answers3