iOS Click TableView cell display pop-up animation

Recently using the Pea pod at a glance at the app when you see it's click cell after the pop-up interface animation is very handsome, so I figured out the realization of one, the effect is as follows:

Careful observation of the effect is divided into several parts, click on the cell, the first background will appear shadow, only click on the cell is still lit, and then a little bit of amplification effect, while the cell interface slowly into pure white, and finally fried open into the content interface, actually think about this and 3D The touch peek effect is not very similar to the prelude.

Figure out the composition of the animation, start to implement, how to implement the list and the details of the interface is not said, you can see in the end of my sample project, directly say the cell after the click of the process of execution.

We need to use the extra three small vied, one is the background of the Shadow view, one is the click of the cell's view, one is the cell slowly into a pure white view (finally exploded is also this white view).

So let's start by declaring three view:

@property (nonatomicstrongUIView *tempView;// 纯白view@property (nonatomicstrongUIView *bgView;// 阴影视图@property (nonatomicstrong) BookListCellView *selectedCell;// 选中的cell

This declaration is made to be called by the entire view controller, why? Because these three views are added when we click, we have to remove them, otherwise the three views will be present after the list interface is returned from the detail interface, so we will remove them in the Viewwillappear method:

- (void)viewWillAppear:(BOOL)animated {    [super viewWillAppear:animated];    [self.tempView removeFromSuperview];    [self.bgView removeFromSuperview];    [self.selectedCell removeFromSuperview];}

Three views, the shadow view of the background is a fixed size, even though the entire interface, the cell view and the pure white view depends on the location of the click, so the Yin movie map can write a method directly to create:

// 阴影视图- (UIView *)bgView {    if (nil == _bgView) {        _bgView = [[UIView alloc] initWithFrame:CGRectMake(00, SCREENWIDTH, SCREENHEIGHT)];        _bgView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];    }    return _bgView;}

The next part of the animation, we go to the method of clicking the cell, that is,
-(void) TableView: (UITableView ) TableView didselectrowatindexpath: (Nsindexpath ) Indexpath
method, the code is as follows:

#pragma mark TableView Delegate//Select a row- (void) TableView: (UITableView*) TableView Didselectrowatindexpath: (Nsindexpath*) Indexpath {[TableView deselectrowatindexpath:indexpath animated:YES];//Uncheck the color when checked    //Detail ViewDetailviewcontroller *DETAILVC = [[Detailviewcontroller alloc] init];//Get the selected area range    CGRectRectintableview = [ Self. TableViewRectforrowatindexpath:indexpath];CGRectSourcerect = [ Self. TableViewConvertrect:rectintableview toview:[ Self. TableViewSuperview]];//Instantiate the selected cell view, the content is retrieved according to the selected cell content, and the scope uses the range obtained above     Self. SelectedCell= (Booklistcellview *) [ SelfTableview:tableview Cellforrowatindexpath:indexpath]; Self. SelectedCell. Frame= Sourcerect; Self. SelectedCell. BackgroundColor= [UicolorWhitecolor]; [ Self. ViewAddsubview: Self. SelectedCell];//Yin Movie View[ SelfBgview]; [ Self. ViewAddsubview:_bgview];//Put the cell view at the front[ Self. ViewBringsubviewtofront: Self. SelectedCell];//Instantiate a pure white view, the same extent as the cell view, first made transparent     Self. Tempview= [[UIViewAlloc] initWithFrame: Self. SelectedCell. Frame]; Self. Tempview. BackgroundColor= [UicolorWhitecolor]; Self. Tempview. Alpha=0; [ Self. ViewAddsubview: Self. Tempview];//Animate[UIViewAnimatewithduration:0.3animations:^{//Slightly increase the size of the cell view         Self. SelectedCell. Transform= Cgaffinetransformmakescale (1.0,1.1);the transparency of the//white view is set to opaque so that the cell view is overwritten         Self. Tempview. Alpha=1; }];//Deferred execution    DoubleDelayinseconds =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. SelectedCellRemovefromsuperview];//Animate[UIViewAnimatewithduration:0.3animations:^{//Blast open white view to fullscreenBself. Tempview. Transform= Cgaffinetransformmakescale (1.0, screenheight/bself. Tempview. Frame. Size. Height*2);    }]; });//Deferred execution    DoubleDELAYINSECONDS2 =0.6;    dispatch_time_t popTime2 = Dispatch_time (Dispatch_time_now, (int64_t) (DELAYINSECONDS2 * nsec_per_sec)); Dispatch_after (PopTime2, Dispatch_get_main_queue (), ^ (void){//Enter the details screen[Bself. NavigationcontrollerPUSHVIEWCONTROLLER:DETAILVC Animated:NO]; });}

The comment explains most of the content, let's split it up, and the whole animation is divided into three processes:

1. The first procedure is to add a shadow, create a corresponding cell display, in the animation slightly increase the cell highlighting effect, while a white view slowly covering the cell view;
2. The second process is to blow open the white view, in the animation will be the size of the entire screen size, you can achieve the blow-up coverage effect;
3. The third process is to enter the details screen.

The second process and the third process should be separated by a delay to execute correctly, otherwise it will not work together to see the effect. Animation is the use of the most basic UIView animation, tutorials can read my blog, it is very convenient to use, delay the implementation of my GCD method, but also in other ways you are familiar with. We can see that we have three new views covered in the interface, so every time the list interface to appear, we have to remove it, as described above. Note that we can not directly use the location of the click to the cell, tested directly with his Origin will become (0, 0), that is, appear in the upper left corner, I do not know why, so here to get the corresponding area to change the cell range and as a white view of the scope.

This is achieved, the effect is very good, you can download my sample project play a Play ~

All rights reserved: Http://blog.csdn.net/cloudox_

iOS Click TableView cell display pop-up animation