CSS3 動畫效果(2)- 控制 CSS 動畫


支援CSS 動畫的屬性新面,有一個 animation-play-state 屬性,這個屬性用來設定動畫的執行或是暫停,可用的屬性值如下表:

屬性
說明
paused
暫停動畫執行。
running
恢復動畫執行。

在預設的情形下,如果沒有設定 animation-play-state 屬性,則動畫一開始載入會是執行的狀態,如果設定為 paused ,動畫不會執行,如果設定為 running ,則動畫一開始就會根據相關的屬性設定呈現動畫效果。

動畫在預設的情形下,只能根據設定的樣式屬性播放並呈現,你可以透過程式動態控制 animation-play-state 屬性,以達到動畫的暫停與播放效果,考慮以下的範例程式:


一開始載入網頁,畫面中的圖片固定左邊,按一下畫面下方的「執行/暫停」按鈕,則圖片會不斷的往右邊移動,再按一下按鈕,則會暫停。來看看這個範例的實作,配置以下的內容:

<body>
   <img id="animg" src="girl.jpg" />
   <div><button id="setAni"   >執行/暫停</button></div>
</body>

現在針對其中的 <img> 設定所需的動畫樣式(這裏僅示範 Chrome 支援的語法,如果需要測試   Firefox ,請將 -webkit- 改成 -moz- 即可):
<style>
@-webkit-keyframes slide {
    from {
        margin-left:0%;
    }
    to {
        margin-left:50%;           
    }
img
{
    border:1px solid gray ;
    -webkit-animation-name: slide;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-play-state:paused;
}
</style>

請特別注意樣式的最後兩行,-webkit-animation-iteration-count 屬性設定為 infinite ,表示動畫一旦開始之後便持續重覆執行,而最後一個 -webkit-animation-play-state 樣式屬性設定為paused ,則表示暫停此動畫。

接下來為按鈕配置需要的程式碼如下:

<script>
    window.onload = function () {
        var btn = document.getElementById('setAni');
        btn.addEventListener('click', setAnimation, false);
    };
    function setAnimation() {
        var playstate ;
        var am=  document.getElementById('animg');
        am.style.WebkitAnimationPlayState ==
'running' ? playstate='paused': playstate= 'running'  ;
        am.style.WebkitAnimationPlayState = playstate;
    }
</script>

在網頁載入之後,註冊按鈕的 click 事件回應函式 setAnimation ,當使用者按下此按鈕時,其中取得 WebkitAnimationPlayState 這個樣式屬性,並判斷其是否為 running ,依據結果,切換 running/paused 兩個屬性值狀態,如此一來,可以讓使用者在按下按鈕時,重新停止或是開始動畫的執行。

透過程式碼設定 CSS 動畫屬性與一般的屬性作法相同,將屬性值的名稱連接符號移除,然後調整成為駝峰格式即可。

沒有留言: