技術的融合實踐
——以邁克耳孫干涉實驗為例

宋洪曉，徐建強，韓廣兵

(山東大學 物理學院 物理國家級實驗教學示范中心，山東 濟南 250100)

近年來，信息技術的高速發展，給大學物理實驗教學帶來了巨大的改變，既有多媒體教學方式的普及、實驗儀器的自動化等儀器設備層面的改變，也有教學方式和教學理念等的改變[1]. 在物理實驗教學中，借助現代信息技術，虛擬仿真、遠程教學等實驗教學方式讓學生有了接觸大型貴重儀器以及特殊實驗環境的機會[2]. 但是在面對面的實驗課堂教學及紙質實驗教材等比較基礎的常規實驗教學環節，新技術運用較少，仍停留在多媒體教學層面，授課效率和教學效果有待進一步提高. 本文將在手機端運行的HTML5動畫技術和二維碼技術，融入到物理實驗課堂教學和實驗新形態教材建設中，在信息技術與物理實驗教學融合方面進行研究和探索.

1 新生代大學生給物理實驗教學帶來新挑戰

新生代大學生被稱為“互聯網原住民”[3]，他們從小接觸電子產品，使用互聯網，接受生動活潑、形式多樣的教育方式[4]. 接受多種教學方式的學生群體給大學物理實驗教學帶來了巨大的挑戰. 物理實驗教學注重培養學生的動手操作能力，大量常規的實驗教學在課堂中占據主要地位，可讓學生通過反復操作達到提高動手能力的目的，但該種教學方式容易讓學生感覺枯燥. 在“注意力”資源被日益重視的背景下[5]，培養大學生的學習興趣具有重要意義. 課堂教學是物理實驗教學的重要環節，常規物理實驗教學大多采用“學生課前預習、教師課堂上集中講授、學生動手操作、課后復習鞏固”的教學流程. 課前預習環節需要增加學生的主動性和趣味性，提高自學效果；而教師集中講授環節則需要吸引學生的注意力，提高教學效率，盡量壓縮講授時間，以便給學生預留更多的時間動手操作. 學生在預習和教師集中講授這2個環節經常提不起興趣，從優化實驗課堂教學效果出發，增加這2個環節的信息技術含量，吸引學生的“注意力”資源，同時增加師生現場互動、聚焦實驗重點難點，有助于提高實驗教學效果.

2 充分利用手機作為物理實驗課堂教學的輔助學習工具

移動設備逐漸成為人們上網的主要方式[6]，移動學習環境也在逐漸代替以個人電腦為主的傳統網絡學習環境. 充分利用手機作為物理實驗課堂教學的輔助學習工具，發揮學生自主學習、探索的主觀能動性，便于教師在課堂上引導使用，而且實施成本較低，不需要引入昂貴的特殊設備，更有利于實施和推廣. 同時，在物理實驗教學中發揮手機輔助學習的功能，也是與手機端各種App及其他課程爭奪學生的“注意力”資源.

文本、圖像、音視頻、動畫等多種表現形式的教學資源構建了全方位、多維度的網絡學習環境. MOOC等網絡教學平臺的運行環境也在從電腦運行為主過渡到移動設備運行為主，在運行環境的遷移中，文本、圖像、音視頻等數據格式在計算機和手機上具有較好的兼容性. 但是由于手機功耗、性能以及安全性等問題，曾經在計算機端廣泛使用的傳統交互動畫方式使用受到限制[7]，移動端的交互動畫正處于青黃不接的狀態. 在只有音視頻和文字、圖像，缺少交互動畫條件下，手機端的學習環境就難以稱得上完整的解決方案. 目前手機端交互動畫解決方案是HTML5技術，課堂上或紙質教材中分發傳播多媒體資源和HTML5動畫，可以采用掃描二維碼的形式[8].

HTML5是最新的系列網頁開發技術的統稱，除具備基本的網頁排版功能外，還包括Javascript程序語言，能完成一定規模的數學計算和邏輯運算，并具備繪制矢量圖形和觸屏響應等功能，擁有強大的交互動畫能力[9]. HTML5除了能在電腦上運行之外，還能被智能手機廣泛支持，使用手機內置的瀏覽器和微信、QQ等聊天軟件客戶端就能直接打開并綠色運行. 因此近幾年HTML5動畫應用發展迅速，例如淘寶手機客戶端和微信小程序里的各種動畫都是使用HTML5技術開發[10].

智能手機訪問HTML5動畫，可以通過形成超鏈接的方式，也可以通過聊天窗口發送、群共享等方式傳播，而更迅速便捷的方式，是掃描二維碼. 將動畫的地址轉換成二維碼圖片，印刷在教材對應的章節處，或者插入到教師授課的PPT中，學生通過手機掃碼訪問，就可以在手機上直接打開并運行. 這種掃碼訪問的方式簡單便捷，使紙質教材和教學資源網站真正地融為一體. 手機掃碼不僅可以用來訪問HTML5動畫，也可以用來訪問視頻、圖像、參考資料、自測練習等，成為新形態教材的標準配置[11].

3 HTML5動畫在物理實驗課堂教學中的應用舉例

HTML5動畫與傳統教學資源(如視頻等)，最大的區別在于使用操作的自主性. 視頻雖然經過精心拍攝和剪輯，但是每次打開內容都是教師在課堂上播放，是一對多的廣播方式，學生只是旁觀者，視頻無法根據學生的情況，做出靈活的變化. 因此講解視頻在預習等環節效果較好，而在實際課堂授課時，學生更傾向教師的現場講解. 智能手機的普及，為學生與動畫間一對一的交流提供了可能. 學生使用HTML5動畫時，通過在手機屏幕上點擊、拖動等方式調整參量，動畫顯示的效果根據參量實時計算得出，不同的參量組合呈現不同的效果. 而實驗課教師可從其他角度參與到這個交流互動中來，如教師在電腦上打開動畫，使用投影儀進行演示操作，學生在手機上打開，根據自己的想法調整參量，跟隨操作. 師生課堂上一邊操作動畫一邊交流互動，混合式的交流互動方式能夠取得較好的教學效果[12].

物理實驗教學中，存在很多教學難點，在傳統教學方式下學生知識點掌握情況并不理想. 例如在邁克耳孫干涉實驗中，學習難點主要有3個：a.邁克耳孫干涉實驗的原理和干涉圖案圓環的吞吐規律；b.激光器安裝擴束鏡前光斑的對正位置與安裝擴束鏡后干涉圖案的關系；c.儀器主刻度尺、觀察窗和微調手輪上3個刻度如何配合讀數和微調手輪測量時只允許單向轉動的規定[13]. 這3個學習難點實驗授課教師在課堂中會反復強調，但是學生掌握情況仍然不理想，本文將這些學生不容易掌握的學習重點、難點分別設計成3個HTML5動畫，每個動畫對應1個知識難點，課堂教學中可以單獨使用.

邁克耳孫干涉儀原理動畫如圖1所示(可掃描右下角二維碼打開動畫)，將干涉條紋和光路原理圖對照顯示，拖動下方的滾動條，改變移動鏡位置，光路和模擬的投影屏干涉圖案也會跟著發生改變. 教師授課時也會著重強調影響條紋吞吐的是固定鏡和移動鏡之間的距離差，提醒學生注意幾個關鍵位置：在兩鏡距離差為0時，屏上恰好沒有條紋；兩鏡距離差逐漸增大時，從中心吐出圓環，圓環密度增加；兩鏡距離差減小時，從中心吞沒圓環，圓環密度減少.

圖1 邁克耳孫干涉儀原理的動畫截圖及二維碼

邁克耳孫干涉儀對正調節動畫如圖2(a)所示(可掃描下方二維碼打開)，將激光器安裝擴束鏡前、后，投影屏上顯示的圖案在動畫上、下部分同時顯示. 學生可以直觀理解為什么實驗前期要反復調整反射鏡角度，使兩路的激光束光斑重合在投影屏中間的理想位置. 實驗后期在投影屏上調整出干涉圖案但效果不理想時，例如只有部分彎曲線條但沒有中心光斑時，理解了對正的原理，能根據曲線形態推測出圓心，并快速進行調整對正，節約了大量調整儀器的時間.

邁克耳孫干涉儀旋鈕動畫如圖2(b)所示(掃描下方二維碼打開)，模擬了粗調、細調2個調整手輪及主刻度尺、刻度盤和微調手輪上的3個刻度尺，學生通過模擬調整，可以直觀地認識到3個刻度尺之間是100倍的關系，微調手輪上1個刻度是10-4mm. 更重要的是動畫模擬了微調手輪通過蝸輪傳動給刻度盤的曠量，不管原來是順時針還是逆時針旋轉微調手輪，反向轉動時都需要空轉一段距離才會帶動刻度盤轉動，這段空轉的刻度也會帶入測量結果中造成讀數偏差. 學生根據動畫模擬更容易理解為什么在實際測量讀數時，只允許微調手輪向同一個方向轉動.

(a)對正調節 (b)旋鈕調節圖2 邁克耳孫干涉儀其他動畫截圖及二維碼

在邁克耳孫干涉實驗中引入HTML5交互動畫后，學生預習效果和學習效率得到明顯提升. 在未引入動畫前，實驗課堂上大多數學生只能完成激光波長、鈉燈雙黃線波長差的測量，極少部分學生能選做白光干涉或現場完成實驗數據處理. 而引入動畫后，選做白光干涉學生明顯增多，也有部分學生現場完成實驗數據處理并和教師、同學討論誤差、精度等問題.

4 引入HTML5實驗動畫的實驗教學設計

4.1 保持原有實驗體系，逐漸融入HTML5交互動畫教學

在物理實驗課堂教學中使用HTML5交互動畫是對原有物理實驗課堂教學的有益補充，并且開發和使用過程可以逐漸融入[14]. 做好HTML5交互動畫并在教學中應用，師生應用后反饋的結果能進一步促進動畫的優化和迭代. 每個動畫的制作和優化都是解教學之所需，在實際實驗教學中更實用. 經過一段時間的積累，目前已經有約20個HTML5交互動畫投入物理實驗課堂教學中.

開發HTML5實驗動畫，最重要的一步是動畫的選題，在保持原有實驗體系的基礎上，梳理實驗知識體系中的重點和難點，并將引入交互性能夠提高教學效果的知識點篩選出來，設計HTML5交互動畫. 在過程較復雜或者操作繁瑣的實驗動畫時，可以將實驗過程進行合理的簡化與拆分，降低設計、開發的復雜度. 例如在邁克耳孫干涉實驗相關的動畫選題時，根據教學經驗總結出學生掌握難度較大的3個知識點，并對其分別開發相應動畫. 把較復雜的實驗化繁為簡，不僅易于動畫開發，也便于教師將動畫機動、靈活地穿插在課堂授課過程中.

4.2 保證HTML5物理實驗動畫的科學性

互聯網公司開發HTML5游戲、廣告動畫效果時，更多是從視覺效果出發，追求可玩性和感官刺激，并不需要嚴格遵循實際物理規律[15]. 但是物理實驗動畫必須保證模擬顯示效果的科學性，因此動畫的設計和開發都需要建立在對物理原理、現象準確描述和數學定量計算的基礎上. HTML5物理實驗動畫的設計開發流程可以分成動畫選題、物理與數學建模、顯示效果設計、交互和界面設計、程序編碼5個階段[16]. 本文主要從物理與數學建模和顯示效果設計方面入手，保證HTML5物理實驗動畫的科學性.

1)在物理與數學建模上，設計者需要深刻理解實驗相關的物理原理和理論公式，將實驗現象背后的物理原理抽象出來，并將其變化規律用易于程序實現的數學表達式進行描述，這一步需要設計者有較好的物理學功底. 在為較復雜的實驗建模時，要注意簡化和抽象物理模型，著重表現實驗背后的物理思想. 例如在邁克耳孫干涉實驗相關的動畫中，主要模擬了等傾干涉效果，數學上可以直接使用等傾干涉條紋公式對條紋的亮暗位置進行計算.

