CSS3 動畫效果(4)- 動畫的最終狀態設定

當你透過 CSS 的 @keyframes 技巧設計動畫,在預設的情形下,動畫會在播放完畢之後,切換至動畫未開始之前的原始狀態,如果要改變這種行為,必須透過 animation-fill-mode 屬性進行設定,這個屬性讓你決定是否動畫結束之後,維持最終的影格狀態,或是回復至原始的狀態,考慮以下的範例畫面。左圖是一個網頁載入之後的畫面,在圖片上按一下,則其中疊放的四張圖片會散開:


為了測試,這個範例於畫面上配置了四張圖片:

<div onclick="showEffect();"  >
    <img id="girl1" src="images/girl1.jpg" style="position: absolute; z-index: 10;" />
    <img id="girl2" src="images/girl2.jpg" style="position: absolute; z-index: 100;" />
    <img id="girl3" src="images/girl3.jpg" style="position: absolute; z-index: 1000;" />
    <img id="girl4" src="images/girl4.jpg" style="position: absolute; z-index: 1004;" />
</div>

將所有圖片的 z-index 設定為不同的值,同時以絕對位置配置以達到疊圖的效果,其中的 <div> 標籤設定了 onclick 屬性,當使用者按下時,執行 showEffect() 呈現動畫。接下來定義四組不同效果的動畫(全部以Chrome 為主,Firefox 請改成 將 webkit 改成 moz)。

<style>
@-webkit-keyframes slide1 {      
    to {
        margin-left:80%
        margin-top:0%;  
        opacity:1.0;        
    }
}
@-webkit-keyframes slide2 {      
    to {
        margin-left:60%
        margin-top:45%;  
        opacity:1.0;        
    }
}
@-webkit-keyframes slide3 {      
    to {
        margin-left:30%
        margin-top:60%;  
        opacity:1.0;        
    }
}
@-webkit-keyframes slide4 {      
    to {
        margin-left:0%
        margin-top:30%;  
        opacity:1.0;        
    }
}    
img
{
    border:1px solid gray ;
}
</style>

接下來,建立 showEffect() 函式,其中針對每個圖片設定其對應的動畫效果,而為了讓使用者每一次按下圖片均會播放動畫,因此利用陣列索引進行設定,讓每一次套用的動畫名稱均不相同。

<script>
        var girlimg;
        var ani = ['slide1', 'slide2', 'slide3', 'slide4'];

        var i = 0;
        var r = true;
        function showEffect() {
            console.log('dot');
            var girlimg1 = document.getElementById('girl1');
            girlimg1.style.WebkitAnimationName = ani[i];
            girlimg1.style.WebkitAnimationDuration = '2s';
            if (r) i++;
            else i--;

            var girlimg2 = document.getElementById('girl2');
            girlimg2.style.WebkitAnimationName = ani[i];
            girlimg2.style.WebkitAnimationDuration = '2s';
            if (r) i++;
            else i--;

            var girlimg3 = document.getElementById('girl3');
            girlimg3.style.WebkitAnimationName = ani[i];
            girlimg3.style.WebkitAnimationDuration = '2s';
            if (r) i++;
            else i--;

            var girlimg4 = document.getElementById('girl4');
            girlimg4.style.WebkitAnimationName = ani[i];
            girlimg4.style.WebkitAnimationDuration = '2s';
            r = !r;
        }
</script>

好了,這個範例已經可以動了,不過每一次當你按下畫面上的圖片時,會發現所有的圖散開之後,會馬上疊回去,回復來的狀態,現在於其中的 img 樣式中,加入 animation-fill-mode 屬性設定如下式:

img
{
    border:1px solid gray ;
    -webkit-animation-fill-mode: forwards;
}

其中的值 forwards 表示動畫完成播放之後,必須維持在最終的影格狀態。現在重新執行網頁,會看到動畫最後四張圖片散開的效果。

沒有留言: