基于canvas与原生JS的H5动画引擎
2017-04-07 07:14
651 查看
前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术。
通过初步调研,H5动画的实现大概有以下几种方式:
1、基于css实现
这种方式比较简单易学,但是能实现的效果也相对简单。一般都是对H5元素的平移,旋转,缩放等。适用于网页中的一些简单动画,对于由许多元素相互联系的复杂动画实现起来有些难度。当然也有基于css实现的比较复杂的动画(如:人物的行走),但是难度比较大。css动画教程:http://www.cnblogs.com/tengpan-cn/p/6189720.html
2、基于jquery实现
jquery中提供了一些API对H5元素进行操作,主要也是平移、旋转、缩放;还有一些出入效果(如淡入淡出等)。使用起来比较简单,适用场景与css基本相同,在做一些需要和用户交互的简易动画时比css更简单易用些。
3、基于js与canvas实现
canvas是H5提供的一种绘图元素,可以使用JS控制,绘制点、线、面、图像、H5元素等。同时也支持对所绘制对象的平移、旋转、裁剪等,并且绘制速度还是比较快的;在平移,旋转上略有局限性,一方面实现起来并不方便,绘制平移旋转的实质是对画布坐标系进行平移,旋转,绘制完成之后,需要将画布坐标系复原,并且不支持Z轴旋转。
理论上来说基于js与canvas可以做任何形式的动画,但是需要自己去实现很多东西,比如碰撞检测,粒子系统等,这些工作量还是比较大的。有很多热心开发人员写了一些基于js与canvas的动画引擎,实现了相当赞的效果。但这些引擎都有一定的局限性,一方面是由于封装导致各个引擎之间不能配合使用,而各个引擎实现的并不完善,只是侧重与某一方面,有的侧重于碰撞效果,有的侧重与弹性约束之间的物理效果。
4、基于一些功能比较完善的物理引擎如cocos2d、白鹭等
这种方式就可以做出非常炫的效果,但是需要具备一些物理引擎的基础知识,包括坐标变换等一些数学知识。一般来说这种技术都是一个单独的研究方向,学好了薪资很高的。但使用这种技术做动画一般都是需要一个团队的,有主程、美工等多个专业人员一起做。
通过技术评估及我们的需求,决定采用第三种方式,并且自己结合需求,实现了一个简易的动画引擎。目前开发工作已经初步完成,基于js+canvas的引擎代码已经放置github上(https://github.com/luckyPT/AnimationEngine)。基于该引擎可以方便的实现:
①点线面等简单图形以及图片的绘制API,并且很方便的就可以实现旋转、平移、缩放(解决了原生canvas的部分局限性)
②基于雪碧图,可以很方便的实现序列帧动画
③简易的碰撞检测
④该引擎在封装的时候,考虑了可扩展性,可以很好的扩展其他特性(如重力效果)
点击查看示例:
欢迎转载收藏!!
通过初步调研,H5动画的实现大概有以下几种方式:
1、基于css实现
这种方式比较简单易学,但是能实现的效果也相对简单。一般都是对H5元素的平移,旋转,缩放等。适用于网页中的一些简单动画,对于由许多元素相互联系的复杂动画实现起来有些难度。当然也有基于css实现的比较复杂的动画(如:人物的行走),但是难度比较大。css动画教程:http://www.cnblogs.com/tengpan-cn/p/6189720.html
jquery中提供了一些API对H5元素进行操作,主要也是平移、旋转、缩放;还有一些出入效果(如淡入淡出等)。使用起来比较简单,适用场景与css基本相同,在做一些需要和用户交互的简易动画时比css更简单易用些。
3、基于js与canvas实现
canvas是H5提供的一种绘图元素,可以使用JS控制,绘制点、线、面、图像、H5元素等。同时也支持对所绘制对象的平移、旋转、裁剪等,并且绘制速度还是比较快的;在平移,旋转上略有局限性,一方面实现起来并不方便,绘制平移旋转的实质是对画布坐标系进行平移,旋转,绘制完成之后,需要将画布坐标系复原,并且不支持Z轴旋转。
理论上来说基于js与canvas可以做任何形式的动画,但是需要自己去实现很多东西,比如碰撞检测,粒子系统等,这些工作量还是比较大的。有很多热心开发人员写了一些基于js与canvas的动画引擎,实现了相当赞的效果。但这些引擎都有一定的局限性,一方面是由于封装导致各个引擎之间不能配合使用,而各个引擎实现的并不完善,只是侧重与某一方面,有的侧重于碰撞效果,有的侧重与弹性约束之间的物理效果。
这种方式就可以做出非常炫的效果,但是需要具备一些物理引擎的基础知识,包括坐标变换等一些数学知识。一般来说这种技术都是一个单独的研究方向,学好了薪资很高的。但使用这种技术做动画一般都是需要一个团队的,有主程、美工等多个专业人员一起做。
通过技术评估及我们的需求,决定采用第三种方式,并且自己结合需求,实现了一个简易的动画引擎。目前开发工作已经初步完成,基于js+canvas的引擎代码已经放置github上(https://github.com/luckyPT/AnimationEngine)。基于该引擎可以方便的实现:
①点线面等简单图形以及图片的绘制API,并且很方便的就可以实现旋转、平移、缩放(解决了原生canvas的部分局限性)
②基于雪碧图,可以很方便的实现序列帧动画
③简易的碰撞检测
④该引擎在封装的时候,考虑了可扩展性,可以很好的扩展其他特性(如重力效果)
欢迎转载收藏!!
相关文章推荐
- 一个JS动画框架-基于HTML5::Canvas
- 有趣的Javascript:只需一个JS让万恶的IE5、IE6、IE7、IE8全都支持H5原生Canvas绘图(有演示demo)
- HTML5 2D游戏引擎研发系列 第四章 <Canvas技术篇-画布技术-基于手动切片动画>
- JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
- 原生Js基于HTML5 FileReader&canvas制作的banner广告图片插件
- 基于Canvas的JS游戏引擎(一)
- H5canvas赛车游戏-基于lufylegend引擎
- 基于Canvas的JS游戏引擎(二)
- 基于canvas的原生JS时钟效果
- 基于js面向对象和canvas动画实现贪吃蛇游戏
- 我的js游戏小引擎—— 谈谈 基于dom VS 基于canvas
- H5canvas赛车游戏-基于lufylegend引擎
- 我的js游戏小引擎 —— 可使用canvas模式或DOM模式
- 【canvas】基于坐标的碰撞检测 / 基本的动画 / 多物体动画
- HTML5里面的东西:Canvas KineticJS规模动画教程!
- 【Web】artTemplate模板引擎:编译(生成渲染函数)+渲染(生成HTML串) 模板:基于JS的语法(JS+自定义)+HTML
- js模版引擎(基于html模版和json数据的javascript交互)(第二讲)完结篇
- js动画(animate)简单引擎代码示例
- popping:基于Facebook Pop引擎的iOS动画库
- 效果超赞的基于js的chat组件和图形动画组件