仿QQ音樂動(dòng)畫

動(dòng)畫效果:


對(duì)動(dòng)畫作如下分析(這個(gè)分析方案肯定不是唯一和最優(yōu)的实柠,其實(shí)實(shí)現(xiàn)這個(gè)動(dòng)畫效果不難):

  1. 主界面是一個(gè)導(dǎo)航欄控制器,底部工具欄設(shè)置不隱藏善涨,在底部工具欄添加左下角的唱片按鈕
  2. 點(diǎn)擊左下角的唱片按鈕窒盐,在主界面addChildViewController
  3. 在子視圖控制器的視圖上疊加三個(gè)子視圖(上-導(dǎo)航欄,中-圓形唱片封面钢拧,下-操作按鈕)
  4. 設(shè)置子視圖出現(xiàn)時(shí)的動(dòng)畫(重載圖層的隱式動(dòng)畫)蟹漓,設(shè)置子視圖退出時(shí)的動(dòng)畫(添加顯示動(dòng)畫

關(guān)鍵是第4步:

一 設(shè)置子視圖出現(xiàn)時(shí)的動(dòng)畫

子視圖出現(xiàn)的動(dòng)畫通過重載子視圖圖層的隱式動(dòng)畫來實(shí)現(xiàn),圖層行為觸發(fā)后(圖層添加到圖層樹或從圖層樹中移除源内,位置葡粒,透明度,寬高發(fā)生改變),圖層將會(huì)使用到以下幾種方式找到響應(yīng)圖層行為的對(duì)象(這個(gè)對(duì)象遵守CAAction協(xié)議嗽交,CALayer類提供默認(rèn)的CAAnimation的行為對(duì)象實(shí)例卿嘲,并應(yīng)用到圖層上):

  1. 圖層的actionForKey:方法被調(diào)用,并返回對(duì)應(yīng)key值的行為對(duì)象夫壁,若對(duì)應(yīng)key值的行為對(duì)象不存在拾枣,則返回nil。
  2. 如果圖層有遵守CALayerDelegate的類(例如:UIView)盒让,則代理方法actionForLayer:forKey:將被調(diào)用
  3. 在圖層actions字典中尋找對(duì)應(yīng)行為標(biāo)識(shí)符(key)的對(duì)象

上梅肤,中,下三個(gè)子視圖繼承自UIView, 所以可以實(shí)現(xiàn)CALayerDelegate的方法:

//示例 上(導(dǎo)航欄)視圖邑茄,KCAOnOrderIn行為在圖層被添加或hidden設(shè)為NO時(shí)被觸發(fā)姨蝴,與相反是KCAOnOrderOut
-(id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)event{

    if([event isEqualToString:kCAOnOrderIn]){
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
        animation.keyPath = @"position";
        animation.duration = 0.2;
        animation.values = @[
                             [NSValue valueWithCGPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/2, -52)],
                             [NSValue valueWithCGPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/2, 42)],
                             [NSValue valueWithCGPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/2, 32)],
                             ];
        return animation;
        
    }
}

二 設(shè)置子視圖退出時(shí)的動(dòng)畫

原來想通過遵守CALayerDelegate協(xié)議,返回KCAOnOrderOut行為對(duì)象來實(shí)現(xiàn)撩扒,但暫時(shí)沒效果似扔。只能通過發(fā)送通知,在子視圖控制器被remove前發(fā)送通知搓谆,讓上中下視圖添加顯示動(dòng)畫來實(shí)現(xiàn)

-(void)disapperAnimation{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    animation.keyPath = @"position";
    animation.duration = 0.2;
    animation.delegate = self;
    animation.values = @[
                          [NSValue valueWithCGPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/2, 32)],
                          [NSValue valueWithCGPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/2, 42)],
                          [NSValue valueWithCGPoint:CGPointMake([UIScreen mainScreen].bounds.size.width/2, -52)],
                          ];
    [self.layer addAnimation:animation forKey:nil];
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末炒辉,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子泉手,更是在濱河造成了極大的恐慌黔寇,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件斩萌,死亡現(xiàn)場離奇詭異缝裤,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)颊郎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門憋飞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人姆吭,你說我怎么就攤上這事榛做。” “怎么了内狸?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵检眯,是天一觀的道長。 經(jīng)常有香客問我昆淡,道長锰瘸,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任昂灵,我火速辦了婚禮避凝,結(jié)果婚禮上舞萄,老公的妹妹穿的比我還像新娘。我一直安慰自己恕曲,他們只是感情好鹏氧,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著佩谣,像睡著了一般。 火紅的嫁衣襯著肌膚如雪实蓬。 梳的紋絲不亂的頭發(fā)上茸俭,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音安皱,去河邊找鬼调鬓。 笑死,一個(gè)胖子當(dāng)著我的面吹牛酌伊,可吹牛的內(nèi)容都是我干的腾窝。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼居砖,長吁一口氣:“原來是場噩夢啊……” “哼虹脯!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起奏候,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤循集,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后蔗草,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咒彤,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年咒精,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了镶柱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡模叙,死狀恐怖歇拆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情向楼,我是刑警寧澤查吊,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站湖蜕,受9級(jí)特大地震影響逻卖,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜昭抒,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一评也、第九天 我趴在偏房一處隱蔽的房頂上張望炼杖。 院中可真熱鬧,春花似錦盗迟、人聲如沸坤邪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽艇纺。三九已至,卻和暖如春邮弹,著一層夾襖步出監(jiān)牢的瞬間黔衡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國打工腌乡, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留盟劫,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓与纽,卻偏偏與公主長得像侣签,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子急迂,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

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

  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果影所,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜,今天將帶大家一窺ios動(dòng)畫全貌袋毙。在這里你可以看...
    每天刷兩次牙閱讀 8,516評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果型檀,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜,今天將帶大家一窺iOS動(dòng)畫全貌听盖。在這里你可以看...
    F麥子閱讀 5,118評(píng)論 5 13
  • 書寫的很好胀溺,翻譯的也棒!感謝譯者皆看,感謝感謝仓坞! iOS-Core-Animation-Advanced-Techni...
    錢噓噓閱讀 2,303評(píng)論 0 6
  • Core Animation基礎(chǔ) Core Animation 利用了硬件加速和架構(gòu)上的優(yōu)化來實(shí)現(xiàn)快速渲染和實(shí)時(shí)動(dòng)...
    獨(dú)木舟的木閱讀 1,542評(píng)論 0 3
  • 概覽 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜腰吟,今天將帶大家一窺iOS動(dòng)畫全貌无埃。在這里你...
    Yiart閱讀 3,830評(píng)論 3 34