吳瑕

（四川職業(yè)技術(shù)學(xué)院計算機(jī)科學(xué)系,四川 遂寧 629000）

用Javascri pt DOM實現(xiàn)平穩(wěn)退化的平滑動畫

吳瑕

（四川職業(yè)技術(shù)學(xué)院計算機(jī)科學(xué)系,四川 遂寧 629000）

讓網(wǎng)頁元素動起來是目前W eb前端開發(fā)最流行的應(yīng)用之一，本文介紹用Javascript DOM實現(xiàn)一種性能優(yōu)化的支持平穩(wěn)退化的網(wǎng)頁平滑動畫。

Javascript DOM；W eb前端;平滑動畫

1 平滑動畫設(shè)計思路

讓網(wǎng)頁元素動起來是目前Web前端開發(fā)中最流行的應(yīng)用之一，可以增強(qiáng)網(wǎng)頁視覺提示效果，讓網(wǎng)頁更具吸引力。Javascript能夠按預(yù)定時間間隔重復(fù)調(diào)用某個函數(shù)，持續(xù)改變元素樣式從而讓元素的位置隨著時間推移而不斷發(fā)生變化，實現(xiàn)動畫的效果。下面介紹一個利用JavascriptDOM實現(xiàn)支持平穩(wěn)退化的網(wǎng)頁平滑動畫實例。

如圖1-1所示網(wǎng)頁中包含一系列鏈接，用戶把鼠標(biāo)指針懸停在某個鏈接上時，實現(xiàn)這個鏈接將前往何方的圖片預(yù)覽。如果按傳統(tǒng)的設(shè)計思路為每個鏈接分別準(zhǔn)備一張預(yù)覽圖片，在切換時總會有一些延遲，而用戶總是期望一種更快更好的效果，所以改進(jìn)設(shè)計思路以實現(xiàn)一種平滑動畫的效果。設(shè)計思路如下:

（1）為所有圖片設(shè)計一張“集體照”，圖片文件名為topics.gif，如圖1-2；

（2）隱藏圖片topics.gif的絕大部分，只顯示圖片的某個100*100像素部分；

（3）編寫函數(shù)moveElement實現(xiàn)移動圖片的功能：當(dāng)用戶把鼠標(biāo)指針懸停在某個鏈接時，將圖片向左或向右移動，顯示鏈接與圖片topics.gif的對應(yīng)部分；

（4）編寫函數(shù)relatedEvents實現(xiàn)關(guān)聯(lián)動畫的功能：將列表（鏈接清單）中的每個鏈接的onmouseover事件與調(diào)用moveElement函數(shù)的行為關(guān)聯(lián)起來；

（5）編寫addLoadEvent函數(shù)，用該函數(shù)調(diào)用related Events函數(shù)，確保頁面加載就及時執(zhí)行prepareSlideshow函數(shù)。

圖1 -1鼠標(biāo)指針懸停在網(wǎng)頁鏈接上顯示圖片對應(yīng)部分

圖1 -2圖片

2 編碼實現(xiàn)

2.1 HTML結(jié)構(gòu)層

編寫list.html文檔，并引入樣式表設(shè)置網(wǎng)頁樣式，代碼如下（CSS表示層代碼省略）：

2.2 Javascript DOM行為層

2.2.1 addLoadEvent(func)函數(shù)

這是一個通用型函數(shù)，它的功能是可以讓頁面加載完畢就立即執(zhí)行多個函數(shù)，代碼如下：

2.2.2 moveElement函數(shù)

這個函數(shù)的功能是實現(xiàn)網(wǎng)頁元素移動，接受的四個實參分別是：被移動對象的ID，移動目標(biāo)位置left值，移動目標(biāo)位置top值，調(diào)用移動函數(shù)的時間間隔。代碼如下：

2.2.3 related Events函數(shù)

2.3 關(guān)鍵點分析

2.3.1 對平滑動畫效果的改進(jìn)

前面的move Element函數(shù)每次執(zhí)行只能把圖片移動一個像素（1px）的距離，如果需要移動的距離較大就會顯得很慢，動畫效果不理想，可以改進(jìn)動畫效果，其基本思想是：如果圖片與目標(biāo)位置距離較遠(yuǎn)就讓它每次前進(jìn)一大步，如果距離較近就讓它每次前進(jìn)一小步，因此可以計算出元素與目的地之間的距離，讓元素每次前進(jìn)該距離的1/10，如果該距離小于10，就用ceil方法來向“大于”方向取該距離最接近的整數(shù)值。因此對move Element函數(shù)中元素移動的代碼（代碼加粗部分）修改如下：

修改以后當(dāng)鼠標(biāo)移動到某個鏈接上時，圖片會迅速移動一大段距離，隨著圖片越來越接近目的地，它會“放慢”腳步，動畫效果更加平滑和迅速。

2.3.2 對平穩(wěn)退化的考慮

所謂平穩(wěn)退化，就是通過正確的編碼讓不支持Javascript的用戶瀏覽器也能順利瀏覽網(wǎng)頁。在List.html文檔里包含一些只是為了能夠用JavaScript代碼實現(xiàn)動畫效果而存在的標(biāo)記：

2.4 調(diào)用相關(guān)腳本文件

將以上js文件都保存在同一個文件夾中，在list.html中引用這幾個腳本文件：addLoadEvent.js、insertAfter.js、moveElement.js、relatedE-vents.js。此時打開list.html網(wǎng)頁文件，就可以看到效果完美的支持平穩(wěn)退化的平滑動畫。

3 小結(jié)

網(wǎng)頁動畫是樣式隨時間變化的完美例子之一，本例經(jīng)過對傳統(tǒng)網(wǎng)頁動畫設(shè)計思路的改進(jìn)，利用JavascriptDOM實現(xiàn)了一種支持平穩(wěn)退化的網(wǎng)頁元素的平滑動畫，而且這種編碼方式讓網(wǎng)頁的結(jié)構(gòu)層、表示層和行為層徹底分離，代碼優(yōu)化。該實例動畫功能完美，對支持Javascript的瀏覽器用戶提供了賞心悅目的視覺反饋，不支持Javascript的瀏覽器用戶看不到動畫圖片的出現(xiàn)，不影響其瀏覽體驗。如果想進(jìn)一步加強(qiáng)鏈接清單和圖片的視覺聯(lián)系，可以修改樣式表文件實現(xiàn)一些更精彩的效果。

[1]Jeremy Keith,Jeffrey Sambells.JavaScript DOM編程藝術(shù)[M].北京:人民郵電出版社,2014.

[2]盧淑萍，樊紅珍，徐紅波，等.JavaScript與jQuery實戰(zhàn)教程[M].北京:清華大學(xué)出版社,2015.

TP311.1

A

1672-2094（2017）05-0151-04

2017-05-24

吳 瑕（1983-），女，四川遂寧人，四川職業(yè)技術(shù)學(xué)院講師。研究方向：計算機(jī)應(yīng)用。

張隆輝