H5动画开发

[AlexZ33]

框架对比

2D、3D、VR的支持

性能

Layabox面向大型游戏的H5游戏引擎，性能优势是毋庸质疑

设计理念与定位

工作流支持力度

工具链的提供与支持也是一种选择考量要素，比如UI编辑器、粒子编辑器、骨骼编辑器、场景编辑器等等，如果引擎方直接提供或支持，那么将会较大的提升研发效率。Egret、Layabox、Cocos2d-JS这三个引擎在工具链方面提供足够全面的支撑。

引擎的应用广度

Egret成名比较早，发展得比较快，各方面的资源而比较多，提供了全套开发流工具。

用游戏引擎的优点：开发快，可维护性高

用游戏引擎的缺点：牺牲一些性能，小游戏用不用引擎几乎感受不到性能差异。大游戏为了开发效率和可维护性，一般都会使用游戏引擎。

参考文章

不会做动画的前端不是好开发 大漠：手淘互动动效的探索 web动画性能指南 CSS动画指南 - 补间动画&逐帧动画 H5游戏开发 createjs常见误区 H5场景小动画实现之PixiJs实战 神秘失踪 pixi.js 移动端H5坑点 微信小游戏开发总结

createjs

easyjs

[AlexZ33]

[AlexZ33]

tweenjs

[AlexZ33]

[AlexZ33]

具体案例可以戳：

[AlexZ33]

[AlexZ33]

Preloadjs

作为createjs的子库，preloadjs用来对文件进行管理和预加载。preloadjs优先通过xhr进行资源加载，通过preloadjs，可以实例多个加载队列，每个队列可以选择加载文件或者多文件。同时，监听文件下载阶段的事件。方便我们在不同的阶段绑定相应的事件处理程序。

1、 对于图片的加载，preloadjs会开启多个线程加载图片 2、监听文件加载各个阶段的事件，可以实现按需加载，按资源类型加载，可以更加方便的实现loading页进度 3、为加载各种文件提供管理的api，支持的文件类型。

[AlexZ33]

scrollerjs

scroller是一个纯净监听scroll和zoom的组件，它独立于任何特定类型的渲染或事件系统。当用户手指滑动屏幕时。触发滚动，通过监听滚动事件，在滚动一定距离触发事件，事件参数包含位置信息等，根据位置信息决定渲染内容（画布显示隐藏，图片位置等）

• scrollerjs的特性 1、可自定义启用、禁用x轴和y轴的滚动 2、减速（当用户动作结束时减速） 3、弹跳（弹回边缘） 4、缩放（自动居中缩放或者基于图中具有可配置的最小、最大缩放的点） 5、下拉刷新 5、可配置是否应使用动画

[AlexZ33]

pixijs

PixiJS是一个快速的轻量级的2D动画渲染引擎，主要使用了WebGL技术，能帮助展示、驱动和管理富有交互性的图形、制作游戏。使用JavaScript以及其他HTML5技术，结合PixiJS引擎，可以创建出丰富的交互式图形，跨平台的应用程序和游戏。

样例

https://codepen.io/AlexZ33/pen/wvwMvaY

生态

awesome-pixijs

插件

[AlexZ33]

Hilo : 适合电商业务

• 官网 : https://github.com/hiloteam/Hilo3d

[AlexZ33]

Konva

Konva 是一个 基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果

konva概念

• stage: 画布
• layer: 层
• group: 组
• 图形

基本操作

• 创建画布

  var stage = new Konva.Stage({
        container:"box",
        width:600,
        height:600
    });

• 创建层

  var layer = new Konva.Layer();
    stage.add(layer);
  ...........
  layer.draw();  //绘制层

[AlexZ33]

phaser

[AlexZ33]

hammer

https://codepen.io/AlexZ33/pen/wvwdbJj?editors=1010

[AlexZ33]

动画库

贝塞尔曲线

https://github.com/mtsee/Bezier/blob/master/src/bezier.js

[AlexZ33]

刮奖

https://github.com/Franslee/lucky-card

转盘

[AlexZ33]

seinjs

• 官网: https://seinjs.com/cn/overview

[AlexZ33]

egret3d

egret-labs/egret3d