第一篇定義了一個名稱為 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>
沒有留言:
張貼留言