Just My Life & My Work

[iOS] 視圖動畫 (View to Animation)

2016 年 03 月 26 日

想要讓App使用者體驗好一點，就少不了讓人驚喜的動畫效果，於是視圖動畫 (View to Animation)可以在關鍵互動的時候使用！

View to Animation

亦可參考先前教學：訊息跑馬燈和影像轉場動畫。

比如我在錄音的時候要按住錄音按鈕（放開則停止錄音），可是若沒有動畫提示使用者，他現在已經正在錄音，他會覺得錄音好像沒有作用。此時錄音按鈕就可以製作閃爍動畫，我設定動畫為2秒鐘，第1秒透明度從1.0變為0.5，第2秒透明度從0.5變為1.0。

選擇特性為UIViewKeyframeAnimationOptionRepeat和UIViewKeyframeAnimationOptionAutoreverse，也就是重複播放動畫，動畫往前且往後（為了順暢）。

/**
 Theme: View to Animation
 IDE: Xcode 6
 Language: Objective C
 Date: 104/03/25
 Author: HappyMan
 Blog: https://cg2010studio.wordpress.com/
 */
-(void) startRecording
{
    // Animation
    recordButton.alpha = 1.0;
    [UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat animations:^{
        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:1.0 animations:^{
            recordButton.alpha = 0.5;
        }];
        [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:1.0 animations:^{
            recordButton.alpha = 1.0;
        }];
    } completion:nil];
}

-(void) stopRecording
{
    [recordButton.layer removeAllAnimations];
}

想要讓動畫停止，可一行程式碼移除動畫喔！

參考：How to make UIView animation sequence repeat and autoreverse、How to stop an UIView animation。

分類：

iOS, 教學

發表留言

Tagged with:

隨意留個言吧：）～

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

標籤雲