【开源】小程序、小游戏和Web运动引擎 to2to 发布
程序员文章站
2022-03-23 17:04:07
简单轻量跨平台的 Javascript 运动引擎 Github → "https://github.com/dntzhang/cax/tree/master/packages/to" "Simple DEMO" "Animation DEMO" "Clip Transform Animation D ......
简单轻量跨平台的 Javascript 运动引擎
- Github →
to2to 中文念 '兔兔兔',作为 内置的运动套件独立出一个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