【开源】小程序、小游戏和Web运动引擎 to2to 发布
2018-06-25 11:02
519 查看
简单轻量跨平台的 Javascript 运动引擎
- Github → https://github.com/dntzhang/cax/tree/master/packages/to
- Simple DEMO
- Animation DEMO
- Clip Transform Animation DEMO
- Animate DEMO
- Swing DEMO
to2to 中文念 '兔兔兔',作为 cax 内置的运动套件独立出一个package ,因为它本身可以和平台环境运动对象无关。既可运动 dom,也可运动 cax 内置对象,也可运动对象子面量。众所周知,运动需要循环的 tick 去不断执行偏移函数,小程序,小游戏和web各浏览器的 相应的 API 还是有差异,to2to 抹平了这些差异,让你使用同样的api可以在不同环境畅快运动。
特性
- 超轻量级的代码体积
- 支持周期运动
- 支持并行与串行运动
- 运动一切(Canvas、DOM、WebGL、SVG、Object..)
- 支持小程序、小游戏以及 Web 浏览器用相同简介的 API 运动
一分钟入门 to2to 使用
通过 npm 安装或者 cdn 下载下来在 HTML 引用该脚本:
npm i to2to
使用:
import To from 'to2to' const ele = document.querySelector('#animateEle') To.get({ rotate: 0, x: 0, y: 0 }) .to({ rotate: 720, x: 200, y: 200 }, 1600, To.easing.elasticInOut) .progress(function () { ele.style.transform = `translate(${this.x}px, ${this.y}px) rotate(${this.rotate}deg)` }) .start()
在 cax 中使用 to2to
cax 内置了 to 的能力以连缀的方式写运动效果:
const easing = cax.To.easing.elasticInOut cax.To.get(bitmap) .to({ y: 340, rotation: 240 }, 2000, easing) .begin(() => { console.log("Task one has began!") }) .progress(() => { console.log("Task one is progressing!") }) .end(() => { console.log("Task one has completed!") }) .wait(500) .to() .rotation(0, 1400, easing) .begin(() => { console.log("Task two has began!") }) .progress(() => { console.log("Task two is progressing!") }) .end(() => { console.log("Task two has completed!") }) .start();
to
和to
之间的是并行to
和wait
之前的是串行to
和to
之间的 与 下一个to
和to
之间的是串行
有点绕,但是很直观,慢慢体会。
如果想要循环播放的话可以使用
cycle方法:
cax.To.get(bitmap) .to() .y(340, 2000, cax.easing.elasticInOut) .to .y(0, 2000, cax.easing.elasticInOut) .cycle() .start()
自定义动画
通过
animate方法可以使用自定义的动画:
const stage = new cax.Stage(300, 400, 'body') const bitmap = new cax.Bitmap('./wepay-diy.jpg', function () { var eio = To.easing.elasticInOut To.get(bitmap).animate('rubber').start() }) bitmap.x = 150 bitmap.y = 200 bitmap.originX = 40 bitmap.originY = 40 stage.add(bitmap) cax.setInterval(() => { stage.update() }, 16)
to2to 内置了少数几个自定义动画
- rubber
- bounceIn
- flipInX
- zoomOut
扩展自定义动画
内置的不够用?自己动手丰衣足食:
比如
customAnimation就是通过下面实现的:
To.extend('customAnimation', [['to', ['scaleX', { '0': 0, '1': 400, '2': To.easing.elasticInOut }], ['scaleY', { '0': 0, '1': 400 }]]])
索引为 2 的 easing 可以传可不传,不传代表线性匀速变化。
使用刚刚定义的自定义动画:
To.get(obj).animate('customAnimation').start()
谁在使用?
License
MIT
相关文章推荐
- 【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax
- HTML5游戏开发开源库件lufylegend1.4.0发布,新增物理引擎Box2dWeb封装和缓动类TweenLite
- 把工程所在的目录做为WEB程序的发布路径!
- flash 2.5D游戏引擎,开源,带全套源码 附送2个小游戏
- Tomcat的权限问题-无法发布web程序和建立log日志文件
- web程序的发布及相关问题
- 我开发的中文分词程序,开源发布
- JavaWeb-2-解决发布程序后,报500错误
- Mobile First!开源HTML5游戏引擎Kiwi.js 1.0正式发布
- web程序进入开源的时代
- 免费开源程序企业构建集成系统iMatrix平台发布,分享下!
- 秋式开源团队-Web1组-论坛-第一阶段源码发布并提供下载
- 最先进的开源游戏引擎KlayGE 4.2发布
- 开源项目之cgi---小型web处理程序
- 【微信小程序跳一跳】尝试用github开源机器学习玩跳一跳小游戏步骤
- 开源免费的HTML5游戏引擎——青瓷引擎(QICI Engine) 1.0正式版发布了!
- 一篇文章读懂开源web引擎Crosswalk
- 一篇文章读懂开源web引擎Crosswalk
- 开源OCR引擎Tesseract 3.0发布
- 在Linux平台下部署Java web环境和发布Java web程序