【オープンソース】アプレット、ミニゲーム、Webスポーツエンジンto 2 toが発表

簡単な軽い量はプラットフォームのJavascriptスポーツエンジンにまたがります.

Github→https://github.com/dntzhang/cax/tree/master/packages/to

Simple DEMO

Animation DEMO

Clip Transform Animation DEMO

Animate DEMO

Swing DEMO

2 to中国語で「兎兎」を読むと、caxに内蔵されたスポーツセットとして独立したパッケージが作られています.それ自体はプラットフォームの環境運動の対象とは関係がないからです.domを動かすこともできますし、cax内蔵オブジェクトを動かすこともできます.周知のように、運動は循環のtickが絶えずオフセット関数を実行することを必要として、小さいプログラム、小さいゲームとウェブの各ブラウザの相応するAPIはやはり違いがあります.
特性

超軽量級コード体積

サイクル運動をサポートします.

は、パラレル・シリアル・モーション

をサポートする.

すべてのスポーツ(Canvas、DOM、WebGL、SVG、Object.)

は、ウィジェット、ミニゲーム、Webブラウザと同じプロファイルでAPI運動

をサポートする.
一分間入門to 2 to使用
npmインストールまたはcdnでダウンロードして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にto 2 toを使用する
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)

to 2 toにはいくつかのカスタムアニメーションが内蔵されています.

.ルビー

bounceIn

flip InX

zoomOut

カスタムアニメーションを拡張
内蔵が足りないですか?自分で手を下して衣食を十分にする:
たとえばcustomAnimationは、以下のように実現される.

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

インデックスは2のeasungで伝達できます.伝達しないと線形等速変化を表します.
先ほど定義したカスタムアニメーションを使用します.

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

誰が使っていますか
License
MIT