基于HTML5技術(shù)的物理動畫開發(fā)與應(yīng)用

宋洪曉，張琦瑋，劉建強

(1. 山東大學(xué) 物理學(xué)院 國家級實驗教學(xué)示范中心，山東 濟(jì)南 250100；2. 高等教育出版社物理分社，北京 100029)

近年來，我國在線教育得到了長足的發(fā)展，物理學(xué)科也順應(yīng)潮流發(fā)展，涌現(xiàn)出大量新形態(tài)教材、線上課程等.目前在物理學(xué)科的線上學(xué)習(xí)中，還在大量使用Flash動畫.Flash動畫最突出的優(yōu)點是支持ActionScript編程，能夠提供強大的前端交互性，是圖像、視頻等其他媒體難以做到的.但是Flash動畫只能在電腦上播放，而不能在手機、平板電腦等移動設(shè)備上播放，想開發(fā)既能在電腦上運行又能在移動設(shè)備上運行的交互動畫，目前最佳的方案是使用HTML5(簡稱H5)技術(shù).

1 H5技術(shù)簡介

H5是一系列前端技術(shù)的統(tǒng)稱，其集成了JavaScript開發(fā)語言，能在瀏覽器上繪制矢量圖形，功能上完全可以取代Flash.H5為移動設(shè)備進(jìn)行了優(yōu)化，被IOS和安卓兩大移動系統(tǒng)原生支持，同時在電腦端也被各大瀏覽器廣泛支持.

由于移動設(shè)備的便捷性，使用移動設(shè)備上網(wǎng)已經(jīng)成為主流.據(jù)統(tǒng)計，到2020年6月，國內(nèi)網(wǎng)民使用臺式機和筆記本電腦上網(wǎng)的比例為37.3%和31.8%，而使用手機和平板電腦的比例為99.2%和27.5%[1]，移動設(shè)備占據(jù)壓倒性的多數(shù).在這種情況下，只能在電腦端運行的Flash就成了雞肋，2012年，F(xiàn)lash的開發(fā)商Adobe公司宣布不再發(fā)布新版Flash開發(fā)工具[2]，2020年底之后將停止對Flash播放器的更新支持[3]，這意味著Flash在商用領(lǐng)域已經(jīng)被技術(shù)淘汰.

在《加快推進(jìn)教育現(xiàn)代化實施方案(2018-2022年)》中，提出了“以互聯(lián)網(wǎng)等信息化手段服務(wù)教育教學(xué)全過程”的要求，要達(dá)到這個要求，就必須解決目前移動設(shè)備上缺少交互動畫的問題.物理類線上學(xué)習(xí)中應(yīng)用Flash動畫較多，如果這些動畫不能遷移到移動設(shè)備運行，移動學(xué)習(xí)的效果將會大打折扣，影響線上學(xué)習(xí)的廣泛性和便利性.很多線上學(xué)習(xí)環(huán)境的建設(shè)者都被Flash動畫不能在移動設(shè)備播放的問題所困擾，例如前期的新形態(tài)教材，圖片、視頻等資料可以用手機掃描教材上印刷的二維碼直接訪問，而Flash動畫只能用電腦登錄課程網(wǎng)站訪問[4].

使用H5技術(shù)開發(fā)交互動畫正是解決移動設(shè)備缺少交互動畫難題的最優(yōu)技術(shù)方案[5].H5動畫目前在商業(yè)領(lǐng)域的應(yīng)用風(fēng)生水起，例如微信小游戲跳一跳、淘寶養(yǎng)貓分紅包等游戲類動畫功能都是使用其開發(fā)的，目前H5技術(shù)在教學(xué)中已有較多應(yīng)用[6]，但動畫功能在教學(xué)中的應(yīng)用報道較少.本文作者在《物理學(xué)》(第五版)新形態(tài)教材建設(shè)中，進(jìn)行了一系列H5動畫的設(shè)計和開發(fā)，本文主要結(jié)合實例對H5動畫的設(shè)計思路與開發(fā)流程、選題與物理建模、界面與交互功能設(shè)計等物理類H5動畫的開發(fā)設(shè)計與應(yīng)用進(jìn)行總結(jié).

2 H5動畫的設(shè)計思路與開發(fā)流程

如果只從把Flash動畫遷移到移動設(shè)備運行的角度考慮，可以分兩種情況區(qū)別處理.Flash制作的小故事、MTV之類，交互性較少，使用屏幕捕捉的方式轉(zhuǎn)錄成視頻更簡單[7].而應(yīng)用ActionScript程序進(jìn)行計算和邏輯判斷的Flash動畫最重要的是交互性，就必須借助Javascript程序才能實現(xiàn)對應(yīng)功能.

一個H5動畫從構(gòu)思到完成開發(fā)，大體可以分成三個步驟：一是選題與物理建模，二是界面與交互功能設(shè)計，三是程序的代碼編寫.整個開發(fā)過程最重要的是前兩步，需要設(shè)計者對教材內(nèi)容和物理規(guī)律有深刻的理解，最好既有物理教學(xué)經(jīng)驗，又思維活躍，熟悉計算機和移動設(shè)備的使用.

2.1 選題與物理建模

設(shè)計開發(fā)H5動畫費時費力，因此每一個H5動畫都要好鋼用在刀刃上，在H5動畫選題時，先梳理課程知識體系中的重點難點，評估哪些知識點增加交互性能促進(jìn)學(xué)生對知識的理解和掌握，對它們進(jìn)行攻關(guān)設(shè)計.開發(fā)H5動畫需要考慮動畫程序編寫的可行性，有明確的物理公式描述或者能夠數(shù)值模擬出近似結(jié)果的物理現(xiàn)象才適合用程序進(jìn)行表現(xiàn).

從編碼容易實現(xiàn)的角度，運動類的物理動畫最好能給出運動物體x、y兩個方向位置分量的時間參數(shù)方程，例如斜拋運動、振動和波等.根據(jù)公式和參數(shù)值繪制曲線類的動畫，如“普朗克公式的曲線”等也比較容易實現(xiàn)；而一些復(fù)雜物理現(xiàn)象的模擬則需要充分利用矢量圖形繪制的特點，并結(jié)合一定的編程技巧才能實現(xiàn)，例如“圓孔的夫瑯禾費衍射”(圖1a，掃描下方二維碼可運行該動畫)，就使用徑向的顏色漸變模擬光斑的亮度變化，實現(xiàn)起來有一定難度.而受制于手機處理器的性能和功耗，大計算量的物理現(xiàn)象模擬，例如“氣體分子熱運動模擬”(圖1b，掃描下方二維碼可運行該動畫)，就需要在分子數(shù)量、碰撞建模復(fù)雜程度等方面做出妥協(xié).

(a) (b)圖1 動畫的選題與物理建模

在構(gòu)思H5動畫時，可以參考相對成熟的Flash編程動畫.Flash的ActionScript語言和JavaScript語言遵循同樣的ECMA標(biāo)準(zhǔn)，有很多類似之處.Flash編程動畫能夠?qū)崿F(xiàn)的效果，H5基本也能通過編程技巧實現(xiàn)，而H5動畫交互方面的功能更加強大一些.

2.2 界面與交互功能設(shè)計

H5動畫運行環(huán)境從電腦改變到手機上，最大的變化是交互方式.電腦輸入數(shù)據(jù)主要使用鍵盤鼠標(biāo)，而現(xiàn)在的智能手機大多沒有實體鍵盤.H5動畫依靠虛擬鍵盤輸入效率較低，體驗較差，使用滾動條結(jié)合加減按鈕輸入數(shù)據(jù)操作更便捷，例如圖1中“圓孔的夫瑯禾費衍射”和“氣體的分子熱運動模擬”兩個動畫中都是使用滾動條改變參數(shù)值的.

手機觸屏操作和電腦上鼠標(biāo)點擊類似，手機更強大之處在于支持多點觸屏，例如在“兩點電荷的電場線”動畫中(圖2a，掃描下方二維碼可運行該動畫)，可以用兩個手指分別拖動兩點電荷的位置，程序?qū)崟r根據(jù)電荷位置，計算出電場線形態(tài)并在屏幕上繪制出來，這種多點觸屏交互比鼠標(biāo)每次只能點擊、拖動一個點要操作便捷.H5還可以獲取多種手機傳感器的數(shù)據(jù)，例如手機機身的傾斜角度、地磁角度等，能夠設(shè)計出類似手機模擬方向盤這樣更有創(chuàng)意的交互性應(yīng)用，但是顧及到H5動畫在電腦端運行時的兼容性，最好提供按鍵操作等作為補充.

(a) (b)圖2 動畫的交互設(shè)計

