<p class="ql-block">日子過的好快，一不留神，自己已成了八旬老翁，體力所限已逐漸遠離電腦操作了，回看了自己二十幾年學(xué)電腦編代碼玩手機制作的動圖視頻，選了幾個記在這里：</p><p class="ql-block">大約在十幾年前，電腦瀏覽器還處于不分兼容與極速兩種模式的階段，制作代碼音畫一般是使用Time+HTML代碼與VML代碼，自從電腦瀏覽器分為兼容與極速兩種模式后，極速模式迅速被網(wǎng)頁設(shè)計采用，手機中的瀏覽器也是采用極速模式，Time+HTML與VML代碼因只適用于兼容模式而不被極速模式支持遭到棄用，這也就影響到代碼音畫的制作，使得用代碼做動態(tài)音畫變得很困難，自己迫切希望能找到一種在極速模式適用的代碼。大約是在2020年四月，自己在觀看公眾號文章<a href="https://mp.weixin.qq.com/s/AKyWRfISclK-HU67ObSuRQ?share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank" style="background-color:rgb(255, 255, 255); font-size:18px;">《一起點亮武漢》</a>時對它用的特效比較感興趣，于是分析了它的源代碼，發(fā)現(xiàn)這篇公眾號文章中的圖片特效使用了公眾號圖文編排工具135編輯器提供的特效模板，這種特效模板是用HTML5的SVG代碼組織的，而自己以前根本不知還有SVG這種代碼，在音畫網(wǎng)站的音畫作品中也沒見到過用這種代碼組織的音畫，對自己來說是一個新發(fā)現(xiàn)！于是下功夫做了大量的學(xué)習試用分析試驗，逐步了解了它的一些使用方法，發(fā)現(xiàn)這種代碼雖然只適用于極速模式，但它卻具有與Time+HTML與VML相似的一些功能，這正是自己苦等了好幾年的那種代碼！使用SVG代碼有利于代碼音畫動圖的制作，可以簡化一些動圖視頻的制作步驟，也有利于視頻畫面中圖片顯示時間、幅面、位置、路徑、透明度等的精確顯示與提高動圖視頻的清晰度。</p><p class="ql-block">下面是自己用Time+HTML ,VML與SVG代碼組織的一些動圖音畫視頻作品。</p> <p class="ql-block"><br></p><p class="ql-block">一，《釣翁動畫連續(xù)播放》：</p><p class="ql-block"><br></p><p class="ql-block">初學(xué)電腦那幾年，自己曾以釣翁羨魚作為網(wǎng)名，喜歡做些.gif格式的小動畫在新華網(wǎng)論壇與網(wǎng)友交流，動畫內(nèi)容以花鳥魚蟲為主，挺受網(wǎng)友們歡迎，也曾被眾多網(wǎng)站轉(zhuǎn)載。后來，自己又學(xué)習了視頻制作、編寫代碼與網(wǎng)頁制作，《釣翁動畫連續(xù)播放》這個視頻就是自己編寫SVG代碼將自己原創(chuàng)動圖組織在一起，做成.html格式網(wǎng)頁文件，然后轉(zhuǎn)換成視頻的。</p> <p class="ql-block">觀看更多動畫請點擊鏈接：</p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/51qrpvnr" target="_blank" style="font-size:18px; background-color:rgb(255, 255, 255);">美篇匯集《我的動畫》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/wap/video-work/view/index.html#/?id=8m4n970&type=6&share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank" style="background-color:rgb(255, 255, 255); font-size:18px;">《狗狗內(nèi)畫壺》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/wap/video-work/view/index.html#/?id=9txpnzp&type=10&share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank" style="background-color:rgb(255, 255, 255); font-size:18px;">《小鳥吃櫻桃》</a>這個動畫是用新華網(wǎng)論壇網(wǎng)友清風細雨（1）拍攝的圖片制作的，原圖大約有七、八幅，其中有幾幅圖的背景與其它圖片不完全相同，小鳥的位置與大小也有差別，也缺少些過渡動作，自己將這幾幅圖片做了必要修改與變型加工，制作補充了幾幅過渡動作畫面，然后嘗試著根據(jù)小鳥吃食動作需要用代碼設(shè)置各幅圖片的顯示時刻與持續(xù)顯示時間的長短，每個動作畫面的顯示持續(xù)時間從0.1秒到1秒不等，從而組織成小鳥吃櫻桃的完整動作，如果自己電腦的網(wǎng)速比較快，就能順暢地快速打開圖片，從而完美展示設(shè)定的動作，在做成.html網(wǎng)頁文件后可在電腦和手機上顯示（在手機上要用瀏覽器打開），轉(zhuǎn)換成視頻后就可以在手機上被大家觀看了。這種方法只是自己學(xué)用代碼的一個嘗試，用這種方法做的動畫可避免GIF動畫軟件導(dǎo)出動畫時的像素損失，能較好地保證畫面清晰度。</p> <p class="ql-block"><br></p><p class="ql-block"><br></p><p class="ql-block"><br></p><p class="ql-block">二，《心中美景》：</p><p class="ql-block"><br></p><p class="ql-block">這是用SVG代碼組織的動圖，將小動物圖片通過摳圖去除背景畫面做成透明背景的小動物圖片，用SVG代碼將透明背景的小動物圖片合成到 風景圖片上，并組織成多幅圖片自動顯示的.html格式網(wǎng)頁文件，然后形成視頻。</p> <p class="ql-block"><br></p><p class="ql-block"><br></p><p class="ql-block"><br></p><p class="ql-block">三，《舊金山戲浪》：</p><p class="ql-block"><br></p><p class="ql-block">這個視頻是用新華網(wǎng)友孺子拓荒（即美篇網(wǎng)友京城老牛）拍攝的圖片加工而成的，用TIME+HTML代碼與水波特效代碼段將靜態(tài)圖片中的海水組織成動態(tài)海浪，并用TIME+HTML代碼模擬制作出沖浪人博擊海浪的效果。</p> <p class="ql-block">觀看更多請點擊鏈接：</p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/wap/video-work/view/index.html#/?id=9rfwjta&type=6&share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank" style="background-color:rgb(255, 255, 255); font-size:18px;">《大海啊大海》</a></p> <p class="ql-block"><br></p><p class="ql-block"><br></p><p class="ql-block">四，《遠山》：</p><p class="ql-block"><br></p><p class="ql-block">這個視頻由幾幅風景圖片與一幅透明Flash組成，用自己研究的無間斷連續(xù)滾動代碼組織成無間斷動態(tài)圖，動態(tài)圖中近景與遠山以不同速度平移，白云不間斷向上滾動的動態(tài)效果 ，做成視頻。</p> <p class="ql-block"><br></p><p class="ql-block"><br></p><p class="ql-block"><br></p><p class="ql-block">五，《瑞雪》：</p><p class="ql-block"><br></p><p class="ql-block">這是用SVG代碼將網(wǎng)上的故宮雪景圖片組織播放的動態(tài)雪景視頻，視頻中的雪花是自己繪制的，制作時采取了一些措施爭取能體現(xiàn)出一些雪景與故宮建筑的層次。</p> <p class="ql-block">觀看更多請點擊鏈接：</p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/50yoby49?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">《梅嶺初雪》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/519fjzl6?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">《雪中“奮戰(zhàn)”圖》</a></p> <p class="ql-block"><br></p><p class="ql-block"><br></p><p class="ql-block">六，《風光錦繡》:</p><p class="ql-block"><br></p><p class="ql-block">用SVG代碼組織網(wǎng)上風景圖片動態(tài)展示</p> <p class="ql-block">觀看更多請點擊鏈接：</p><p class="ql-block">巨幅完整版寬圖<a href="http://www.h-ceramic.com.cn/wap/video-work/view/index.html#/?id=8ll512k&type=6&share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank" style="background-color:rgb(255, 255, 255); font-size:18px;">《千里贛鄱錦繡圖》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/wap/video-work/view/index.html#/?id=9m5zob8&type=10&share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank">與永根合作攝影音畫《黟縣塔川醉美秋色》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/wap/video-work/view/index.html#/?id=9scnrg3&type=6&share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank">唐耀忠先生巨幅畫作《童年的記憶 江南風情》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/wap/video-work/view/index.html#/?id=8ldm62j&type=6&share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank">《中國的世界遺產(chǎn)全圖鑒》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/wap/video-work/view/index.html#/?id=9nos4yr&type=6&share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank">《走上這高高的興安嶺》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/wap/video-work/view/index.html#/?id=9ma2oy7&type=6&share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank">《草原之夜》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/wap/video-work/view/index.html#/?id=9l17g4k&type=6&share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank">《馬踏飛雪》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/wap/video-work/view/index.html#/?id=7wajob6&type=6&share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank">《紹興水鄉(xiāng)畫中游》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/43dkjmsa?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">《用代碼結(jié)合手機制作的豎屏小視頻》</a>這個系列美篇共九集，每集展示若干個視頻并建有其它各集的鏈接。</p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/wap/video-work/view/index.html#/?id=7pw4ao3&type=6&share_to=copy_link&user_id=60902957&uuid=fda5af1cc24107036e41c30385b22e18&share_depth=1&first_share_uid=60902957&utm_medium=meipian_android&share_user_mpuuid=75333dc7946fc5d8ace026ebe1e1e500" target="_blank">與永根合作攝影音畫《雪后明孝陵》</a></p> <p class="ql-block"><br></p><p class="ql-block"><br></p><p class="ql-block"><br></p><p class="ql-block">七，《觀美圖 網(wǎng)游四方》:</p><p class="ql-block"><br></p><p class="ql-block">在公眾號與美篇上發(fā)表的圖片在顯示時都會以網(wǎng)站設(shè)定的幅面寬度進行顯示。這樣，幅面寬度大的圖片就會被縮小幅面，為了使寬幅面圖片能在公眾號和美篇上能以較大幅面顯示，網(wǎng)友們常會將圖片旋轉(zhuǎn)90度，采用豎發(fā)的方式來發(fā)寬圖，網(wǎng)友在看圖時需將手機橫過來看。</p><p class="ql-block"><br></p><p class="ql-block">如果想用視頻制作軟件將多幅這樣的豎發(fā)寬圖做成水平移動視頻是比較困難的。</p><p class="ql-block"><br></p><p class="ql-block">自己將網(wǎng)上多幅豎發(fā)寬圖用SVG代碼組織成向上連續(xù)滾動，然后用代碼將向上滾動的圖片一起旋轉(zhuǎn)90度，就變成了多幅寬圖水平滾動滾動，再轉(zhuǎn)換成視頻。用這種方法制做多幅寬圖平移視頻要比單純用視頻制作軟件來做要方便的多，圖片顯示清晰移動平穩(wěn)，前后各圖片的間隔始終一致。請看效果：</p> <p class="ql-block">觀看更多請點擊鏈接：</p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/5acw3ewv?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">《動態(tài)展示巨幅寬圖“祖國山河風光”》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/4rhvj2fx?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">《用美篇、公眾號豎發(fā)寬圖做圖片平移》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/4chszu0k?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">《珍貴照片》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/561ptirn?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">古畫欣賞《朝元仙仗圖》</a></p><p class="ql-block"><a href="http://www.h-ceramic.com.cn/4ys1t4pq?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">《中國抗疫圖鑒》</a></p> <p class="ql-block"><br></p><p class="ql-block"><br></p><p class="ql-block">八，視頻中的子視頻移位與旋轉(zhuǎn)</p><p class="ql-block"><br></p><p class="ql-block">用代碼可以讓畫中畫子視頻畫面在html格式網(wǎng)頁作品與視頻畫面中按自己設(shè)定的時刻與路徑移動，比如，自己為慶祝新華網(wǎng)發(fā)展論壇成立十周年而做的音畫<a href="https://md-mpvolc.meipian.me/users/60902957/25e24b10-9fad-11ee-b8c3-6578243defcf.mp4" target="_blank" style="font-size:18px; background-color:rgb(255, 255, 255);">《在希望的田野上》</a>與自己用新華網(wǎng)友攝影作品做的音畫<a href="https://md-svideo-mpvolc.ivwen.com/users/60902957/msvideo_2dee6bd7ee19482587c903a8c8fb3a3c.mp4" target="_blank" style="background-color:rgb(255, 255, 255); font-size:18px;">《都市平安夜》</a>。</p><p class="ql-block">自己嘗試用VML代碼讓畫中畫子視頻按設(shè)定時間和路徑實現(xiàn)了旋轉(zhuǎn)，如視頻<a href="https://md-mpvolc.meipian.me/users/60902957/e40fb9a43874f085424ff7897b67c299.mp4" target="_blank" style="font-size:18px; background-color:rgb(255, 255, 255);">《費玉清蔡明演唱鄉(xiāng)戀》</a>這個音畫是十年前用VML代碼組織制作的，現(xiàn)在VML已不再受瀏覽器支持，再做這種視頻旋停音畫可用CSS設(shè)定子視頻圓弧移動路徑中若干點的坐標，也可以用SVG代碼，當然，用視頻制作軟件也是可以的。</p>