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

吳瑕

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

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

吳瑕

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

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

Javascript DOM；W eb前端;平滑動(dòng)畫

1 平滑動(dòng)畫設(shè)計(jì)思路

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

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

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

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

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

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

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

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

圖1 -2圖片

2 編碼實(shí)現(xiàn)

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

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

2.2 Javascript DOM行為層

2.2.1 addLoadEvent(func)函數(shù)

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

2.2.2 moveElement函數(shù)

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

2.2.3 related Events函數(shù)

2.3 關(guān)鍵點(diǎn)分析

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

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

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

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

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

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

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

3 小結(jié)

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

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

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

TP311.1

A

1672-2094（2017）05-0151-04

2017-05-24

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

張隆輝