宋洪曉，張琦瑋，劉建強

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

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

1 H5技術簡介

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

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

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

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

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

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

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

2.1 選題與物理建模

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

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

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

在構思H5動畫時，可以參考相對成熟的Flash編程動畫.Flash的ActionScript語言和JavaScript語言遵循同樣的ECMA標準，有很多類似之處.Flash編程動畫能夠實現的效果，H5基本也能通過編程技巧實現，而H5動畫交互方面的功能更加強大一些.

2.2 界面與交互功能設計

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

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

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

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

2.3 程序的代碼編寫

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

3 H5動畫的應用實踐

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

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

4 小結

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

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