jQuery.timeline.js - アニメーションタイムライン

exsample.js

// jQuery、timeline.js を事前に読み込んでおく必要あり
//
// timeline.js について
// - http://hitsujiwool.tumblr.com/post/31191259501/timeline-js
// - https://github.com/hitsujiwool/timeline

// 使い方１：一括指定して実行

var totalFrames = 200,
    tl = $("div").timeline(totalFrames)
        // 15フレーム目で処理を実行
        .at(15, function() {
            if ($(this).index() === 0) {
                $(this).animate({ opacity: 0 });
            }
        })
        // 100フレーム目で処理を実行
        .at(100, function() {  
            if ($(this).index() === 1) {
                $(this).animate({ opacity: 0 });
            }
            else if ($(this).index() === 0) {
                $(this).animate({ opacity: 1 });
            }
        })
        // 最後のフレームで処理を実行
        .on("teardown", function() {
            if ($(this).index() === 1) {
                $(this).animate({ opacity: 1 }, function() {
                    tl.stop().set(1).gotoAndStop(totalFrames);
                });
            }
        })
        .gotoAndStop(totalFrames);

// 使い方２：timeline() で取得した配列に対して、他のタイムラインを追加して実行

var totalFrames = 200,
    // タイムライン１
    tl1 = $("div:eq(0)").timeline(totalFrames)
        // 15フレーム目で処理を実行
        .at(15, function() {
            $(this).animate({ opacity: 0 });
        })
        // 100フレーム目で処理を実行
        .at(100, function() {
            $(this).animate({ opacity: 1 });
        }),
    // タイムライン２
    tl2 = $("div:eq(1)").timeline(totalFrames)
        // 100フレーム目で処理を実行
        .at(100, function() {  
            if ($(this).index() === 1) {
                $(this).animate({ opacity: 0 });
            }
        })
        // 最後のフレームで処理を実行
        .on("teardown", function() {
            if ($(this).index() === 1) {
                $(this).animate({ opacity: 1 }, function() {
                    tl1.stop().set(1).gotoAndStop(totalFrames);
                });
            }
        });

tl1.push(tl2);
tl1.gotoAndStop(totalFrames);

// 使い方３：元となるタイムラインを作り、他に適用して実行

var totalFrames = 200,
    tl = $.timeline(totalFrames)
        // 15フレーム目で処理を実行
        .at(15, function() {
            if ($(this).index() === 0) {
                $(this).animate({ opacity: 0 });
            }
        })
        // 100フレーム目で処理を実行
        .at(100, function() {  
            if ($(this).index() === 1) {
                $(this).animate({ opacity: 0 });
            }
            else if ($(this).index() === 0) {
                $(this).animate({ opacity: 1 });
            }
        })
        // 最後のフレームで処理を実行
        .on("teardown", function() {
            if ($(this).index() === 1) {
                $(this).animate({ opacity: 1 }, function() {
                    tl.stop().set(1).gotoAndStop(totalFrames);
                });
            }
        });

tl = $("div").timeline(tl).gotoAndStop(totalFrames);

jquery.timeline.js

/*!
 * jQuery.timeline.js
 * version 0.0.2
 * Copyright(c) 2012 Kazunori Ninomiya <[email protected]>
 * MIT Licensed
 */

