楊慶虎

(貴州城市職業(yè)學(xué)院，貴州 貴陽 550025)

0 引言

Web 程序設(shè)計(jì)、移動應(yīng)用開發(fā)，都需要良好的UI界面和有趣的交互。運(yùn)動不僅能有效地突出重點(diǎn)、吸引客戶的眼球，還能增加系統(tǒng)的趣味性，實(shí)現(xiàn)靜止對象無法實(shí)現(xiàn)的功能。如何讓圖片、對話框、導(dǎo)航條、留言面板等網(wǎng)頁元素根據(jù)需要實(shí)現(xiàn)特定的運(yùn)動特效成為系統(tǒng)UI設(shè)計(jì)師關(guān)注和研究的重點(diǎn)。解決JavaScript對象運(yùn)動問題最簡單和有效的方法就是采用運(yùn)動框架?？蚣艿母拍钭钤缙鹪从赟malltalk 環(huán)境，其中最著名的框架是Smalltalk-80 的用戶界面框架MVC(Model-View-Controller)，即將對象、屬性、目標(biāo)等參數(shù)封裝到一個函數(shù)中，使用時調(diào)用函數(shù)即可，被封裝好的函數(shù)即稱為框架。

1 基礎(chǔ)運(yùn)動

基礎(chǔ)運(yùn)動是高級運(yùn)動研究的基礎(chǔ)，所有JavaScript運(yùn)動都包括運(yùn)動驅(qū)動事件、運(yùn)動方式、運(yùn)動速度等。運(yùn)動驅(qū)動事件是驅(qū)使運(yùn)動的觸發(fā)事件，如頁面裝載、鼠標(biāo)移入移出、鼠標(biāo)點(diǎn)擊等。運(yùn)動方式主要是對象運(yùn)動前后屬性的變化，如實(shí)現(xiàn)位置改變的左右移動、上下移動，實(shí)現(xiàn)特定屬性如透明度變化等。運(yùn)動速度主要由定時器和預(yù)設(shè)速度決定。

2 單物體運(yùn)動框架

2.1 勻速運(yùn)動框架

構(gòu)建運(yùn)動框架要注意兩點(diǎn)：首先，在開啟運(yùn)動前要關(guān)閉已有定時器；其次，在運(yùn)動框架中要將運(yùn)動和停止使用if…else…語句隔離開，不能攪和在一起，否則會出現(xiàn)預(yù)想不到的Bug。下面以常見的側(cè)邊欄分享為例進(jìn)行說明。側(cè)邊欄由div1 和span 標(biāo)簽組成，側(cè)邊欄分享JS代碼如下：

上述代碼定時器關(guān)閉條件為Math.abc(oDiv.offsetLeft-iTarget)

2.2 水平緩沖運(yùn)動

在實(shí)際項(xiàng)目開發(fā)中，勻速運(yùn)動的情況比較少見，更多的是緩沖運(yùn)動，如JavaScript 中的手風(fēng)琴效果等。緩沖運(yùn)動實(shí)現(xiàn)的原理是運(yùn)動對象離目標(biāo)值越大運(yùn)動速度越快，反之則越慢，速度的快慢由距離的遠(yuǎn)近決定，用iSpeed 表示對象速度，iTarget 表示目標(biāo)值，offsetValue表示當(dāng)前值，m表示速度系數(shù)，則緩沖運(yùn)動的速度公式可表示為：iSpeed=(iTarget-offsetValue)/m。

例如需要移動的對象為div1，設(shè)計(jì)div1 的初始水平位置為0，通過分析知，div1 緩沖運(yùn)動的速度在不斷減小，當(dāng)值減小至計(jì)算機(jī)內(nèi)存無法精確表示時，此時一直以這個速度循環(huán)運(yùn)行，但對象無法移動，且對象位置停留在較近的某一點(diǎn)但沒有到達(dá)目標(biāo)點(diǎn)。經(jīng)分析知引發(fā)此問題的原因是“ iSpeed=(iTarget-oDiv.offsetLeft)/m;”。因此，需要對程序進(jìn)行改進(jìn)，為了保證對象向左移動或向右移動均有效，引入JavaScript中的取整函數(shù)，當(dāng)速度大于零向左移動時向上取整，即使用cell函數(shù)，當(dāng)速度小于零向右移動時向下取整，即使用floor 函數(shù)，因此在速度語句下面增加速度取整語句：iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed)；同時，由于取整的實(shí)現(xiàn)，對象運(yùn)動速度最后必為1，隨著時間的推移，運(yùn)動物體必將到達(dá)目標(biāo)點(diǎn)，因此可將oDiv.offsetLeft>=iTarget 中的判定條件修改為“==”即可。經(jīng)實(shí)驗(yàn)運(yùn)動對象能實(shí)現(xiàn)緩沖效果并到達(dá)目標(biāo)點(diǎn)。

2.3 側(cè)邊欄緩沖居中

如圖1 所示，設(shè)可視窗口頂部隱藏區(qū)域的高度為scrollTop，窗口可視區(qū)域高度為clientHight，側(cè)邊欄高度為offsetHeight，當(dāng)div 對象垂直居中時不難算出側(cè)邊欄的頂部距離Top，其計(jì)算公式為，Top=scroppTop+(clientHeight-offsetHeight)/2。采用水平緩沖運(yùn)動原理，可以實(shí)現(xiàn)對象div的垂直居中效果。

圖1 側(cè)邊樣垂直居中示意圖

瀏覽器兼容問題一直是JavaScript設(shè)計(jì)的難題，窗口隱藏區(qū)域高度取值（scrollTop），就存在瀏覽器兼容Bug，此處通過或運(yùn)算給予解決，解決的代碼為“scrollTop=document.documentElement.scrollTop||document.body.scrollTop;”。另外，通過測試，發(fā)現(xiàn)div1 對象到達(dá)目標(biāo)后有輕微的抖動，經(jīng)檢查發(fā)現(xiàn)t 值為小數(shù)造成，因此，對目標(biāo)值t采用parseInt(t)取整即可解決Bug。

3 多物體運(yùn)動框架

3.1 多物體單屬性運(yùn)動框架

多物體運(yùn)動要解決搶占定時器問題，必須為每個運(yùn)動對象定義獨(dú)立定時器，同時，不僅要弄清楚運(yùn)動目標(biāo)點(diǎn)是哪里，還要弄清楚運(yùn)動的對象是什么。例如，下列代碼實(shí)現(xiàn)了一組div 寬度隨著鼠標(biāo)移入變寬，移出變窄的運(yùn)動效果。

在多物體運(yùn)動中，運(yùn)動對象是多個，因此不能再使用document.getElementById()方法來獲取對象，而是要通過諸如getElementsByTagName()、document.getElementsByClassName()等方式獲取。上述代碼中“oDiv[i].timer=null;”為每個div 設(shè)置獨(dú)立的定時器，避免了搶占定時器問題，在對象傳參過程中不僅傳遞了目標(biāo)值iTarget，而且還明確了運(yùn)動對象obj。

在多物體運(yùn)動中所有的屬性和變量必須獨(dú)占，不能共用。例如，對多個div 進(jìn)行透明度的運(yùn)動，此時，必須為每個對象單獨(dú)定義透明度存儲對象，如果共享則可能會出現(xiàn)對象A 要讓透明度增大，對象B 卻要讓透明度減小的矛盾。

3.2 多物體任意值運(yùn)動框架

在任意值運(yùn)動框架中首先要解決offset(offsetWidth、offsetHeight)Bug 問題，offset 值不僅包括樣式中對象的長（Width）、寬（Height）值，還包括了邊框等值。

如上述代碼隨著時間的推移div 對象的寬度不斷變窄，但如果給div 中的樣式加上邊框后，實(shí)際的運(yùn)行效果則會隨著時間的推移不斷變寬，這與程序的初衷相悖。為什么會出現(xiàn)這種相?，F(xiàn)象？設(shè)對象的初始寬度（style.width）為100，加了1 像素的邊框后，由于offset 值包括邊框的寬度，因此offsetWidth 值為102，減去1 后對象寬度變?yōu)?01，如此循環(huán)，不難看出對象的寬度會逐漸增大。

解決上述問題最有效的方式即獲取對象的實(shí)際寬、高（width、Height）值，可封裝一個函數(shù)，代碼如下：

