iOS_動畫_實例(3)_轉(zhuǎn)場動畫_元素切換

一丶效果

1.gif

OneViewController 的 ImageView和label 切換到TwoViewController的轉(zhuǎn)場動畫;

二丶原理及實現(xiàn)方式;

利用<UINavigationControllerDelegate>的自定義UIViewControllerAnimatedTransitioning方法;
實現(xiàn)方式:
1.OneVc上有:oneImageView;
2.TwoVc上有:twoImageView;
通過截圖oneImageView生成view添加到containerView;
對containerView做過渡動畫即可;

三丶代碼

自己封裝了一個XZB_Transition(https://github.com/k373379320/ZBTransitionTest)

使用:

//翻轉(zhuǎn)OneVc
1.
#import "ZC1ViewController.h"
2.
添加UINavigationControllerDelegate>
3.
self.navigationController.delegate = self;
4.
#pragma mark <UINavigationControllerDelegate>
- (id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                   animationControllerForOperation:(UINavigationControllerOperation)operation
                                                fromViewController:(UIViewController *)fromVC
                                                  toViewController:(UIViewController *)toVC{
    
    if ([toVC isKindOfClass:[ZC2ViewController class]]) {
        
        XZB_Transition *transition = [XZB_Transition transitionWithViewArray:@[@[@"mainImageView",@"mainImageView"],@[@"titleLabel",@"titleLabel"]]];
        
        return transition;
    }else{
        return nil;
    }
}

注意:

就一個類方法;使用注意格式別錯了,沒有容錯代碼,按格式來;
由于采用kvc的方式實現(xiàn),格式如下:
傳入:二維數(shù)組,@[@[原圖控件name1,結(jié)果圖控件name1],@[原圖控件name2,結(jié)果圖控件name2]];
例子:
@[@[@"mainImageView",@"mainImageView"]]
+ (instancetype)transitionWithViewArray:(NSArray *)array;

四丶,代碼講解:

#import "XZB_Transition.h"
#import "UIView+MotionBlur.h"
#import "UIImage+Capture.h"

@interface XZB_Transition ()

@property (nonatomic, strong) NSArray *transitionViewArray;


@end

@implementation XZB_Transition

#pragma mark - 生命周期

#pragma mark - api
+ (instancetype)transitionWithViewArray:(NSArray *)array
{
    XZB_Transition *transition = [[XZB_Transition alloc]init];
    transition.transitionViewArray = array;
    return transition;
}
#pragma mark - getter / setter


#pragma mark - model event

#pragma mark - view event

#pragma mark - private

/**
 動畫持續(xù)時間
 */
- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
{
    return 0.7f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
    //獲取從哪里來的控制器
    UIViewController *fromVC = (UIViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    //獲取到哪里去的控制器
    UIViewController *toVC   = (UIViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    toVC.view.frame = [transitionContext finalFrameForViewController:toVC];
    toVC.view.alpha = 0;
    
    //轉(zhuǎn)場需要動畫的視圖數(shù)組
    NSMutableArray *animationViewsArray = [[NSMutableArray alloc] init];
    
    //做動畫的視圖,注意添加順序,層次;
    UIView *containerView = [transitionContext containerView];
    [containerView addSubview:toVC.view];
    @autoreleasepool {
        for (NSArray *startToEndViewArray in self.transitionViewArray)
        {
            //來源視圖處理指針
            UIView *fromVcAnimationView = nil;
            //最終視圖處理指針
            UIView *toVcAnimationView = nil;
            //做動畫的視圖指針
            UIImageView *animationImageView = nil;
            {
                fromVcAnimationView = [fromVC valueForKey:startToEndViewArray[0]];
                //截圖
                animationImageView = [[UIImageView alloc] initWithImage:[UIImage captureWithView:fromVcAnimationView]];
                animationImageView.frame = fromVcAnimationView.frame;
                [containerView addSubview:animationImageView];
            }
            
            toVcAnimationView  =  [toVC valueForKey:startToEndViewArray[1]];
            fromVcAnimationView.hidden = YES;
            toVcAnimationView.hidden = YES;
            
            //原圖,結(jié)果圖,動畫圖
            [animationViewsArray addObject:@[fromVcAnimationView,toVcAnimationView,animationImageView]];
        }
        
    }
    
    //動畫效果
    NSTimeInterval duration = [self transitionDuration:transitionContext];
    
    [UIView animateWithDuration:duration delay:0.0f usingSpringWithDamping:0.7f initialSpringVelocity:1.0f options:UIViewAnimationOptionCurveLinear animations:^{
        
        toVC.view.alpha = 1.0;
        for (NSArray *animationArray in animationViewsArray)
        {
            UIImageView *animationImageView = animationArray[2];
            UIView *resultsView =  animationArray[1];
            //frame變換
            animationImageView.frame = [containerView convertRect:resultsView.frame fromView:resultsView.superview];
        }
        
        
    } completion:^(BOOL finished) {
        if (!finished)return ;
        
        for (NSArray *animationArray in animationViewsArray)
        {
            UIView *fromVcAnimationView = animationArray[0];
            UIView *toVcAnimationView = animationArray[1];
            UIImageView *animationImageView = animationArray[2];
            
            fromVcAnimationView.hidden = NO;
            toVcAnimationView.hidden = NO;
            //刪除做動畫view
            [animationImageView removeFromSuperview];
        }
        //結(jié)束動畫,必須調(diào)用;
        [transitionContext completeTransition:!transitionContext.transitionWasCancelled];
    }];
    
}

XZB_Transition: <a >XZB_Transition</a>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末涂臣,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異宠进,居然都是意外死亡鸠补,警方通過查閱死者的電腦和手機萝风,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來紫岩,“玉大人闹丐,你說我怎么就攤上這事”灰颍” “怎么了卿拴?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長梨与。 經(jīng)常有香客問我堕花,道長,這世上最難降的妖魔是什么粥鞋? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任缘挽,我火速辦了婚禮,結(jié)果婚禮上呻粹,老公的妹妹穿的比我還像新娘壕曼。我一直安慰自己,他們只是感情好等浊,可當(dāng)我...
    茶點故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布腮郊。 她就那樣靜靜地躺著,像睡著了一般筹燕。 火紅的嫁衣襯著肌膚如雪轧飞。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天撒踪,我揣著相機與錄音过咬,去河邊找鬼。 笑死制妄,一個胖子當(dāng)著我的面吹牛掸绞,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播耕捞,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼衔掸,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了砸脊?” 一聲冷哼從身側(cè)響起具篇,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎凌埂,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诗芜,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡瞳抓,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年埃疫,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片孩哑。...
    茶點故事閱讀 39,745評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡栓霜,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出横蜒,到底是詐尸還是另有隱情胳蛮,我是刑警寧澤,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布丛晌,位于F島的核電站仅炊,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏澎蛛。R本人自食惡果不足惜费坊,卻給世界環(huán)境...
    茶點故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一燕少、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦着逐、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至气堕,卻和暖如春瓷叫,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背送巡。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工摹菠, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人骗爆。 一個月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓次氨,卻偏偏與公主長得像,于是被迫代替她去往敵國和親摘投。 傳聞我的和親對象是個殘疾皇子煮寡,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,652評論 2 354

推薦閱讀更多精彩內(nèi)容