iOS 仿淘寶加入購物車 向內(nèi)凹陷折疊動畫效果

1. 實(shí)現(xiàn)效果:

項(xiàng)目中需要添加一個效果,彈出彈框時网棍,底部控制器向內(nèi)凹陷黔龟,類似淘寶加入購物車動畫效果,如下圖:

效果.gif

2. 實(shí)現(xiàn)方法

這里有2種實(shí)現(xiàn)方法滥玷,一種是通過自己代碼氏身,另一種通過第三方框架

2.1 自己代碼實(shí)現(xiàn)

2.1.1 此處只寫明關(guān)鍵步驟的實(shí)現(xiàn)原理,view根據(jù)自己的頁面自定義惑畴,步驟:

  1. 按鈕點(diǎn)擊事件[pop]中蛋欣,在AnimationVC上面添加一個MaskView(可根據(jù)需求在MaskView上添加點(diǎn)擊退出的按鈕)
  2. 在Window上,添加彈出的popView
  3. 添加動畫效果如贷,凹陷view
  4. 在確定/取消的方法中調(diào)用[self close];

2.1.2 這里先解釋下m34:

transform本身就是個結(jié)構(gòu)體陷虎,首先要實(shí)現(xiàn)View的透視效果(近大遠(yuǎn)小)杠袱,就是通過它來實(shí)現(xiàn)的.

