在AJAX如火如荼的今天，相信大家對Prototype這個Javascript類庫應該都有所耳聞，它也的確使編寫Javascript變得更簡單。關于Prototype的文章，《Prototype簡介》、《Prototype源碼》諸如此類數不勝數；所以本文不會再做這幾方面的介紹，并假設讀者對Prototype有一定了解。
網頁動畫與原理
提到網頁動畫，大家首先想起應該Flash。不知道大家沒有開發過Flash動畫，故我想對此作一個簡單的介紹（在我讀大學的時候，對Flash也曾有過癡迷，所以也略懂一二）。Flash的動畫主要分兩類：漸變動畫和逐幀動畫。
- 漸類動畫——用戶在時間軸上創建開始的關鍵幀和結束的關鍵幀，開發環境（Macromedia Profassional Flash 8等）會根據以上所創建的關鍵幀的顏色、位置和形狀等，在計算出中間的過渡幀并添加到相應的時間軸上。這適用于創建簡單的動畫。
- 逐幀動畫——用戶在時間軸的每幀上創建關鍵幀，并在其中繪制相應的圖按。這適用于創建復雜的動畫。
在Javascript中由于沒有繪圖API（應用程序接口），故只可以使用DOM+CSS改變元素的外觀。而通過每隔一段時間調用一次改變元素外觀的函數，實現類似Flash的漸類動畫。
具體實現
因為不同的Javascript動畫實現的基本原理都相同，所以可以創建一個基類將其抽象出來。代碼如下：
var
?
Animation
?
=
?
Class.create();
Animation.prototype
?
=
?
{
?
? ?
/*
------------------------------------------------------------------------
?
? ? | 用途：
?
? ? | ? ?構造函數
?
? ? |
?
? ? | 參數：
?
? ? | ? ?element 將要實現動畫效果的元素
?
? ? | ? ?fps ? ? 每秒播放幀數
?
? ? ------------------------------------------------------------------------
*/
?
? ?
?
? ?initialize:
?
function
(element, fps)
?
{
?
? ? ? ?
this
.element
?
=
?
$(element);
?
? ? ? ?
this
.interval
?
=
?
Math.round(
1000
?
/
?
fps);
?
? ? ? ?
?
? ? ? ?
this
.isPlaying
?
=
?
false
;
?
? ? ? ?
this
.currentFrame
?
=
?
1
; ??
?
? ? ? ?
?
? ? ? ?
//
創建一個用于存儲中間狀態的臨時對象
?
? ? ? ?
this
.temp
?
=
?
{ }
; ? ? ? ? ? ??
?
? ?}
,
?
? ?
?
? ?
/*
------------------------------------------------------------------------
?
? ? | 用途：
?
? ? | ? ?子類覆蓋該方法，實現自定義的動畫補間
?
? ? ------------------------------------------------------------------------
*/
?
? ?
?
? ?_createTweens:
?
function
(original, transformed, frames)
?
{ }
,
?
? ?
?
? ?
/*
------------------------------------------------------------------------
?
? ? | 用途：
?
? ? | ? ?創建動畫補間
?
? ? |
?
? ? | 參數：
?
? ? | ? ?original ? ?開始狀態
?
? ? | ? ?transformed 結束狀態
?
? ? | ? ?frames ? ? ?動畫幀數
?
? ? ------------------------------------------------------------------------
*/
?
? ?
?
? ?createTweens:
?
function
(original, transformed, frames)
?
{
?
? ? ? ?
if
(
this
.isPlaying)
?
{
?
? ? ? ? ? ?
this
.stop();
?
? ? ? ?}
?
? ? ? ?
?
? ? ? ?
this
._createTweens(original, transformed, frames);
?
? ? ? ? ? ?
?
? ? ? ?
this
.original
?
=
?
original;
?
? ? ? ?
this
.transformed
?
=
?
transformed;
?
? ? ? ?
this
.frames
?
=
?
frames;
?
? ? ? ?
?
? ? ? ?
//
將開始狀態拷貝到臨時對象
?
? ? ? ?Object.extend(
this
.temp, original); ? ? ? ?
?
? ?}
,
?
? ?
?
? ?
/*
------------------------------------------------------------------------
?
? ? | 用途：
?
? ? | ? ?判斷臨時對象狀態是否超出結束狀態
?
? ? |
?
? ? | 參數：
?
? ? | ? ?prop 狀態屬性名稱
?
? ? ------------------------------------------------------------------------
*/
?
??
?
? ?_isOverstep:
?
function
(prop)
?
{
?
? ? ? ?
if
(
this
.original[prop]
?
<
?
this
.transformed[prop])
?
{
?
? ? ? ? ? ?
return
?
this
.temp[prop]
?
>
?
this
.transformed[prop]; ?
?
? ? ? ?}
?
?
? ? ? ?
return
?
this
.temp[prop]
?
<
?
this
.transformed[prop];
?
? ?}
,?
?
? ?
?
? ?_prepare:
?
function
()
?
{ }
,
?
? ?
?
? ?_draw:
?
function
(frame)
?
{ }
,
?
? ?
?
? ?_drawFrame:
?
function
()
?
{
?
? ? ? ?
if
(
this
.isPlaying)
?
{
?
? ? ? ? ? ?
if
(
this
.currentFrame
?
<
?
this
.frames)
?
{ ? ? ? ? ? ? ? ?
?
? ? ? ? ? ? ? ?
this
._prepare();
?
? ? ? ? ? ? ? ?
this
._draw(
this
.temp);
?
? ? ? ? ? ? ? ?
?
? ? ? ? ? ? ? ?
this
.currentFrame
?
++
;
?
? ? ? ? ? ?}
?
else
?
{
?
? ? ? ? ? ? ? ?
//
最后一幀繪制結束狀態 ? ? ? ? ? ?
?
? ? ? ? ? ? ? ?
this
._draw(
this
.transformed);
?
? ? ? ? ? ? ? ?
this
.stop();
?
? ? ? ? ? ?}
?
? ? ? ?}
?
? ?}
,
?
? ?
?
? ?_play:
?
function
()
?
{ }
,
?
? ?
?
? ?play:
?
function
()
?
{
?
? ? ? ?
if
(
!
this
.isPlaying)
?
{
?
? ? ? ? ? ?
this
._play();
?
? ? ? ? ? ?
?
? ? ? ? ? ?
this
.isPlaying
?
=
?
true
;
?
? ? ? ? ? ?
this
.timer
?
=
?
setInterval(
this
._drawFrame.bind(
this
),
?
this
.interval); ? ? ? ? ? ?
?
? ? ? ?}
?
? ?}
,
?
? ?
?
? ?_stop:
?
function
()
?
{ }
,
?
? ?
?
? ?stop:
?
function
()
?
{
?
? ? ? ?
if
(
this
.isPlaying)
?
{
?
? ? ? ? ? ?
this
._stop();
?
? ? ? ? ? ?
?
? ? ? ? ? ?
//
回到開始狀態
?
? ? ? ? ? ?
this
.isPlaying
?
=
?
false
;
?
? ? ? ? ? ?
this
.currentFrame
?
=
?
1
;
?
? ? ? ? ? ?
?
? ? ? ? ? ?Object.extend(
this
.temp,
?
this
.original);
?
? ? ? ? ? ?clearInterval(
this
.timer);
?
? ? ? ?}
?
? ?}
,
?
? ?
?
? ?_pause:
?
function
()
?
{ }
,
?
? ?
?
? ?pause:
?
function
()
?
{
?
? ? ? ?
if
(
this
.isPlaying)
?
{ ? ? ?
?
? ? ? ? ? ?
this
._pause();
?
? ? ? ? ? ? ? ? ?
?
? ? ? ? ? ?
this
.isPlaying
?
=
?
false
;
?
? ? ? ? ? ?clearInterval(
this
.timer);
?
? ? ? ?}
?
? ?}
}
Animation類實現了一些公用的管理內部狀態的操作，如播放動畫、停止動畫和暫停動畫等。接下來，創建特定的動畫變得相當容易了，下面讓我們來看一個形狀和位置漸變的動畫實現，代碼如下：
var
?
ShapeAnimation
?
=
?
Class.create();
ShapeAnimation.prototype
?
=
?
Object.extend(
new
?
Animation(),
?
{
?
??
?
?
?
/*
------------------------------------------------------------------------
?
? ? | 用途：
?
? ? | ? ?覆蓋父類的空白實現，計算每幀的變化量
?
? ? ------------------------------------------------------------------------
*/
?
? ?
?
? ?_createTweens:
?
function
(original, transformed, frames)
?
{
?
? ? ? ?
this
.xSpan
?
=
?
Math.round((transformed.x
?
-
?
original.x)
?
/
?
frames);
?
? ? ? ?
this
.ySpan
?
=
?
Math.round((transformed.y
?
-
?
original.y)
?
/
?
frames);
?
? ? ? ?
this
.wSpan
?
=
?
Math.round((transformed.w
?
-
?
original.w)
?
/
?
frames);
?
? ? ? ?
this
.hSpan
?
=
?
Math.round((transformed.h
?
-
?
original.h)
?
/
?
frames);
?
? ?}
,
?
? ?
?
? ?
/*
------------------------------------------------------------------------
?
? ? | 用途：
?
? ? | ? ?覆蓋父類的空白實現，計算當前的狀態。如果超出結束狀態，保持結束狀態不變
?
? ? ------------------------------------------------------------------------
*/
?
? ?_prepare:
?
function
()
?
{?
?
? ? ? ?
this
.temp.x
?
=
?
this
._isOverstep('x')
?
?
?
this
.transformed.x :
?
this
.temp.x
?
+
?
this
.xSpan;
?
? ? ? ?
this
.temp.y
?
=
?
this
._isOverstep('r')
?
?
?
this
.transformed.y :
?
this
.temp.y
?
+
?
this
.ySpan;
?
? ? ? ?
this
.temp.w
?
=
?
this
._isOverstep('w')
?
?
?
this
.transformed.w :
?
this
.temp.w
?
+
分享到：
發表評論
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
評論