2)在顯示效果設計上，HTML5繪圖是矢量繪圖，不同于數碼相機逐點記錄的方式，矢量繪圖的特點是用公式描述曲線和漸變繪圖，圖形越復雜，描述越繁瑣. 因此在屏幕上再現物理現象時需要考慮將復雜的實驗現象進行適當地簡化，設計逼真又易于程序實現的顯示效果. 例如邁克耳孫干涉實驗顯示的關鍵點是模擬亮暗交替的干涉條紋，等傾干涉條紋是中心對稱的圓環圖案，可以使用HTML5繪圖中提供的“放射狀填充”方法繪制.

4.3 HTML5動畫與其他形式教學資源相互配合，發揮最大效果

HTML5動畫使用矢量圖方式在電腦或者手機瀏覽器屏幕上繪制，細節表現能力有限，只能起到簡單示意的效果，需要結合視頻、高分辨率圖像顯示實際實驗儀器、實驗現象的高清效果. 但是其模擬儀器參量改變，即時顯示出對應效果的交互性卻是視頻、圖像等格式無法做到的.

視頻、交互動畫、圖形圖像、文字等多種形式的學習資源各有所長，對物理實驗教學需要進行分析，抽象物理原理適合使用交互動畫，展示實驗過程適合使用視頻，實驗關鍵節點適合使用圖形圖像，重要注意事項適合使用文字，HTML5動畫也可以實現簡單的數據處理和評價反饋. 各種形式的教學資源相互組合，相互配合，從多個角度將需要學生掌握的要點清楚、準確、生動地傳授給學生，學生在操作實驗儀器時，可以起到事半功倍的效果，有效提高實驗的效率和質量. HTML5作為手機端的新技術，在實驗教學資源的建設完善中起到了畫龍點睛的作用，從教學過程和知識覆蓋上實現了完美的閉環.

4.4 對使用HTML5交互動畫的實驗教學模式的探索

以讓學生喜歡物理實驗課為目的，充分利用手機作為物理實驗課堂教學輔助學習工具，提高實驗課程的興趣度. 引入高質量的HTML5交互動畫部分改變了難點實驗的教學模式，教師講授實驗原理不再用枯燥的理論和公式作為開始，而是先使用交互動畫幫助學生理解公式背后的物理過程，再配合實驗過程的小視頻和實驗細節的照片特寫. 學生容易懂、樂意學、興趣高，提高了預習和集中講授環節的學習效率和學習效果. 學生節省下的課堂時間，可以用來探索更深入的實驗拓展內容. 隨著HTML5交互動畫的進一步建設，實驗數量的增加，也必將對實驗教學方法、模式、實驗安排等方面帶來更深遠的影響.

5 使用效果

使用HTML5開發的物理實驗動畫在山東大學物理學院、微電子學院等的物理實驗課堂教學中取得了良好的效果. HTML5動畫帶來的交互性讓學生對物理實驗課程的興趣度和關注度更高，學生使用后的反饋非常好.

在《大學物理實驗》教材改版時，HTML5動畫也和其他教學資源一起，成為新版新形態教材的配套資源，使用二維碼印刷在紙質教材中，供學生學習時掃碼訪問[17]. 根據配套教學資源網站后臺統計，2020年秋季學期，教材中嵌入的19個HTML5交互動畫的訪問量最高達到600多次，訪問量最少也有200多次，遠超過上一版教材需要利用電腦登陸網站訪問教學資源的訪問量.

因受多方面因素制約，本文采取個人設計、開發，邊開發邊投入使用、逐漸融入式的開發方式. 經過2年多建設，完成了約20個HTML5物理實驗交互動畫，覆蓋了約1/3的實驗項目，覆蓋面還不夠廣；同時主要在學校內部配合教材使用，應用范圍還有待進一步推廣；已完成的HTML5交互動畫的通用性和趣味度還需要進一步優化，這些都是下一步努力提升的方向.

6 結束語

隨著手機等移動設備性能越來越好，功能越來越強大，移動設備替代電腦成為主流上網方式的趨勢不可避免[18]. 《中國教育現代化2035》提出要“充分利用現代信息技術，豐富并創新課程形式”，《加快推進教育現代化實施方案(2018-2022 年)》也提出了“以互聯網等信息化手段服務教育教學全過程”的要求. 物理實驗的課堂教學、新形態教材的建設等方面也需要順應信息時代的發展[19]，讓移動設備成為提高實驗課堂教學效果的助推器.