我要投搞

标签云

收藏小站

爱尚经典语录、名言、句子、散文、日志、唯美图片

当前位置:双彩网 > 帧检验序列 >

H5序列帧动画实现过程(附源码)

归档日期:06-28       文本归类:帧检验序列      文章编辑:爱尚语录

  序列帧动画,又称为逐帧动画,是使用多张连续的静态图片快速切换实现视频动画效果的一种技术。在一些移动设备上展现视频动画,如果使用video标签(或其他播放视频的方法),会因为设备性能不足、预加载不完全等问题导致视频卡顿。某些应用场景下,需要使用视频动画作为场景背景时,上述的卡顿情况更加严重。当然,可以使用GIF图片作为动态背景图,但如果需要控制视频循环次数、与背景音乐同步时,GIF又无能为力了。

  所以,序列帧动画利用Canvas强大的重绘能力、Image对象的预加载能解决了上述的性能问题、预加载问题。同时,图片切换非常容易控制间隔时间和次数,可以完美与背景音乐匹配。

  初始化包括图片预加载和封面绘制。该函数不返回值,接受一个函数作为回调函数,会在初始化结束后被调用。

  预加载所有序列图——选择一个Canvas容器——将一张图片画上去——等待间隔时间——将下一帧图片画上去

  这样就可以完成核心的序列帧动画的播放功能,背景音乐只需要在视频播放开始和结束处理一下就行。

  在JS语言中,给Image对象的src属性赋值一个图片的URL,就会启动该图片的加载。加载成功会调用Image.onload函数,加载失败会调用Image.onerror函数。于是,把这两个函数指向我们的计数函数,就可以得知一个Image对象是否加载完毕。

  如果要同时加载一批图片,就新建等量的Image对象,将他们的Image.onload函数和Image.onerror函数都赋值为一个计数函数,然后分别给每个Image对象赋值对应的图片URL。计数函数统计加载完毕的数量,如果等于加载总量,就说明这一批图片都加载完成了。

  源码中,预加载部分主要由initialize(callback)函数启动,由loaded()函数进行计数。所有帧图片加载完毕后,会调用setPoster()函数绘制第一帧为封面,该函数也是一个绘制Canvas的最小例子,简洁易懂。

  通过上述代码可以获取到Canvas对象的上下文,通过调用上下文ctx的函数,可以实现Canvas画布的绘制、擦除等操作。

  注意,对于一个Canvas标签canvas来说,它本身有Height、Width属性,是用来决定画布的分辨率的,如果不主动设置,那么就是150*150的默认值。同时,CSS规则也可以作用于canvas,但只会修改它在页面上的高宽,不会修改其分辨率。如果没有设置CSS中的样式高宽,那么就以canvas上的高宽属性显示。所以,在实际应用时不能将这两组Height、Width混为一谈。

  浏览器提供了window.requestAnimationFrame(callback)函数用于显示动画效果。该函数接受一个函数作为参数,调用这个函数后,下一次浏览器要刷新页面之前,就会调用它的callback函数,并将一个时间戳作为参数传给这个callback。那么,在浏览器刷新页面时,新的内容就已经准备好了。

  在序列帧应用中,可以简单理解为每次要绘制下一帧时,就调用window.requestAnimationFrame(callback)函数,并将绘制Canvas的函数作为参数传进去。

  在绘制Canvas的函数中,通过处理时间戳,可以用来控制视频播放的快慢(大概来说就是间隔时间太短就不重绘、间隔太长就跳过几帧去绘制)。

  处理完时间戳后,如果要进行重绘,就执行以下三个步骤:计算绘制位置(可选)——清空画布——绘制Image对象到Canvas容器中。

  完成了一次绘制后,将当前帧数+1,如果小于最大帧数,就继续调用window.requestAnimationFrame(callback)函数绘制下一帧。如果已经等于最大帧数了,就说明视频放完一轮了,可以调用一下自己的onComplete回调函数,处理一下背景音乐,决定一下是否要loop。这些都是琐碎的细节,不展开讲了。

  在一个Canvas容器上绘制图片,使用的是ctx对象的drawImage函数。该函数有好三种用法,这里用的是最多参数的一个。函数如下:

  在序列帧动画实现的过程中,每次绘制图片时,采用的方式不是固定的。就好比在CSS中使用background-position一样,根据应用场景的需要来决定使用哪种对齐方式。在我的代码实现中,采用的是类似background-position: center bottom;,显示长边的绘制方式。

  用人话来说:图片在画布上水平居中,竖直贴底显示。保证源图片的长宽比不变,多余的部分将被裁去,主要显示长边,保证Canvas容器被填满。

  这个部分似乎用人话也讲不清楚,各位可以在示例上改改Canvas容器的宽高比就清楚了。再次重申一次,如何决定剪裁、绘制的位置是不固定的,应当根据应用需要来决定。这部分在源码中,由calculate函数来计算全局的剪裁、绘制位置。在nextFrame函数中有被注释掉的一句,在每次计算重绘的时候先调用calculate函数计算一波。后来觉得这样写不优美,也没想到其他方法来应对canvas容器宽高动态变化,就暂时先注释掉了。

  建议:在使用这个库的时候,保证图片的宽高比和Canvas容器的宽高比相同,再将canvas放到一个div中,用CSS来解决剪裁(或称遮挡)的问题是比较合理的。

  这一部分不是序列帧动画的重点,只是用序列帧实现动画的附加产物。作为背景音乐,只要能保证视频和音频大致同步就行。老师傅多年的经验告诉我,每秒播放25帧左右,就能和背景音乐同步。当然,这个帧数也与视频导出时的帧数有关,具体来说要在实践中尝试出来。

  背景音乐的播放,只是原生的audio,也支持Ion.sound库来播放。在移动设备上,ion.sound可以保证音频的预加载和流畅播放,非常推荐。

  在代码中,this.bgm变量保存着背景音乐,在视频的播放、暂停、停止、循环开始时,都要进行对应的处理。这些细节也比较琐碎,就不赘述了。

  转载请注明出处:王亟亟的大牛之路之前在绘画的过程中提到了静态的旋转啊,缩放啊,平移等一些效果。那么自定义的View当然也有动态的效果也就是我们的Animation,常用的有三种ViewAnimatio...博文来自:王亟亟的博客

  10款很酷的HTML5动画和实用应用,这里有菜单、SVG动画、Loading动画,总有你喜欢的,而且,每一款HTML5应用都提供源代码下载,方便大家学习和研究,一起来看看吧。1、HTML5SVG树枝分...博文来自:zhangmingming22的博客

  和C++游戏开发相同,HTML5逐帧动画需要的图像元素也是一张绘制了每一帧图像效果的图片。通过循环绘制各帧的图像来实现动画的效果。本示例中演示的是一个小人,默认状态下,小人朝右方站立;按下左/右方向键...博文来自:的专栏

  前言:帧动画是游戏中最常用的的两种动画播放形式之一,其中一种是骨骼动画,一种就是帧动画了,在H5游戏中,帧动画一般用于UI界面的操作动画,人物技能,特效什么的。本笔记基于通用MVC框架,以及“笔记一”...博文来自:u013617851的博客

  在2D游戏中,序列帧图片的大图是很常见很常用的东西,他用于记录游戏主角的所有动作。比如上图,就是lf2中的一张序列帧大图。其实大部分软件都不支持gif或者直接拉个视频进去这样,序列帧图片来完成游戏主角...博文来自:编程记录,亲测有效

  当不要脸已成习惯,当山峰也没有了棱角,当招人这么困难的时候,我还是在篇头植入的招聘。坐标山东青岛市北,招聘日系画师,其他岗位目前公司没有说,有意思的可以入群私聊。然后再说一下QQ群,山东手游研发聚集地...博文来自:C.P.的博客

  当不要脸已成习惯,当山峰也没有了棱角,当招人这么困难的时候,我还是在篇头植入的招聘。坐标山东青岛市北,招聘日系画师,其他岗位目前公司没有说,有意思的可以入群私聊。然后再说一下QQ群,山东手游研发聚集地...博文来自:C.P.的博客

  国际象棋的应用编好了,就要来用一用。 视频是西班牙开局。下载附近后去掉扩展名就可以,不要解压,它就不是压缩文件。...博文来自:经过一个过程,然后成为自己

  设计DirectX游戏开头动画效果 作者:蒋轶民 这个周末我刻苦钻研了两天加上一个晚上,终于把我的DirectX游戏开头动画效果做出来了。自己还是感到很高兴的。高兴之余,我发现我自己对纹理贴图的知识还...博文来自:开发游戏,辉煌全中国

  动画创建的帧动画,就是补间动画的创建,要用要一个annimition-list的xml文件用于作为IMageView控件的背景(注意是背景background属性),(资源可向留下邮箱)类似这样一个动...博文来自:踩踩多来梦的博客

  想做个录音机,第一步就卡在麦克风动画这里了.先上gif.再吐槽.① 上面gif中声波的动画是个半成品.没有循环播放.在微信小程序的开发文档上找了很久,也没找到循环模式的参数设置.用setInterva...博文来自:dzp_coder

  当我们需要制作动态炫酷科技感很强的UI时,美术一般会给我们提供一些序列图,这时候我们只需在程序里实现序列动画。一.动画机  unity自带的帧动画机很方便,我们首先选择所要播放序列帧动画的Imag...博文来自:Jay W的博客

  如何将视频转换成视频帧(视频图像序列)+如何制作自己的视频跟踪数据集    这次想在网上备注的知识是如何将视频转换成视频序列(即一帧一帧的图像)。有的时候大家或许希望从视频中得到其中的某一幅或者某几幅...博文来自:davidsmith8的博客

  本文介绍了CSS3种的animation以及如何实现帧动画博文来自:辰煦湲的前端日常

  8个超震撼的HTML5和纯CSS3动画源码981人浏览发表回复HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要。Flash在几年之后肯定会消亡...博文来自:hzp666的博客

  猴子原创,欢迎转载,转载请在明显处注明!谢谢。原文地址:之前我介绍过cocos2d-x的帧...博文来自:移动开发记录

  说明:今天尝试使用Shader制作一个播放序列帧的功能,主要的思想是逐帧修改图片的UV坐标。测试图片:(1)用于测试播放顺序,以免出现顺序问题(2)真实测试使用的图片Shader代码如下所示Shade...博文来自:大爷就是胖喵喵(转载联系)

  UV动画UV动画,顾名思义,就是针对UV做的动画。在游戏中,一些动态水面,飞流直下的瀑布,流动的岩浆,跳动的火焰等等,很多都是通过操作UV做的动画。在unity中我可以实用挂载脚本或者直接针对UVke...博文来自:lupeng的博客

  Unity制作序列帧动画第一步:找一张序列帧贴图,在网上随便找了一个将图片拖拽到Unity项目中第二步:设置图片,选中图片在Inspector面板打开精灵编辑器弹出如下窗口第三步:编辑图片点击左上角的...博文来自:LIQIANGEASTSUN的专栏

  视频直播这么火,再不学就out了。为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流...博文来自:的博客

  相信学习编程的同学,或多或少都接触到算法的时间复杂度和空间复杂度了,那我来讲讲怎么计算。        常用的算法的时间复杂度和空间复杂度 一,求解算法的时间复杂度,其具体步骤是: ⑴ 找出算法...博文来自:杨威的博客

  本帖只谈技术实现,首先我们自己来编译一个比特币客户端吧, 技术讨论,欢迎大家入伙(注明:csdn)。...博文来自:开心乐源的专栏

  帐号相关流程注册范围 企业 政府 媒体 其他组织换句话讲就是不让个人开发者注册。 :)填写企业信息不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的。填写公司机构信息,对公账...博文来自:小雨同学的技术博客

  最近在做一个每天定点从FTP自动下载节目.xml并更新到数据库的功能。首先想到用 FileSystemWatcher来监控下载到某个目录中的文件是否发生改变,如果改变就执行相应的操作,然后用timer...博文来自:kongwei521的专栏

  扫二维码关注,获取更多技术分享 本文承接之前发布的博客《 微信支付V3微信公众号支付PHP教程/thinkPHP5公众号支付》必须阅读上篇文章后才可以阅读这篇文章。由于最近一段时间工作比较忙,...博文来自:Marswill

  本篇文章是根据我的上篇博客,给出的改进版,由于时间有限,仅做了一个简单的优化。相关文章:将excel导入数据库2018年4月1日,新增下载地址链接:点击打开源码下载地址十分抱歉,这个链接地址没有在这篇...博文来自:Lynn_Blog

  mybatis简单小巧易于上手,方便浏览修改sql语句博文来自:努力+坚持,而且还很年轻

  jquery/js实现一个网页同时调用多个倒计时(最新的) 最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦! //js ...博文来自:Websites

  Java 中的堆是 JVM 所管理的最大的一块内存空间,主要用于存放各种类的实例对象。   在 Java 中,堆被划分成两个不同的区域:新生代 ( Young )、老年代 ( Old )。新生代 (...博文来自:朱小厮的博客

  我们在做项目的时候有时候需要给图片添加水印,水寒今天就遇到了这样的问题,所以搞了一个工具类,贴出来大家直接调用就行。/** * 图片工具类 * @author 水寒 * 欢迎访问水寒的个人博客:...博文来自:水寒

  强连通分量: 简言之 就是找环(每条边只走一次,两两可达) 孤立的一个点也是一个连通分量   使用tarjan算法 在嵌套的多个环中优先得到最大环( 最小环就是每个孤立点)   定义: int Ti...博文来自:九野的博客

  1. 规则引擎面临的问题:业务规则的实现大部分是由开发人员来实现的 业务规则需要业务分析人员能够阅读和理解 业务规则的可读性和用户的友好性都不太好2. DSL领域特殊语言DSL == Domain...博文来自:哎幽的成长

  nginx 是个轻量级的Web服务器,比Apache不差博文来自:老徐2014

  若是研究区在中国,则在地理空间数据云有中国区合成好的数据,直接下载用即可。数据格式为TIF。坐标为WGS84,不用再转换投影。下载网址为:博文来自:hengcall的博客

本文链接:http://twilightranch.com/zhengjianyanxulie/165.html