jQueryのanimateをキーフレーム打ちできるようにしてみるなど

jQueryのanimateを大量に書き連ねなくちゃいけないときが、あるんです。男には。 で、その上それがcallback地獄になってて、コードのど真ん中に美しいピラミッドが出来上がってたりするんです。 まあ、イケてないよね、正直。キーフレーム打てたらそれでそもそも解決じゃん？みたいな。

というわけで書いてみた。

使い方

プラグイン本体はこいつ

(function($){
    $.fn.keyframeAnimate = function(keyframes,interval,easing,callback){

        var keyframe = []
        var lastframe = 0;

        //各プロパティをばらすと共に、各プロパティの指定フレーム数をチェック。
        for(key in keyframes){
            if(lastframe <= keyframes[key].length){
                lastframe = keyframes[key].length
            }
            keyframe.push({property:key,frames:keyframes[key]})
        }

        //最長フレーム数に合わせて、最終フレームのコピーで埋める
        for(i=0,il=keyframe.length;i<il;i++){
            var currentLength = keyframe[i].frames.length;
            if(currentLength < lastframe){
                var lastValue = keyframe[i].frames[currentLength-1];
                var fillcount =  lastframe - currentLength;
                for(j=0;j<fillcount;j++){
                    keyframe[i].frames.push(lastValue)
                }

            }
        }

        return this.each(function() {

            var $el = $(this);
            var scope = this;
            var i = 0;

            function doAnimate(i){
                var frame = {};
                for(j=0,jl=keyframe.length;j<jl;j++){
                    frame[""+keyframe[j].property] = keyframe[j].frames[i]                  
                }
                $el.animate(frame,interval,easing,function(){
                    i++
                    if(i<lastframe){
                        doAnimate(i)
                    }else if(i == lastframe){
                        return callback.call(this)
                    }
                })
            }
            doAnimate(i);
        });
    };
})(jQuery);

書き方汚いのは毎度の事だ気にするな。 使い方はだいたいjQuery.animate()と同じだけど、プロパティの値の指定を配列で渡す事と、durationではなくフレームの間隔の指定になるという点のみが違う。またキーフレームは一番指定数の多いところが優先されて、例えば全長6フレーム指定なのに、一部プロパティが4フレームまでの指定、になると5,6は4の値を継続して指定される。

$("#test").keyframeAnimate({
        top:[50,-40,30,-20,10,0],
        opacity:[0.3,0.6,1]
    },100,"swing",function(){
        //callback処理
    });

こんな具合。かなりスッキリ出来ると思うの。jsdo.itで晒しているのは、エロい人が直してくれると信じているからなので、だれかもっとスマートに書き直してください。以上！おやすみ！