;(function($, window, document, undefined) {

    "use strict";

    var TimelineManager, TL;

    function extend(s, c)
    {
        var a;
        function f() {};
        if (s === Array) {
            a = new s;
            f.prototype.constrctor = s;
            $.each(("concat join length pop push reverse " +
                    "shift slice sort splice unshift").split(" "), function() {
                f.prototype[this] = a[this];
            });
        }
        else {
            f.prototype = s.prototype;
        }
        c.prototype = new f();
        c.prototype.__super = s.prototype;
        c.prototype.constructor = c;
        return c;
    }

    /** http://davidwalsh.name/javascript-clone */
    function clone(src)
    {
        function mixin(dest, source, copyFunc)
        {
            var name, s, i, empty = {};
            for(name in source){
                s = source[name];
                if (!(name in dest) || (dest[name] !== s
                    && (!(name in empty) || empty[name] !== s))
                ) {
                    dest[name] = copyFunc ? copyFunc(s) : s;
                }
            }
            return dest;
        }

        if (!src || typeof src != "object"
            || Object.prototype.toString.call(src) === "[object Function]"
        ) {
            return src;
        }

        if (src.nodeType && "cloneNode" in src) {
            return src.cloneNode(true);
        }

        if (src instanceof Date) {
            return new Date(src.getTime());
        }

        if (src instanceof RegExp) {
            return new RegExp(src);
        }

        var r, i, l;
        if (src instanceof Array) {
            r = [];
            for(i = 0, l = src.length; i < l; ++i) {
                if (i in src) {
                    r.push(clone(src[i]));
                }
            }
        }
        else{
            r = src.constructor ? new src.constructor() : {};
        }
        return mixin(r, src, clone);
    }

    function extractTL(args)
    {
        var tl, i = 0, j = 0, iz = args.length, tmp = [];
        for (; i < iz; i++) {
            tl = args[i];
            if (tl instanceof TL || tl instanceof TimelineManager) {
                tmp[j++] = tl;
            }
        }
        return tmp;
    }

    TimelineManager = extend(Array, function(tls) {
        this.__super.constructor.call(this);
        this.push.apply(this, tls);
    });

    TimelineManager.prototype.push = function() {
        return this.__super.push.apply(this, extractTL(arguments));
    };

    TimelineManager.prototype.unshift = function() {
        return this.__super.unshift.apply(this, extractTL(arguments));
    };

    TimelineManager.prototype.concat = function() {
        var tl, tls = extractTL(arguments), i = 0, iz = tls.length,
            tmp = this.__super.slice.call(this, 0);
        for (; i < iz; i++) {
            tl = tls[i] instanceof TL ? [tls[i]] :
                this.__super.slice.call(tls[i], 0);
            tmp = this.__super.concat.apply(tmp, tl);
        }
        return new TimelineManager(tmp);
    };

    TimelineManager.prototype.splice = function() {
        var args = this.__super.slice.call(arguments, 0);
        if (args.length >= 3) {
            args = args.concat(extractTL(this.__super.splice.call(args, 2)));
        }
        return new TimelineManager(this.__super.splice.apply(this, args));
    };

    TimelineManager.prototype.on = function(event, fn) {
        $(this).each(function() {
            if (this instanceof TL || this instanceof TimelineManager) {
                this.on(event, fn);
            }
        });
        return this;
    };

    TimelineManager.prototype.at = function(n, callback) {
        $(this).each(function() {
            if (this instanceof TL || this instanceof TimelineManager) {
                this.at(n, callback);
            }
        });
        return this;
    };

    TimelineManager.prototype.eachFrame = function(from, to, callback) {
        $(this).each(function() {
            if (this instanceof TL || this instanceof TimelineManager) {
                this.eachFrame(from, to, callback);
            }
        });
        return this;
    };

    TimelineManager.prototype.alias = function(n, name) {
        $(this).each(function() {
            if (this instanceof TL || this instanceof TimelineManager) {
                this.alias(n, name);
            }
        });
        return this;
    };

    TimelineManager.prototype.nthFrame = function(n) {
        return $(this).map(function() {
            if (this instanceof TL || this instanceof TimelineManager) {
                return this.nthFrame(n);
            }
        });
    };

    TimelineManager.prototype.distanceBetween = function(from, to) {
        $(this).each(function() {
            if (this instanceof TL || this instanceof TimelineManager) {
                this.distanceBetween(from, to);
            }
        });
        return this;
    };

    TimelineManager.prototype.set = function(n) {
        $(this).each(function() {
            if (this instanceof TL || this instanceof TimelineManager) {
                this.set(n);
            }
        });
        return this;
    };
    
    TimelineManager.prototype.stop = function() {
        $(this).each(function() {
            if (this instanceof TL || this instanceof TimelineManager) {
                this.stop();
            }
        });
        return this;
    };

    TimelineManager.prototype.gotoAndStop = function(n, interval) {
        $(this).each(function() {
            if (this instanceof TL || this instanceof TimelineManager) {
                this.gotoAndStop(n, interval);
            }
        });
        return this;
    };

    TimelineManager.prototype.backtoAndStop = function(n, interval) {
        $(this).each(function() {
            if (this instanceof TL || this instanceof TimelineManager) {
                this.backtoAndStop(n, interval);
            }
        });
        return this;
    };

    TL = extend(Timeline, function(numFrames, el) {
        Timeline.call(this, numFrames);
        if (el) {
            this.target = el;
        }
    });

    TL.Event = { CREATE: 1, CLONE: 2 };

    TL.prototype.target = null;

    TL.prototype.runCallbackAt = function(nthFrame, delta) {
        var callbacks = this.timeline[nthFrame] || [],
            that = this, i = 0, iz = callbacks.length;

        for (; i < iz; i++) {
            (function(i) {
                setTimeout(function() {
                    $(that.target).each(function() {
                        callbacks[i].call(this, delta);
                    });
                });
            }(i));
        }
    };

    TL.prototype.emit = function(event) {
        var i, iz, args = Array.prototype.slice.call(arguments, 1),
            callbacks = this.callbacks[event];
        if (callbacks) {
            for (i = 0, iz = callbacks.length; i < iz; i++) {
                $(this.target).each(function() {
                    callbacks[i].apply(this, args);
                });
            }
        }
        return this;
    };

    $.extend($, {
        timeline: function(numFrames) {
            return numFrames !== null && isFinite(numFrames) ?
                new TL(numFrames) : false;
        }
    });

    $.extend($.fn, {
        timeline: function() {
            var e, tls = [], arg = arguments[0];

            if (arg instanceof TL) {
                e = TL.Event.CLONE;
            } 
            else if (arg !== null && isFinite(arg)) {
                e = TL.Event.CREATE;
            }

            $.each(this, function() {
                var tl;

                switch (e) {
                    case TL.Event.CLONE:
                        tl = clone(arg);
                        tl.target = this;
                        tl.currentFrame = 1;
                        tl.locked = false;    
                        $(this).data("timeline", tl);
                        break;

                    case TL.Event.CREATE:
                        tl = new TL(arg, this);
                        $(this).data("timeline", tl);
                        break;

                    default:
                        tl = $(this).data("timeline");
                        break;
                }

                tls[tls.length] = tl;
            });

            return new TimelineManager(tls);
        }
    });

}(jQuery, this, this.document));