動(dòng)畫：
復(fù)雜動(dòng)畫的實(shí)現(xiàn)：首先要拆分，明確你自己要實(shí)現(xiàn)的效果是什么，然后開始拆分，第一步實(shí)現(xiàn)什么，然后實(shí)現(xiàn)什么...，怎么樣鏈接起來。把復(fù)雜的動(dòng)畫拆分成一個(gè)個(gè)小步驟，然后一步步實(shí)現(xiàn)就可以了。

gif1

snapshotViewAfterScreenUpdates(_:) 這個(gè)方法我在做拖拽tableView的item的時(shí)候(eg: SystemPreference)看到的，感覺用來做動(dòng)畫很好用。相當(dāng)于截個(gè)圖，然后拿著這個(gè)截圖，實(shí)現(xiàn)各種動(dòng)畫效果。
eg:

1. 如果你是一個(gè)電商項(xiàng)目，將商品加入購(gòu)物車，這個(gè)動(dòng)畫就可以用這個(gè)來實(shí)現(xiàn)（Ps：我記得京東還是淘寶久有這個(gè)效果，但是我卻又找不到了），點(diǎn)擊加入購(gòu)物車，然后對(duì)商品生成一個(gè)快照，然后縮小移動(dòng)到購(gòu)物車（還可以加入旋轉(zhuǎn)的動(dòng)畫），到購(gòu)物車的位置，移除。Perfect！
2. 我做的這個(gè)項(xiàng)目，讀信的過程就是用這個(gè)效果實(shí)現(xiàn)，點(diǎn)擊信封，然后生成快照，然后快照位移到屏幕中間，消失，然后信封詳情出現(xiàn)。

image1

實(shí)現(xiàn)

首先，定義動(dòng)畫效果的實(shí)現(xiàn)：

1. 查看信件：a. 點(diǎn)擊信件，然后生成信件快照; b.信件快照位移到屏幕中央；同時(shí)信件詳情出現(xiàn)，信件快照消失；
2. 關(guān)閉詳情：a. 點(diǎn)擊空白處，生成信件詳情快照和信件快照；信件快照起始狀態(tài)隱藏；b.信件詳情快照慢慢變小到和信件快照同樣大小；然后消失，信件快照顯示；c:信件快照位移到信件的位置，然后消失；

代碼

/**
 *  @brief 返回對(duì)應(yīng)view的snapshot
 *
 *  @param inputView 輸入的view
 *
 *  @return 返回的snapshot
 */
- (UIView *)customSnapshotFromView:(UIView *)inputView {
    UIView *snapshot = [inputView snapshotViewAfterScreenUpdates:YES];
    snapshot.layer.masksToBounds = YES;
    snapshot.layer.cornerRadius = 0.0;
    snapshot.layer.shadowOffset = CGSizeMake(-5.0, 0.0);
    snapshot.layer.shadowRadius = 5.0;
    snapshot.layer.shadowOpacity = 0.4;
    return snapshot;
}```

> 關(guān)閉詳情

```Objective-C

/**
 *  動(dòng)畫 關(guān)閉詳情
 *
 *  @param sourceView      起始位置的view
 *  @param destinationView 終點(diǎn)位置的view
 *  @param animateFinished 動(dòng)畫結(jié)束的回調(diào)
 */
- (void)animateView:(UIView *)sourceView
             toView:(UIView *)destinationView
           finished:(AnimateFinished)animatedFinished
{
    /**
     *  邏輯：1. 得到兩個(gè)view的snapshot, sourcesnapshot/destinationsnapshot
     *       2. 然后，設(shè)置destinationsnapshot的中心為整個(gè)view的中心，設(shè)置為透明（即不顯示）
     *       3. 隱藏當(dāng)前sourceView，第一個(gè)動(dòng)畫實(shí)現(xiàn)，sourceViewsnapshot大小變?yōu)閐estinationsnapshot的大小，然后隱藏，同時(shí)顯示destinationsnapshot
     *       4. 第二個(gè)動(dòng)畫實(shí)現(xiàn)：destinationsnapshot移動(dòng)回對(duì)應(yīng)位置，然后隱藏
     */
    
    // 1
    UIView *sourceSnapshot = [self customSnapshotFromView:sourceView];
    UIView *destinationSnapshot = [self customSnapshotFromView:destinationView];
    
    // 2
    CGPoint viewCenter = self.view.center;
    CGPoint destinationCenter = destinationView.center;
    destinationSnapshot.center = viewCenter;
    destinationSnapshot.alpha = 1.0;
    [self.view addSubview:sourceSnapshot];
    [self.view addSubview:destinationSnapshot];
    
    // 3
    sourceView.hidden = YES;
    [UIView animateWithDuration:0.5
                     animations:^{
                         sourceSnapshot.transform = CGAffineTransformMakeScale(1.05, 1.05);
                         sourceSnapshot.alpha = 0.98;
                         sourceSnapshot.frame = destinationSnapshot.frame;
                     } completion:^(BOOL finished) {
                         
                         self.alphaView.hidden = YES;
                         destinationSnapshot.alpha = 0.98;
                         [sourceSnapshot removeFromSuperview];
                         
                         // 4
                         [UIView animateWithDuration:0.5
                                          animations:^{
                                              destinationSnapshot.center = destinationCenter;
                                              destinationSnapshot.transform = CGAffineTransformIdentity;
                                          } completion:^(BOOL finished) {
                                              [destinationSnapshot removeFromSuperview];
                                              animatedFinished();
                                          }];
                     }];
    
}```

> 查看詳情

```Objective-C

/**
 *  動(dòng)畫 查看詳情
 *
 *  @param viewToshow      要展示的view
 *  @param currentView     起始的view
 *  @param animateFinished 動(dòng)畫結(jié)束的回調(diào)
 */
- (void)showView:(UIView *)viewToshow
        withView:(UIView *)currentView
        finished:(Finished)animateFinished
{
    // Taking a snapshot of the selected row using helper method
    UIView *snapShot = [self customSnapshotFromView:currentView];
    
    // Add the snapshot as a subview, centered cell's center
    CGPoint viewCenter = self.view.window.center;
    CGPoint cellCenter = currentView.center;
    snapShot.center = cellCenter;
    snapShot.alpha = 0.0;
    snapShot.backgroundColor = [UIColor whiteColor];
    
    [self.view addSubview:snapShot];
    [UIView animateWithDuration:0.5 animations:^{
        snapShot.transform = CGAffineTransformMakeScale(1.05, 1.05);
        snapShot.alpha = 0.98;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.5 animations:^{
            snapShot.center = viewCenter;
            snapShot.transform = CGAffineTransformIdentity;
        } completion:^(BOOL finished) {
            self.alphaView.hidden = NO;
            viewToshow.hidden = NO;
            [snapShot removeFromSuperview];
            animateFinished();
        }];
    }];
}```

> Ps: 也許會(huì)好奇，為什么查看和關(guān)閉會(huì)是兩個(gè)不同的部分？可以再回頭查看一下分割的動(dòng)畫，發(fā)現(xiàn)過程其實(shí)是不一樣的，查看詳情比關(guān)閉少了一個(gè)步驟。
代碼：[AnimateSnapshotView](https://github.com/mokong/AnimateSnapShotView)