CSS3 動畫效果(3)- 動畫屬性設定範例


第一篇定義了一個名稱為 slide 的簡單 CSS 動畫,然後為畫面上的 <img /> 標籤套用此動畫如下:

img
{
    border:1px solid gray ;
    -webkit-animation-name: slide;
    -webkit-animation-duration: 6s;
}

不考慮特定瀏覽器的識別字首,屬性 animation-name 表示所要套用的樣式 slide ,而 animation-duration 表示執行 slide 動畫一次所要花費的時間。除了這兩個屬性之外,還有其它的屬性可以進一步控制動畫。

屬性
說明
animation-name
-
@keyframes 動畫效果識別名稱。
animation-duration
n
指定動畫執行時間區段長度,n是數字,ns 表示執行的秒數,nms 表示執行的毫秒數,預設值 0
animation-delay
n
指定動畫開始執行的時間,n是數字,ns 表示執行的秒數,nms 表示執行的毫秒數,預設值 0
animation-iteration-count
n
infinite
指定動畫重覆執行的次數,n是數字,預設值 1
animation-direction
normal
alternate
指定動畫重覆執行的行為,normal是預設值
animation-play-state
paused
running
指定動畫繼續執行或是暫停,running是預設值

第二篇提及的動畫程式化控制,透過 JavaScript 控制 animation-play-state 屬性,提供使用者播放與暫停的功能。

有了前述兩篇的基礎,我們現在另外實作一個範例,逐一展示表列屬性的效果。以下是範例的畫面,其中設計了兩組動畫, slide 是將圖片水平往右平移, slide-v 則是將圖片垂直往下平移。


畫面的上方,是一系列的參數設定欄位,完成指定的參數值,按一下「設定」按鈕,可以看到動畫的效果,「設定」按鈕每按一次,會在 slide 與 slide-v 兩種動畫之間切換。而在動畫執行的期間,按一下「執行/暫停」按鈕,可以暫停或是再度恢復動畫的執行。
配置以下的 HTML 標籤,以呈現畫面的內容:

<body>
    <div>     
            <span>執行時間:</span><input id="duration" type="text" class="number" value="1s">
            <span>延遲:</span><input id="delay" type="text" class="number" value="2s">
            <span>重覆次數:</span><input id="iteration" type="text" class="text" value="infinite" >
            <span>重覆方式:</span><input id="direction" type="text" class="text" value="alternate" >
            <button id="setAni">
                設定</button>
            <button id="prun">
                    執行/暫停</button>   
    </div> <div>
    <img id="animg" src="girl.jpg" /> </div>
</body>

定義底下兩組動畫樣式:

@-webkit-keyframes slide {
    from {
        margin-left:0%;
    }
    to {
        margin-left:50%;           
    }
}  
@-webkit-keyframes slide-v {
    from {
        margin-top:0%;
    }
    to {
        margin-top:30%;           
    }
}     

現在於網頁載入後,註冊畫面上兩個按鈕的 click 事件:

window.onload = function () {
    var btn = document.getElementById('setAni');
    var btn_prun = document.getElementById('prun');
    btn.addEventListener('click', setAnimation, false);
    btn_prun.addEventListener('click', rptAnimation, false);
};

其中的 setAnimation() 於每一次使用者按下「設定」按鈕之後,逐一取得畫面上用者輸入的值,重設目前的動畫效果,內容如下:

    var am = document.getElementById('animg');
    var da = document.getElementById('duration').value.toString();
    var dl = document.getElementById('delay').value;
    var itc = document.getElementById('iteration').value;
    var dir = document.getElementById('direction').value;
    am.style.WebkitAnimationName == 'slide-v' ?
        am.style.WebkitAnimationName = 'slide' :
        am.style.WebkitAnimationName = 'slide-v';
    am.style.WebkitAnimationDuration = da;
    am.style.WebkitAnimationDelay = dl;
    am.style.WebkitAnimationIterationCount = itc;
    am.style.WebkitAnimationDirection = dir;
    am.style.WebkitAnimationIterationCount = dl;         
}


接下來是 rptAnimation() ,每一次使用按一下「執行/暫停」按鈕,重新執行或是暫停動畫,內容如下:


function rptAnimation() {
    var am = document.getElementById('animg');
    am.style.WebkitAnimationPlayState == 'running' ?
        am.style.WebkitAnimationPlayState = 'paused' :
am.style.WebkitAnimationPlayState = 'running';         
}

完成這裏的設定,整個範例就可以正常運作了,你可以在其中輸入不同的參數值,以檢視動畫效果。以下列舉完整內容:

<!DOCTYPE html >
<html>
<head>
    <title></title>
    <style>
    @-webkit-keyframes slide {
        from {
            margin-left:0%;
        }
        to {
            margin-left:50%;           
        }
    }  
        @-webkit-keyframes slide-v {
        from {
            margin-top:0%;
        }
        to {
            margin-top:30%;           
        }
    }       
    img
    {
        border:1px solid gray ;
    }
    input.number
    {
        width:24px ;
        margin-right:14px;
             
    }
    input.text
    {
        width:56px ;
        margin-right:14px;
             
    }   
    span
    {
        padding-left:10px;
    }
    div
    {
        padding:10px;
    }
    </style>
    <script>
        window.onload = function () {
            var btn = document.getElementById('setAni');
            var btn_prun = document.getElementById('prun');
            btn.addEventListener('click', setAnimation, false);
            btn_prun.addEventListener('click', rptAnimation, false);
        };
        function setAnimation() {

            var am = document.getElementById('animg');
            var da = document.getElementById('duration').value.toString();
            var dl = document.getElementById('delay').value;
            var itc = document.getElementById('iteration').value;
            var dir = document.getElementById('direction').value;
            am.style.WebkitAnimationName == 'slide-v' ?
                am.style.WebkitAnimationName = 'slide' :
                am.style.WebkitAnimationName = 'slide-v';
            am.style.WebkitAnimationDuration = da;
            am.style.WebkitAnimationDelay = dl;
            am.style.WebkitAnimationIterationCount = itc;
            am.style.WebkitAnimationDirection = dir;
            am.style.WebkitAnimationIterationCount = dl;         
        }
        function rptAnimation() {
            var am = document.getElementById('animg');
            am.style.WebkitAnimationPlayState == 'running' ?
                am.style.WebkitAnimationPlayState = 'paused' : 
    am.style.WebkitAnimationPlayState = 'running';
         
        }
    </script>
</head>
<body>
    <div>
     
            <span>執行時間:</span><input id="duration" type="text" class="number" value="1s">
            <span>延遲:</span><input id="delay" type="text" class="number" value="2s">
            <span>重覆次數:</span><input id="iteration" type="text" class="text" value="infinite" >
            <span>重覆方式:</span><input id="direction" type="text" class="text" value="alternate" >
            <button id="setAni">
                設定</button>
            <button id="prun">
                    執行/暫停</button>
   
    </div> <div>
    <img id="animg" src="girl.jpg" /> </div>
</body>
</html>

沒有留言: