我的动图视频

长竿短线

<p class="ql-block">日子过的好快,一不留神,自己已成了八旬老翁,体力所限已逐渐远离电脑操作了,回看了自己二十几年学电脑编代码玩手机制作的动图视频,选了几个记在这里:</p><p class="ql-block">大约在十几年前,电脑浏览器还处于不分兼容与极速两种模式的阶段,制作代码音画一般是使用Time+HTML代码与VML代码,自从电脑浏览器分为兼容与极速两种模式后,极速模式迅速被网页设计采用,手机中的浏览器也是采用极速模式,Time+HTML与VML代码因只适用于兼容模式而不被极速模式支持遭到弃用,这也就影响到代码音画的制作,使得用代码做动态音画变得很困难,自己迫切希望能找到一种在极速模式适用的代码。大约是在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>时对它用的特效比较感兴趣,于是分析了它的源代码,发现这篇公众号文章中的图片特效使用了公众号图文编排工具135编辑器提供的特效模板,这种特效模板是用HTML5的SVG代码组织的,而自己以前根本不知还有SVG这种代码,在音画网站的音画作品中也没见到过用这种代码组织的音画,对自己来说是一个新发现!于是下功夫做了大量的学习试用分析试验,逐步了解了它的一些使用方法,发现这种代码虽然只适用于极速模式,但它却具有与Time+HTML与VML相似的一些功能,这正是自己苦等了好几年的那种代码!使用SVG代码有利于代码音画动图的制作,可以简化一些动图视频的制作步骤,也有利于视频画面中图片显示时间、幅面、位置、路径、透明度等的精确显示与提高动图视频的清晰度。</p><p class="ql-block">下面是自己用Time+HTML ,VML与SVG代码组织的一些动图音画视频作品。</p> <p class="ql-block"><br></p><p class="ql-block">一,《钓翁动画连续播放》:</p><p class="ql-block"><br></p><p class="ql-block">初学电脑那几年,自己曾以钓翁羡鱼作为网名,喜欢做些.gif格式的小动画在新华网论坛与网友交流,动画内容以花鸟鱼虫为主,挺受网友们欢迎,也曾被众多网站转载。后来,自己又学习了视频制作、编写代码与网页制作,《钓翁动画连续播放》这个视频就是自己编写SVG代码将自己原创动图组织在一起,做成.html格式网页文件,然后转换成视频的。</p> <p class="ql-block">观看更多动画请点击链接:</p><p class="ql-block"><a href="https://www.meipian.cn/51qrpvnr" target="_blank" style="font-size:18px; background-color:rgb(255, 255, 255);">美篇汇集《我的动画》</a></p><p class="ql-block"><a href="https://www.meipian.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;">《狗狗内画壶》</a></p><p class="ql-block"><a href="https://www.meipian.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>这个动画是用新华网论坛网友清风细雨(1)拍摄的图片制作的,原图大约有七、八幅,其中有几幅图的背景与其它图片不完全相同,小鸟的位置与大小也有差别,也缺少些过渡动作,自己将这几幅图片做了必要修改与变型加工,制作补充了几幅过渡动作画面,然后尝试着根据小鸟吃食动作需要用代码设置各幅图片的显示时刻与持续显示时间的长短,每个动作画面的显示持续时间从0.1秒到1秒不等,从而组织成小鸟吃樱桃的完整动作,如果自己电脑的网速比较快,就能顺畅地快速打开图片,从而完美展示设定的动作,在做成.html网页文件后可在电脑和手机上显示(在手机上要用浏览器打开),转换成视频后就可以在手机上被大家观看了。这种方法只是自己学用代码的一个尝试,用这种方法做的动画可避免GIF动画软件导出动画时的像素损失,能较好地保证画面清晰度。</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格式网页文件,然后形成视频。</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">这个视频是用新华网友孺子拓荒(即美篇网友京城老牛)拍摄的图片加工而成的,用TIME+HTML代码与水波特效代码段将静态图片中的海水组织成动态海浪,并用TIME+HTML代码模拟制作出冲浪人博击海浪的效果。</p> <p class="ql-block">观看更多请点击链接:</p><p class="ql-block"><a href="https://www.meipian.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组成,用自己研究的无间断连续滚动代码组织成无间断动态图,动态图中近景与远山以不同速度平移,白云不间断向上滚动的动态效果 ,做成视频。</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代码将网上的故宫雪景图片组织播放的动态雪景视频,视频中的雪花是自己绘制的,制作时采取了一些措施争取能体现出一些雪景与故宫建筑的层次。</p> <p class="ql-block">观看更多请点击链接:</p><p class="ql-block"><a href="https://www.meipian.cn/50yoby49?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">《梅岭初雪》</a></p><p class="ql-block"><a href="https://www.meipian.cn/519fjzl6?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">六,《风光锦绣》:</p><p class="ql-block"><br></p><p class="ql-block">用SVG代码组织网上风景图片动态展示</p> <p class="ql-block">观看更多请点击链接:</p><p class="ql-block">巨幅完整版宽图<a href="https://www.meipian.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="https://www.meipian.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="https://www.meipian.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="https://www.meipian.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">《中国的世界遗产全图鉴》</a></p><p class="ql-block"><a href="https://www.meipian.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="https://www.meipian.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="https://www.meipian.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="https://www.meipian.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">《绍兴水乡画中游》</a></p><p class="ql-block"><a href="https://www.meipian.cn/43dkjmsa?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">《用代码结合手机制作的竖屏小视频》</a>这个系列美篇共九集,每集展示若干个视频并建有其它各集的链接。</p><p class="ql-block"><a href="https://www.meipian.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">七,《观美图 网游四方》:</p><p class="ql-block"><br></p><p class="ql-block">在公众号与美篇上发表的图片在显示时都会以网站设定的幅面宽度进行显示。这样,幅面宽度大的图片就会被缩小幅面,为了使宽幅面图片能在公众号和美篇上能以较大幅面显示,网友们常会将图片旋转90度,采用竖发的方式来发宽图,网友在看图时需将手机横过来看。</p><p class="ql-block"><br></p><p class="ql-block">如果想用视频制作软件将多幅这样的竖发宽图做成水平移动视频是比较困难的。</p><p class="ql-block"><br></p><p class="ql-block">自己将网上多幅竖发宽图用SVG代码组织成向上连续滚动,然后用代码将向上滚动的图片一起旋转90度,就变成了多幅宽图水平滚动滚动,再转换成视频。用这种方法制做多幅宽图平移视频要比单纯用视频制作软件来做要方便的多,图片显示清晰移动平稳,前后各图片的间隔始终一致。请看效果:</p> <p class="ql-block">观看更多请点击链接:</p><p class="ql-block"><a href="https://www.meipian.cn/5acw3ewv?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">《动态展示巨幅宽图“祖国山河风光”》</a></p><p class="ql-block"><a href="https://www.meipian.cn/4rhvj2fx?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">《用美篇、公众号竖发宽图做图片平移》</a></p><p class="ql-block"><a href="https://www.meipian.cn/4chszu0k?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">《珍贵照片》</a></p><p class="ql-block"><a href="https://www.meipian.cn/561ptirn?first_share_to=copy_link&share_depth=1&first_share_uid=60902957" target="_blank">古画欣赏《朝元仙仗图》</a></p><p class="ql-block"><a href="https://www.meipian.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">八,视频中的子视频移位与旋转</p><p class="ql-block"><br></p><p class="ql-block">用代码可以让画中画子视频画面在html格式网页作品与视频画面中按自己设定的时刻与路径移动,比如,自己为庆祝新华网发展论坛成立十周年而做的音画<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>与自己用新华网友摄影作品做的音画<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代码让画中画子视频按设定时间和路径实现了旋转,如视频<a href="https://md-mpvolc.meipian.me/users/60902957/e40fb9a43874f085424ff7897b67c299.mp4" target="_blank" style="font-size:18px; background-color:rgb(255, 255, 255);">《费玉清蔡明演唱乡恋》</a>这个音画是十年前用VML代码组织制作的,现在VML已不再受浏览器支持,再做这种视频旋停音画可用CSS设定子视频圆弧移动路径中若干点的坐标,也可以用SVG代码,当然,用视频制作软件也是可以的。</p>