Easing | KnockKnock

JS系のTweenライブラリだと、オブジェクトのCSSプロパティにトゥイーンをかける事を基本に設計されている場合が多いかとおもいます。もちろんTweenかけるものって基本的に表示要素なので、CSSにトゥイーンをかけることは間違ってはいないのですが、以前の記事にてSprite3Dを使用しましたが、Sprite3Dを使ってトゥイーンをかけたい場合は、CSSプロパティではなく、メソッドを実行する必要があります。もちろんメソッドの中ではCSSプロパティを操作しているわけですが。

そういった目的に絞って、シンプルなトゥイーンエンジンが必要になり、作りましたので投稿します。
概要は、オブジェクトのプロパティの値を現在の値から、指定した値まで、指定秒で、指定イージング関数を通して変化を与えつづけます。
ソース
 デモページ

基本的な使い方ですが、まずはじめに第一引数にオブジェクトを渡してTween関数を実行して、戻り値を変数に格納してください。クラスベースのオブジェクト指向言語的に考えますと、Tweenクラスをnewしてインスタンスを生成するイメージです。


var tween = knockknock.jp.Tween({a:0, b:0});

トゥイーンを実行したいタイミングで、このインスタンスのplayメソッドを第一引数に変化を与えたいプロパティと変化量を、第二引数にイージング関数と時間、各種コールバックをそれぞれオブジェクトにして渡して、実行してください。


tween.play({
    a: 100
    b: -100
},{
    easing: knockknock.jp.Easing.sineEaseOut,
    duration: 1000,
    play: function(e){
        // トゥイーン開始
    },
    update: function(e){
        // プロパティaの値
        console.log(e.target.a);
        // プロパティbの値
        console.log(e.target.b);
    },
    complete: function(e){
        // トゥイーン終了
    }
});

コールバック関数updateのe.targetを参照することで、変化量を取得できますので、この値を利用して必要なトゥイーンを行ってください。例えば以下のようにupdate関数を定義すると通常jQueryのAnimateを実行したときのように、CSSに変化を与えることができます。


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";
    }
});

じつは、この記事を書きながら調べて気がついたのですが、jQueryのAnimateで全く同じことができるんですね。。。
jQuery の .animate() で普通のオブジェクトをアニメーションさせる

FlashではトゥイーンエンジンはTweenクラスに始まり、TweenerやFuseKit、TweenMAX、BetweenAS3と色々ありますが、JavaScriptでも増えてきた感はあります。GSAP JSとかよさそうですね。個人的にはBetweenAS3を非常に愛用していましたので、BetweenJSに期待したいところです。

タグ別アーカイブ: Easing

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

関連記事