H5強大的交互性使其不僅能用在理論課程的學(xué)習(xí)中，也可以用來開發(fā)物理實驗方面的動畫.雖然要做成栩栩如生的仿真實驗需要比較大的開發(fā)工程量和繪圖計算量，但是用簡單的小動畫模擬基本的儀器使用、簡單的實驗操作也會有不錯的效果.例如很多指針表盤上有一面小鏡子，當(dāng)指針和它在鏡中的像重合時，表示人眼正對盤面，才能得到正確的讀數(shù).“表頭指針的讀數(shù)(鏡面對正)”動畫(圖2b，掃描下方二維碼可運行該動畫)，就是模擬了這種表盤的讀數(shù)過程.手指在屏幕上拖動可以模擬觀察視角的改變，在指針、刻度分別和鏡中成像重合時進(jìn)行讀數(shù)，將讀數(shù)填入對應(yīng)的輸入框，程序可以對讀數(shù)是否準(zhǔn)確、有效數(shù)字位數(shù)是否正確等進(jìn)行判斷并彈出對話框提示.

2.3 程序的代碼編寫

完成前兩步設(shè)計后，程序的代碼編寫這一步可以由設(shè)計者獨立完成，也可以外包給技術(shù)公司完成.H5動畫使用的Javascript語言基本語法規(guī)則類似C語言，入門不算太難.從更好的設(shè)計H5動畫的角度，物理教材的作者也有必要學(xué)習(xí)一些編程的知識.

3 H5動畫的應(yīng)用實踐

《中國教育現(xiàn)代化2035》提出要“充分利用現(xiàn)代信息技術(shù)，豐富并創(chuàng)新課程形式”.信息技術(shù)的高速發(fā)展，伴隨著硬件系統(tǒng)的革新，改變了人們的生活方式，也帶來了動畫開發(fā)技術(shù)的更迭.學(xué)生使用手機、平板電腦等移動設(shè)備代替電腦進(jìn)行學(xué)習(xí)成為一種趨勢，物理類的線上學(xué)習(xí)資源開發(fā)也應(yīng)該與時俱進(jìn)，建設(shè)適應(yīng)移動設(shè)備的學(xué)習(xí)環(huán)境.

筆者在建設(shè)高教出版社出版的《物理學(xué)》(第五版)新形態(tài)教材過程中，嘗試使用H5開發(fā)交互動畫，共開發(fā)H5交互動畫77個，分布于全書20章中的17章，覆蓋力、熱、光、電磁、近代物理等內(nèi)容[8]，本文中前三個示例就選自其中.此后又在《簡明物理學(xué)》(第二版，高教出版社)和《大學(xué)物理實驗》(第三版，科學(xué)出版社)等新形態(tài)教材的建設(shè)中使用了H5交互動畫，例如《大學(xué)物理實驗》中使用H5開發(fā)交互實驗動畫17個，本文中的示例4“表頭指針的讀數(shù)”選自其中. 實踐證明H5技術(shù)完全可以勝任制作物理類交互動畫的要求，能夠填補移動設(shè)備上Flash被淘汰造成的交互動畫空缺，同學(xué)們也反映課本中的H5動畫兼具趣味性和便捷性.

4 小結(jié)

H5動畫通過交互的學(xué)習(xí)方式，增強了學(xué)生的參與度，能夠有效的提高學(xué)習(xí)興趣，加深對物理重點難點知識的理解，在移動設(shè)備端的在線學(xué)習(xí)中具有不可替代的重要作用.在物理學(xué)在線學(xué)習(xí)環(huán)境建設(shè)中，H5動畫、音視頻、圖形圖像等多種形式的學(xué)習(xí)資源各有所長，應(yīng)該根據(jù)教學(xué)內(nèi)容需要選擇使用，揚長避短，組合成一個有機的整體，提高在線學(xué)習(xí)的學(xué)習(xí)效率和學(xué)習(xí)效果.

H5作為新一代的前端開發(fā)技術(shù)，目前在教學(xué)網(wǎng)站平臺的建設(shè)等方面已經(jīng)有較多應(yīng)用，但是開發(fā)交互動畫等教學(xué)資源的應(yīng)用還較少，在這方面有必要進(jìn)一步拓展和推廣，使其在線上學(xué)習(xí)環(huán)境建設(shè)、智能化教學(xué)、數(shù)字教育資源共建共享等方面發(fā)揮更大的作用.