Easingを自分で作って使ってみる

結構、普通にeasingを使ってしまっているのですが、所定の位置に記載をするなどで、easingなどを使っているの実際の仕組みが分からない事が多いので、一度、easingを作って、割りと原始的な方法で、easingを使ってみたいと思います。

最初にEasingをObjectで作成してみます。

Easing = {}

easeOutCubicを作成してみます。

// t: current time, b: begInnIng value, c: change In value, d: duration
Easing = {
easeOutCubic: function (t, b, c, d) {
        return c*((t=t/d-1)*t*t + 1) + b;
}
}

これで、easeOutCubicを作成したので使ってみます。使い方はいろいろあるのですが、今回は0秒から1秒の間に0から1に動くと過程したデータを0.1秒など細かい時間単位で習得してイージングを調べてみます。

alert(Easing.easeOutCubic(0.1,0,1,1));
alert(Easing.easeOutCubic(0.3,0,1,1));
alert(Easing.easeOutCubic(0.5,0,1,1));
alert(Easing.easeOutCubic(0.7,0,1,1));
alert(Easing.easeOutCubic(0.9,0,1,1));
alert(Easing.easeOutCubic(1.0,0,1,1));

こんな感じで値を確認すると、一番上から10%の進捗(%),30%からの進捗と言うように書いてあり取得できる値は

0.27|0.65|0.87|0.97|0.99|1

のようにeasingしたデータが取得できてます。

次にこの値を上手に使いたいのですが、setTimeoutを使うのがいいのかもしれません。

最初に毎回、現在の進捗を登録して、最後にアラートを出してみたいと思います。

var _num = "";    
function checkData(_date){
    _num += _date + "\n";
}
function finishFunc(){
    alert(_num);
}

上記で、毎回checkDataで_numに進捗をいれて、最後の_numを出力します。

function easingFun(_duration , _func, _finFunc){
    setTimeout(eaasingSample,33);
    var _firstTime  = new Date().getTime();
    function eaasingSample(){
        var _current = new Date().getTime();
        if(_firstTime+_duration > _current){
            setTimeout(eaasingSample,33);
            var _timeData = (_current - _firstTime)/_duration;
            _func(Easing.easeOutCubic(_timeData,0,1,1));
        }else{
            _func(1);
            if(_finFunc != null){
                _finFunc();
            }
        }
    }
}
easingFun(1000,checkData,finishFunc);

上記を実行すると、1000ミリ秒間でイージングをしていきます。

33ミリ秒で毎回実行して指定の時間を超えるまで繰り返す仕様です。

これを実行すると

0.075989576
0.13174933600000016
0.2136695329999999
・・・
0.999169416
0.999773019
0.999978048

のように値が取得できる。

これは文字列として返されているのだけど例えば

function checkData(_date){
    $("#target").css("height",_date*100 + 100 )
}

のようにすると、高さが最初に100pxのものが200ピクセルになるようなイージングがかかりました。

easingFunの中の数字を変えると全体の秒数も変更ができます。

なので、これでイージングが完成です。

イージングの関数はjqueryのeasingを参考にすると割りと作りやすいかと思います。

jquery easing plugin

Next / Prev

前の記事:

次の記事:

Same Category

Page top↑