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)

熱門點閱

  • jQuery 存取元素內容文字的方法
    jQuery/jQuery Mobile 技術文件　》 jQuery 提供了text() 方法，它回傳元素的文字節點，例如以下的配置： < p id ="msg">HTML5 從零開始 </ p > 現在調用 t...
  • INPUT標籤的 autofocus 屬性
    <input> 導入了新的 autofocus 屬性，讓網頁設計者可以指定網頁載入時預設的焦點控制項，使用者不需要再移動滑鼠點選，即能在預設控制項直接輸入，提供良好的網頁操作體驗，而這個屬性同時適用其它幾種輸入控制項，包含 textarea 以及 button 與 s...
  • 淺談 Entity Framework 與 ADO.NET 差異
    Entity Framework 是ASP.NET MVC 串接底層資料來源最重要的技術之一，由於ASP.NET MVC的彈性相當大，事實上你並不一定要使用 Entity Framework 就能利用 ASP.NET MVC 開網站，直接使用傳統 ASP.NET 開發人員熟悉的 ...
  • jQuery 事件觸發-trigger()
    jQuery/jQuery Mobile 技術文件　》 方法 trigger() 支援透過程式化的方式觸發某個特定事件，考慮以下的程式碼： $( '#msg' ).trigger( 'click' ); 其中針對 id="msg...
  • JavaScript 利用 FileReader 讀取文字檔
    過去於瀏覽器介面上，你只能透過 file 型態的 <input > 標籤，提供使用者選取檔案的功能，而現在，利用 HTML5 支援的 API 讀取檔案非常容易，這一篇來看相關的實作。考慮以下的畫面： 按一下選取要讀取的文字檔案，開啟之後的畫面如下： 畫面的...
  • JavaScript 的 typeof() 與型別判斷
    你可以透過 typeof 檢視資料型別，例如 typeof(100) 將回傳 number ，以下的程式碼分別測試數種不同型別的資料： < script >     var n0 = typeof (101);     var n1 = typeof (1...
  • 圖書《商業級 ASP.NET MVC 樣式與架構實務》
    商業級 ASP.NET MVC 樣式與架構實務 ISBN：978-986-93475-1-8(平裝) 出版日期：2019/05/30 定價：550 頁數：320 庫存 < 50本 - 銷售完畢絕版 範例下載 延伸閱讀 天瓏購買 ｜ 蝦皮 - 益大資訊 ...
  • C# 物件導向程式設計（整理開發中）
    此課程提供學員建構紮實的 C# 程式設計物件導向基礎,以期順利銜接後續 Entity Framework 與 ASP.NET MVC 課程的學習. 完成課程將具備能力 需具備技術能力 課程概述 課程綱要
  • C# 基本輸出與輸入
    資料的輸出與輸入處理，永遠是應用程式最重要的課題，在「 第一支 C# 程式內容架構 」示範的範例程式中，執行結果於主控台輸出一段訊息文字，這是最簡單的資料輸出行為，除此之外還可以輸入指定的資料給應用程式作處理。 class Program { static void...
  • 進入 ASP.NET Core 之前必須知道的小概念
    ASP.NET 是一個Web應用開發框架，因應雲端時代的來臨，ASP.NET的發展來到了嶄新的里程碑，現在起我們有了另外一個全新實作的版本 - ASP.NET Core 可供選擇。 早期發展的時候，新版本的 ASP.NET 直接提升目前版本的版號，命名為 ASP.NET ...