IOS Click to see the animation effect of the larger image _ios

For the picture, in addition to the expression package, almost all will be clicked to see the big picture. Today to explain a view and put up a large picture animation effect, first directly to see the effect of the picture:

As shown in the picture, the beginning is a small map, click on the small map can see the larger picture. The larger image is "bounced" from the position and size of the image, and the background becomes a translucent shadow. Click on the big picture or shadow, put up the big picture, the same bounce back to the small picture, while removing the shadow background, like a picture in the extension of the big shrink.

Now let's see how this is achieved. When thinking about the implementation of an animation, the animation of the action to decompose and then think about how to implement is a good habit, we slightly decomposed, the animation in the display of large images and the big picture to do these things:

• A translucent shaded background is displayed first when opened;
  
• It then displays a gradually larger picture until it is stretched to the edge of the screen;
  
• Let the shadow background disappear first;
  
• Then the picture gradually smaller to the size of the original plot.
  

This is actually quite easy to see, the following see how the code to achieve.

First we define three attributes, because we need to call in multiple methods, so we define the @property of the class:

@property (nonatomic, strong) Uiimageview *smallimageview;//small picture view
@property (nonatomic, strong) Uiimageview * bigimageview;//large picture View
@property (nonatomic, strong) UIView *bgview;//Yin Film picture

Then we add the small picture directly to the interface:

-(void) viewdidload {
 [super viewdidload];

 Small figure
 Self.smallimageview = [[Uiimageview alloc] Initwithframe:cgrectmake ((SCREENWIDTH-100)/2, (SCREENHEIGHT-100 )/2, M)];
 Self.smallImageView.image = [uiimage imagenamed:@ "icon"];
 Add Click response
 self.smallImageView.userInteractionEnabled = YES;
 UITapGestureRecognizer *imagetap = [[UITapGestureRecognizer alloc] initwithtarget:self action: @selector (Viewbigimage )];
 [Self.smallimageview Addgesturerecognizer:imagetap];
 [Self.view AddSubview:self.smallImageView];
}

Notice that I've used two preset constants to set the size of a small image: the height and width of the screen, this will be based on the screen size of the phone to ensure that the picture is always centered, for these two constants, you can view my blog: iOS get screen width, device model, system version information

OK now the small figure has been added to the interface, we also added to the small map response to the click of the method, only in the response method to achieve animation. But before we do that, we're going to do the initialization of the big picture and the shadow background:

/Large View-(Uiimageview *) Bigimageview {if (nil = _bigimageview) {_bigimageview = [[Uiimagevi
 EW Alloc] Initwithframe:cgrectmake (0, (screenheight-screenwidth)/2, ScreenWidth, screenwidth)];
 [_bigimageview SetImage:self.smallImageView.image];
 Set up a large image of the click Response, here for the big picture _bigimageview.userinteractionenabled = YES; UITapGestureRecognizer *imagetap = [[UITapGestureRecognizer alloc] initwithtarget:self action: @selector (
 Dismissbigimage)];
 [_bigimageview Addgesturerecognizer:imagetap];
return _bigimageview; }//Overcast video-(UIView *) Bgview {if (nil = = _bgview) {_bgview = [[UIView alloc] Initwithframe:cgrectmake (0, 0, Screenwid
 TH, ScreenHeight)];
 _bgview.backgroundcolor = [Uicolor colorwithwhite:0 alpha:0.5];
 Set the click response of the shadow background, here for the large image _bgview.userinteractionenabled = YES; UITapGestureRecognizer *bgtap = [[UITapGestureRecognizer alloc] initwithtarget:self action: @selector (Dismissbigimage
 )];
 [_bgview Addgesturerecognizer:bgtap];
return _bgview; }

You can see that we've used two separate methods to initialize the large and shaded backgrounds, the larger size is set to be centered vertically, the width is exactly the same as the screen, the height is the same as the width, is a square. The shadow background occupies the entire screen. At the same time, I also set up two views of the corresponding method, are to put up a large image of the animation method, we later to implement. Now we can start to implement the animation that shows the larger picture.

Show large image
-(void) viewbigimage {
 [self bigimageview];//initialization large

 //Jean-Datou the location and size of the small picture begin to appear
 cgrect Originfram = _ Bigimageview.frame;
 _bigimageview.frame = Self.smallImageView.frame;
 [Self.view Addsubview:_bigimageview];

 Animation to large image of the size
 [uiview animatewithduration:0.3 animations:^{
 //change size
 _bigimageview.frame = Originfram;
 Change position
 _bigimageview.center = self.view.center;//Set center position to new position
 };

 Add Yin film
 [self Bgview];
 [Self.view Addsubview:_bgview];

 Put the big picture on top of the top, otherwise it will be covered by the shadow added
 [Self.view Bringsubviewtofront:_bigimageview];
}

Looking at the code, we first call the initialization method of the larger graph, but note that the at this time also did not add a large image to the interface, if it is added, it will directly show the large image, before that, we first save the size of the larger picture itself, and then set its size position and small map exactly the same, and then add it to the interface, From the position and size of the small picture to the original size of the larger image, it looks like the smaller picture is magnified into a larger picture. Here's the animation we use is the simplest iOS 7 to start with the block based UIView animation, in my blog is also explained in detail: iOS basic animation tutorial

Then, we initialize the shadow background view and add it to the interface, and don't forget to push the big picture to the top again manually, otherwise it will be overwritten by the shadowed view added later.

To this end, show the big picture of the animation is over, quite simple, then we see the big picture of animation, basically is the above steps upside down once.

Drop large image
-(void) dismissbigimage {
 [Self.bgview removefromsuperview];//Remove Shadow

 //position and size of large image animation back to small map
 [ UIView animatewithduration:0.3 animations:^{
 //change size
 _bigimageview.frame = self.smallImageView.frame;
 Change position
 _bigimageview.center = self.smallimageview.center;//Set center position to new position
 };

 Delay execution, move back and then eliminate
 double delayinseconds = 0.3;
 __block viewcontroller* bself = self;
 dispatch_time_t poptime = Dispatch_time (Dispatch_time_now, (int64_t) (Delayinseconds * nsec_per_sec));
 Dispatch_after (Poptime, Dispatch_get_main_queue (), ^ (void) {
 [Bself.bigimageview Removefromsuperview];
 Bself.bigimageview = nil;
 Bself.bgview = nil;}
 );

We first remove the shadow background and then animate the large image back to the size and position of the thumbnail, and it looks like it's shrunk into a small picture. Then we use a delay function to ensure that the image is shrunk back to the small image, and then remove the image interface to ensure the effect of animation.

At this point, we have completed our entire animation. In this example, the picture is placed in the center of the position, you can also try to put the small map in other places, in fact, the real app is rarely centered, scaling from other places to zoom in to reduce the effect will be more interesting. Of course, if the location of the small map is not easy to get, it is set directly from the midpoint of the screen to start scaling, the effect is good. In addition, you may wonder why I want to add a larger image of the object, rather than directly to the size of the small picture animation it? In fact, it is entirely possible, but in my project has this demand, so I directly brought over to say hahaha.

Here's my sample project: Https://github.com/Cloudox/ViewBigImageDemo

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.