Triangle Best Math Test

Antee Bestmathtest G Best Math Test Szh Blog Best Math Test CSS Animation Tutorial « Nothing But The Truth - 軟體技術的真相

Antee Bestmathtest G Best Math Test Szh Blog Best Math Test

-webkit-animation: name duration timing_function delay iteration_count direction [, ... ];

雖然 Animation 已經建立好了，但仍需要建立 Keyframe，才算是一個完整的 Animation。

建立 Keyframe

接著就是要替 Animation 建立 Keyframe(s) 了。

Syntax

keyframes-rule: '@-webkit-keyframes' [ IDENT | STRING ] '{}';
keyframes-blocks: [ keyframe-selectors block ]* ;
keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

範例

<style>
.aniClass1 {}

@-webkit-keyframes test_ani1 {}
 100% {}
}
</style>
<div style="width: 200px;border: 1px solid #000000"
 onMouseOver="className='aniClass1';">
Mouse over to trigger the animation.
</div>

結果

Mouse over to trigger the animation.

處理 Animation Event

當 Animation 在執行時，將有以下三種 Event，好讓 JavaScript 能夠得知 Animation

的執行情形。

範例

<style>
.aniClass2 {}
@-webkit-keyframes test_ani2 {}
 100% {}
}
</style>
<div id="ani_box" style="border: 1px solid #000000"
 onMouseOver="className='aniClass2';">
Mouse over to trigger the animation.
webkitAnimationEnd event will be triggered at the end.
</div>
<script>
function endOfAni(event) {}
ani_box.addEventListener('webkitAnimationEnd', endOfAni);
</script>

結果

Mouse over to trigger the animation. webkitAnimationEnd event will be triggered at the end.

當 Mouse over 將會開始動畫，而動畫完成時將會 alert(“end of animation”)。

為什麼用 CSS 做 Animation 呢？

目前的 JavaScript Framework 皆是以 JavaScript 來設計並實作所有 Animation library，但問題是以 JavaScript 實作的數學運算都會需要以下的幾個步驟：

  1. 從 JavaScript Object 轉換至 Native Object (包含運算時所需的所有參數)
  2. 由 Natvie function 來運算並得到 Native 結果
  3. 將結果再轉換為 JavaScript Object 以繼續下一個 JavaScript Operation。

當所有 Animation 所需的數學運算都得經過上面從 JavaScript Space 轉換到 Native Space，運算完結果後再轉換回 JavaScript Space 時，將會大大地浪費許多的時間在轉換上。

傳統架構如下圖：

JavaScript Application
JavaScript Animation Library (witten in JavaScript)
JavaScript Engine
Native Math functions

由於 Animation 的運算皆是由 JavaScript 所寫，當然也得由 JavaScript Engine (VM) 來運算，速度上也自然不理想。

（PS. Just In Time Compiler (JIT) 技術也常用在減少這種不必要的轉換 overhead 上。）

但是，CSS Animation 的想法則是更進一步，何不干脆直接提供 Native Animation Library ，並藉由 CSS 設計與 JavaScript 做結合，如此一來除了事件相關的不必要轉換都可以省略。

CSS Animation 的架構如下：

JavaScript Application
JavaScript Engine
Native Animation Library

如此一來，在 Animation 過程中所需要的數學運算都會是 Native operation，得到的加速效果可是 JavaScript Space 的好幾倍！

其實 Apple 提出的這個架構，主要還是因為 Mac OS 上早已有了 Native Animation Library (Core Animation & Quartz)，對 Apple 來說根本是再好不過了。
然而在其它平台上就沒這麼幸運了，缺乏統一架構的結果反而導致了彼此不相容且疊床架屋的問題。
PS. Mac OS 能在 GUI 系統上領先，統一架構是很重要的原因。

世界不會突然這麼美好，仍有尚未解的問題

即使 Animation 得到大幅度的加速，但還是有不少的問題：

  1. 目前 CSS Animation 只有 Webkit 實作且仍未成為 W3C 認可的標準，未來是否能列入標準仍有不少角力要進行吧！
  2. 用 CSS 來設計 Animation，若只設計簡單的效果雖不成問題，但若想取代 Flash，可還有一大段路要走，畢竟缺少 Authoring Tool 的狀況下，對於 Designer 的接受度來說應該會差很多。
  3. CSS Animation 對於 JavaScript Engine 來說就像是 Ajax 一樣，必需另外開啟另一個 Thread 來處理，然而當多個 CSS Animation 同時進行時，如何設計有效率且能與 JavaScript Main Thread 搭配的 Event Model，都會有不少實作上而產生的不同處，這可能又會造成相容性的問題了。
  4. 目前 Webkit 實作 CSS Animation 仍不完全，還有不少 Bug。

Reference

後記：

TR/css3-3d-transforms/

CSS 3D Transforms Module Level 3 (W3C Proposal)

相關文章：

  1. Apple 提出的 CSS2 Animation 來取代 Flash？ (2010/02/07)

Tags: , , , , , , ,

This entry was posted on 星期三, 四月 21st, 2010 at 2:51 下午 by 凜太肉 and is filed under CSS Animation, HTML5, 想法, 研究. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 則回應給 CSS Animation Tutorial

  1. [轉貼] CSS Animation Tutorial « alazy學習筆記 說道：
    2010/08/11 at 10:26 上午

    [...] 2010/04/21/css-animation-20090326/ [...]

    回覆
  2. 回覆
  3. 閒聊最近的感想 說道：
    2011/06/20 at 3:50 上午
    hAntee Bestmathtest G Best Math Test Szh Blog Best Math Test CSS Animation Tutorial « Nothing But The Truth - 軟體技術的真相y Best Math Test rAntee Bestmathtest G Best Math Test Szh Blog Best Math Test CSS Animation Tutorial « Nothing But The Truth - 軟體技術的真相t y Math