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>

於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)