JavaScriptのシンプルなトゥイーンエンジン

オブジェクトのプロパティの値を現在の値から、指定した値まで、指定秒で、指定イージング関数を通して変化を与えつづけます。

基本

値に変更を与えるためのオブジェクトとトゥイーンインスタンスを作成して、playメソッドを実行します。

var a = document.getElementById("a");
var b = document.getElementById("b");
var status = document.getElementById("status");
var tween = knockknock.jp.Tween({a:0, b:0});
tween.play({
    a: 100
    b: -100
},{
    easing: knockknock.jp.Easing.sineEaseOut,
    duration: 1000,
    play: function(e){
        status.value = "play";
    },
    update: function(e){
        a.value = e.target.a;
        b.value = e.target.b;
    },
    complete: function(e){
        status.value = "complete";
    }
});
a :
b :
status :

トゥイーンアニメーションに応用

変更が与えられる度に呼ばれるコールバック関数updateを利用してbox1を移動します。

var box = document.getElementById("box");
var tween = knockknock.jp.Tween({left:0});
tween.play({
    left: 500
},{
    easing: knockknock.jp.Easing.sineEaseOut,
    duration: 1000,
    update: function(e){
        box.style.left = e.target.left + "px";
    }
});
box