ScriptaculousのEffect実行順序を管理するJSを作ってみた。

仕事で使おうと思って作ったら意外といい出来だったので公開してみる。

だうそろーど

たとえば、こう書くと

    var element = $('block');
    var planner = new EffectPlanner(
        [
            {
                Move: [element, {x: 200, y: 200}]
            },
            {
                Move: [element, {x: 0, y: 300}]
            },
            {
                Move: [element, {x: 300, y: 0}]
            },
            {
                Move: [element, {x: 0, y: -300}]
            },
            {
                Move: [element, {x: -300, y: 0}],
                next: 1
            }
        ]
    );
    planner.start();

こうなる

http://sample.ecmascript.jp/20060523-00.html

たとえば、こう書くと

    var colors = { 0: '#FF0000', 1: '#00FF00', 2: '#0000FF', count: 0 };
    var element = $('block');
    var style = element.style;
    var deathCount = 2;
    var planner = new EffectPlanner(
        [
            {
                Appear: [element],
                Move: [element, {x: 0, y: 100}],
                next: function(planner) {
                    if(deathCount--) {
                        planner.next();
                    }
                    else {
                        planner.next(2);
                    }
                }
            },
            {
                Fade: [element],
                Move: [element, {x: 0, y: -100}],
                options: {
                    afterFinish: function() {
                        style.backgroundColor = colors[++colors.count % 3];
                    }
                },
                next: 0
            },
            {
                Fade: [element],
                Move: [element, {x: 500, y: 0}],
                options: {
                    duration: 0.4
                }
            }
        ]
    );
    planner.start();

こうなる

http://sample.ecmascript.jp/20060523.html