用Javascri pt DOM實現平穩退化的平滑動畫

吳瑕

（四川職業技術學院計算機科學系,四川 遂寧 629000）

用Javascri pt DOM實現平穩退化的平滑動畫

吳瑕

（四川職業技術學院計算機科學系,四川 遂寧 629000）

讓網頁元素動起來是目前W eb前端開發最流行的應用之一，本文介紹用Javascript DOM實現一種性能優化的支持平穩退化的網頁平滑動畫。

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

1 平滑動畫設計思路

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

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

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

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

（3）編寫函數moveElement實現移動圖片的功能：當用戶把鼠標指針懸停在某個鏈接時，將圖片向左或向右移動，顯示鏈接與圖片topics.gif的對應部分；

（4）編寫函數relatedEvents實現關聯動畫的功能：將列表（鏈接清單）中的每個鏈接的onmouseover事件與調用moveElement函數的行為關聯起來；

（5）編寫addLoadEvent函數，用該函數調用related Events函數，確保頁面加載就及時執行prepareSlideshow函數。

圖1 -1鼠標指針懸停在網頁鏈接上顯示圖片對應部分

圖1 -2圖片

2 編碼實現

2.1 HTML結構層

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

2.2 Javascript DOM行為層

2.2.1 addLoadEvent(func)函數

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

2.2.2 moveElement函數

這個函數的功能是實現網頁元素移動，接受的四個實參分別是：被移動對象的ID，移動目標位置left值，移動目標位置top值，調用移動函數的時間間隔。代碼如下：

2.2.3 related Events函數

2.3 關鍵點分析

2.3.1 對平滑動畫效果的改進

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

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

2.3.2 對平穩退化的考慮

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

2.4 調用相關腳本文件

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

3 小結

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

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

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

TP311.1

A

1672-2094（2017）05-0151-04

2017-05-24

吳 瑕（1983-），女，四川遂寧人，四川職業技術學院講師。研究方向：計算機應用。

張隆輝