CATransform3D transform3D = CATransform3DIdentity;
transform3D.m34 = 1.0 / -500;```
m34負(fù)責(zé)z軸方向的translation(移動)尚猿,m34= -1/D,默認(rèn)值是0,也就是說D無窮大楣富,這意味layer in projection plane(投射面)和layer in world coordinate重合了凿掂。
D越小透視效果越明顯。所謂的D菩彬,是eye(觀察者)到投射面的距離缠劝。

2.1.3 代碼:

1. 動畫開始
- (void)pop {
    // 隱藏tabbar
    self.tabBarController.tabBar.hidden = YES;
    // 1.view上添加遮罩
    [self.view addSubview:self.maskView];
    
    // 2.window上添加彈框
    [[UIApplication sharedApplication].windows[0] addSubview:self.popView];
    CGRect rec = self.popView.frame;
    rec.origin.y = SCREEN_HEIGHT - FYpopView_HEIGHT;
    
    [UIView animateWithDuration:0.3 animations:^{
        // 第一段操作
        // 逆時針X軸旋轉(zhuǎn) 縮小到0.95倍潮梯,實(shí)現(xiàn)向內(nèi)傾斜凹陷的透視效果
        self.view.layer.transform = [self transform1];
    } completion:^(BOOL finished) {
        // 第二段操作,
        // 把transform設(shè)置為初始化惨恭,透視效果和第一段一樣秉馏,
        // 讓他回歸到正常(不傾斜),
        // 同時大小最終為0.8脱羡,高度向上移動一點(diǎn)點(diǎn)萝究,
        // 添加maskView,添加popView
        [UIView animateWithDuration:0.3 animations:^{
            self.view.layer.transform = [self transform2];
            self.maskView.alpha = 0.5;
            self.popView.frame = rec;
        } completion:^(BOOL finished) {
        }];
    }];  
}
2. 動畫結(jié)束
- (void)close {

    CGRect rec = self.dimensionView.frame;
    rec.origin.y = self.view.bounds.size.height;
    
    // 動畫回去
    [UIView animateWithDuration:0.3 animations:^{
        self.dimensionView.frame = rec;
        self.maskView.alpha = 0;
        self.view.layer.transform = [self transform1];
        
    } completion:^(BOOL finished) {

        [UIView animateWithDuration:0.3 animations:^{
            // 折疊完之后讓transform回歸到正常水平
            self.view.layer.transform = CATransform3DIdentity;
        } completion:^(BOOL finished) {
            [self.dimensionView removeFromSuperview];
        }];
    }];
    self.tabBarController.tabBar.hidden = NO;
}
3. 關(guān)鍵形變方法
// 第一次形變

- (CATransform3D)transform1{
    
    // 每次進(jìn)來都進(jìn)行初始化 回歸到正常狀態(tài)
    CATransform3D form1 = CATransform3DIdentity;
    // m34就是實(shí)現(xiàn)視圖的透視效果的(俗稱近大遠(yuǎn)酗惫蕖)
    form1.m34 = 1.0/-900;
    // 縮小
    form1 = CATransform3DScale(form1, 0.85, 0.85, 1);
    // x軸旋轉(zhuǎn)
    form1 = CATransform3DRotate(form1, 15.0 * M_PI/180.0, 1, 0, 0);
    return form1;
    
}

// 第二次形變
- (CATransform3D)transform2{

    // 初始化 再次回歸正常
    CATransform3D form2 = CATransform3DIdentity;
    // 用和上面相同的m34 來設(shè)置透視效果
    form2.m34 = [self transform1].m34;
    // 向上平移一丟丟 讓視圖平滑點(diǎn)
    form2 = CATransform3DTranslate(form2, 0, self.view.frame.size.height * (-0.08), 0);
    // 最終縮小到0.8倍
    form2 = CATransform3DScale(form2, 0.8, 0.8, 1);
    return form2;
}

2.2 通過第三方框架實(shí)現(xiàn) KNSemiModalViewController

這是國外一個比較成熟的庫帆竹,自定義非常高,可彈出view脓规,也可彈出控制器栽连,但是用時會遇到些問題

2.2.1 使用步驟:

  1. 將Source文件夾拖到項(xiàng)目中
  2. 添加QuartzCore.framework
  3. 導(dǎo)入頭文件#import "UIViewController+KNSemiModal.h"
  4. 調(diào)用 [self presentSemiModalView:myView] 彈出動畫
  5. 調(diào)用[self dismissSemiModalView] 關(guān)閉動畫

2.2.2 可能遇到的問題:

1. 問題1

ld: 1 duplicate symbol for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
解決方法:add typedef

typedef NS_ENUM(NSUInteger, KNSemiModalTransitionStyle) {
KNSemiModalTransitionStyleSlideUp,
KNSemiModalTransitionStyleFadeInOut,
KNSemiModalTransitionStyleFadeIn,
KNSemiModalTransitionStyleFadeOut,
};
2. 問題2

Exception: Defaults must have been set when accessing
解決方法:
如果你要的根控制器是有導(dǎo)航欄的

[self.navigationController presentSemiViewController....]

如果沒有導(dǎo)航欄

[self presentSemiViewController....]

感謝作者: 參考資料

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市侨舆,隨后出現(xiàn)的幾起案子秒紧,更是在濱河造成了極大的恐慌,老刑警劉巖挨下,帶你破解...
    沈念sama閱讀 210,835評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件熔恢,死亡現(xiàn)場離奇詭異,居然都是意外死亡臭笆,警方通過查閱死者的電腦和手機(jī)叙淌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,900評論 2 383
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來愁铺,“玉大人鹰霍,你說我怎么就攤上這事∫鹇遥” “怎么了衅谷?”我有些...
    開封第一講書人閱讀 156,481評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長似将。 經(jīng)常有香客問我,道長蚀苛,這世上最難降的妖魔是什么在验? 我笑而不...
    開封第一講書人閱讀 56,303評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮堵未,結(jié)果婚禮上腋舌,老公的妹妹穿的比我還像新娘。我一直安慰自己渗蟹,他們只是感情好块饺,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,375評論 5 384
  • 文/花漫 我一把揭開白布赞辩。 她就那樣靜靜地躺著,像睡著了一般授艰。 火紅的嫁衣襯著肌膚如雪辨嗽。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,729評論 1 289
  • 那天淮腾,我揣著相機(jī)與錄音糟需,去河邊找鬼。 笑死谷朝,一個胖子當(dāng)著我的面吹牛洲押,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播圆凰,決...
    沈念sama閱讀 38,877評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼杈帐,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了专钉?” 一聲冷哼從身側(cè)響起挑童,我...
    開封第一講書人閱讀 37,633評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎驶沼,沒想到半個月后炮沐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,088評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡回怜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,443評論 2 326
  • 正文 我和宋清朗相戀三年大年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片玉雾。...
    茶點(diǎn)故事閱讀 38,563評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡翔试,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出复旬,到底是詐尸還是另有隱情垦缅,我是刑警寧澤,帶...
    沈念sama閱讀 34,251評論 4 328
  • 正文 年R本政府宣布驹碍,位于F島的核電站壁涎,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏志秃。R本人自食惡果不足惜怔球,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,827評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望浮还。 院中可真熱鬧竟坛,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,712評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至崭歧,卻和暖如春隅很,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背驾荣。 一陣腳步聲響...
    開封第一講書人閱讀 31,943評論 1 264
  • 我被黑心中介騙來泰國打工外构, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人播掷。 一個月前我還...
    沈念sama閱讀 46,240評論 2 360
  • 正文 我出身青樓审编,卻偏偏與公主長得像,于是被迫代替她去往敵國和親歧匈。 傳聞我的和親對象是個殘疾皇子垒酬,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,435評論 2 348

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,724評論 25 707
  • 在iOS中隨處都可以看到絢麗的動畫效果,實(shí)現(xiàn)這些動畫的過程并不復(fù)雜件炉,今天將帶大家一窺iOS動畫全貌勘究。在這里你可以看...
    F麥子閱讀 5,101評論 5 13
  • 以前在沒有生寶寶的時候口糕,每逢周末休息的時候,睡到自然醒是件最美的事情了磕蛇。那時候聽說孕期需要經(jīng)常做產(chǎn)檢景描,而且需...
    辛馨閱讀 418評論 0 0
  • 雖說是意料之中,但還是讓人非常不愉快的劇情如期而至秀撇。 某些人的某些做法已經(jīng)是不知道該怎么形容了超棺。 現(xiàn)在的工作變成了...
    沃雷塔爾閱讀 100評論 0 0
  • “如何在30秒內(nèi)快讀說明自己的觀點(diǎn)棠绘,讓對方滿意?” 小青曾經(jīng)也覺得特別難再扭,不過她最近找到了秘籍氧苍。 - 1 - 能說...
    棟仔的龍大貓閱讀 247評論 0 1