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

宋洪曉，張琦瑋，劉建強(qiáng)

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

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

1 H5技術(shù)簡(jiǎn)介

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

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

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

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

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

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

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

2.1 選題與物理建模

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

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

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

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

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

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

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

(a) (b)圖2 動(dòng)畫的交互設(shè)計(jì)

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

2.3 程序的代碼編寫

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

3 H5動(dòng)畫的應(yīng)用實(shí)踐

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

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

4 小結(jié)

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

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