然后將對象寬度修改語句“oDiv.style.width=oDiv.offsetWidth-1+'px';”變更為oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';即可。

任意對象任意值的運(yùn)動框架代碼如下：

可將上述代碼封裝到j(luò)s文件中（如MoveFrame.js）供其他運(yùn)動場景使用。

4 運(yùn)動框架使用案例

4.1 使用案例場景說明

使用封裝好的startMove(obj,attr,iTarget)運(yùn)動框架解決系統(tǒng)開發(fā)中的flash運(yùn)動效果如圖2所示。

圖2 運(yùn)動框架效果圖

⑴鼠標(biāo)移入瀏覽窗口左或右邊，以淡入淡出顯示左或右導(dǎo)航箭頭，并且可以點(diǎn)擊箭頭實(shí)現(xiàn)圖片換頁。

⑵大圖換頁方式為從上向下拉，對應(yīng)縮略圖透明度增加至100%，且位于縮略圖中間。

⑶點(diǎn)擊縮略圖，縮略圖透明度增加至100%，且游覽窗口顯示對應(yīng)大圖。

4.2 實(shí)現(xiàn)說明

⑴采用CSS樣式為頁面布局，布局效果如圖1。

⑵引入封裝好的運(yùn)動框架js文件。

⑶代碼實(shí)現(xiàn)。

在代碼實(shí)現(xiàn)中可以通過語句“aEle=document.getElementsByTagName('*');”選出樣式中的所有元素。語句“if(this.index==iNow)return;”避免重復(fù)點(diǎn)擊激發(fā)運(yùn)動效果。由于主窗口圖層堆疊在一起，前面的圖層擋住了后面的圖層，因此，必須借助語句“aBigLi[iNow].style.zIndex=iMinZindex++;”將當(dāng)前圖層移至頂層，這樣才能使用戶看到圖片向下拉伸的運(yùn)動效果。設(shè)有m 張縮略圖，點(diǎn)擊首張和最后一張縮略圖時，其位置不變，即為0 和-（m-2）*li.width，點(diǎn)擊其余圖片時移動至中間，因此，其位置變化為-（m-1）*li.width，即使用if（iNow==0）{…}else if(iNow==aSmallLi.length-1){…}else{…}語句控制。tab()函數(shù)實(shí)現(xiàn)了縮略圖與大圖運(yùn)動的關(guān)聯(lián)，后續(xù)程序中多次用到，因此進(jìn)行了封裝。

上述程序應(yīng)用運(yùn)動框架封裝實(shí)現(xiàn)了瀏覽窗口導(dǎo)航箭頭換頁，大圖、小圖運(yùn)動效果等，程序簡潔，易讀性好，代碼利用率高。運(yùn)動框架功能強(qiáng)大，不僅可以較好的完成上述運(yùn)動效果，還可以用該框架完成諸如自動播放、增加圖片說明等運(yùn)動事件處理。

5 總結(jié)

運(yùn)動框架是構(gòu)建系統(tǒng)運(yùn)動的主要方式之一，應(yīng)用好運(yùn)動框架不僅能高效地實(shí)現(xiàn)運(yùn)動效果，使程序簡潔、易讀、提高代碼復(fù)用率，而且還能減少程序維護(hù)工作量，提高系統(tǒng)維護(hù)效率。本文從前端運(yùn)動設(shè)計(jì)驅(qū)動事件、運(yùn)動方式、運(yùn)動速度等基礎(chǔ)進(jìn)行分析，對單物體勻速運(yùn)動、水平緩沖運(yùn)動、側(cè)邊欄緩沖居中的特點(diǎn)進(jìn)行研究，并基于單物體運(yùn)動的基礎(chǔ)構(gòu)建了多物體任意值運(yùn)動框架，解決了系統(tǒng)中任意對象、任意屬性、任意值的運(yùn)動設(shè)計(jì)。設(shè)計(jì)的案例可以應(yīng)用于系統(tǒng)開發(fā)中，也可以做為教學(xué)實(shí)踐案例。在系統(tǒng)的實(shí)際應(yīng)用中可以基于JSON數(shù)據(jù)對框架改進(jìn)和應(yīng)用，實(shí)現(xiàn)完美運(yùn)動框架。