當(dāng)耐特

簡(jiǎn)單輕量跨平臺(tái)的 Javascript 運(yùn)動(dòng)引擎

• Github → https://github.com/dntzhang/cax/tree/master/packages/to
• Simple DEMO
• Animation DEMO
• Clip Transform Animation DEMO
• Animate DEMO
• Swing DEMO

to2to 中文念 '兔兔兔'，作為 cax 內(nèi)置的運(yùn)動(dòng)套件獨(dú)立出一個(gè)package ，因?yàn)樗旧砜梢院推脚_(tái)環(huán)境運(yùn)動(dòng)對(duì)象無(wú)關(guān)。既可運(yùn)動(dòng) dom，也可運(yùn)動(dòng) cax 內(nèi)置對(duì)象，也可運(yùn)動(dòng)對(duì)象子面量。眾所周知，運(yùn)動(dòng)需要循環(huán)的 tick 去不斷執(zhí)行偏移函數(shù)，小程序，小游戲和web各瀏覽器的 相應(yīng)的 API 還是有差異，to2to 抹平了這些差異，讓你使用同樣的api可以在不同環(huán)境暢快運(yùn)動(dòng)。

特性

• 超輕量級(jí)的代碼體積
• 支持周期運(yùn)動(dòng)
• 支持并行與串行運(yùn)動(dòng)
• 運(yùn)動(dòng)一切（Canvas、DOM、WebGL、SVG、Object..）
• 支持小程序、小游戲以及 Web 瀏覽器用相同簡(jiǎn)介的 API 運(yùn)動(dòng)

一分鐘入門(mén) to2to 使用

通過(guò) npm 安裝或者 cdn 下載下來(lái)在 HTML 引用該腳本:

npm i to2to

• https://unpkg.com/to2to@latest/dist/to.min.js
• https://unpkg.com/to2to@latest/dist/to.js

使用:

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 內(nèi)置了 to 的能力以連綴的方式寫(xiě)運(yùn)動(dòng)效果：

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 之間的 與 下一個(gè) to 和 to 之間的是串行

有點(diǎn)繞，但是很直觀，慢慢體會(huì)。

如果想要循環(huán)播放的話可以使用 cycle 方法:

cax.To.get(bitmap)
    .to()
    .y(340, 2000, cax.easing.elasticInOut)
    .to
    .y(0, 2000, cax.easing.elasticInOut)
    .cycle()
    .start()

運(yùn)動(dòng)演示地址

自定義動(dòng)畫(huà)

通過(guò) animate 方法可以使用自定義的動(dòng)畫(huà):

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 內(nèi)置了少數(shù)幾個(gè)自定義動(dòng)畫(huà)

• rubber
• bounceIn
• flipInX
• zoomOut

擴(kuò)展自定義動(dòng)畫(huà)

內(nèi)置的不夠用？自己動(dòng)手豐衣足食:

比如 customAnimation 就是通過(guò)下面實(shí)現(xiàn)的:

To.extend('customAnimation', [['to', ['scaleX', {
  '0': 0,
  '1': 400,
  '2': To.easing.elasticInOut
}], ['scaleY', {
  '0': 0,
  '1': 400
}]]])  

索引為 2 的 easing 可以傳可不傳，不傳代表線性勻速變化。

使用剛剛定義的自定義動(dòng)畫(huà):

To.get(obj).animate('customAnimation').start()

誰(shuí)在使用？

License

MIT