Just a Computer Graphics Studio & My Life

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

View to Animation

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

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

選擇特性為UIViewKeyframeAnimationOptionRepeatUIViewKeyframeAnimationOptionAutoreverse,也就是重複播放動畫,動畫往前且往後(為了順暢)。

/**
 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 autoreverseHow to stop an UIView animation

廣告

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: