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