what you see is what you get

ALLOYFLOW

var alloyFlow = new AlloyFlow({
    workflow: [
        {
            work: function () {
                addClass(show_box, "flash");
            },
            start: 0
        },{
            work: function () {
                removeClass(show_box, "flash");
                addClass(show_box, "rubberBand");
            },
            start: 1500
        },{
            work: function () {
                removeClass(show_box, "rubberBand");
                addClass(show_box, "flipOutY");
            },
            start: 3000
        },{
            work: function () {
                removeClass(show_box, "flipOutY");
                addClass(show_box, "bounceIn");
            },
            start: 4500
        },{
            work: function () {
                removeClass(show_box, "bounceIn");
                this.start();
            },
            start: 6000
        }
    ]
}).start();

flow controller

ALLOYFLOW

var alloyFlow = new AlloyFlow({
    workflow: [
        {
            work: function () {
                explode();
            },
            start: [0, 2000, 4000, 6000]
        },{
            work: function () {
                addClass(title, "swing");
            },
            start: 8000
        },{
            work: function () {
                removeClass(title, "swing");
                this.start();
            },
            start: 10000
        }
    ]
}).start();

good at asynchronous workflow

ALLOYFLOW

 var alloyFlow = new AlloyFlow({
    workflow: [
        function () {
            new To(alloy, "scaleX", 1, 400);
            new To(alloy, "scaleY", 1, 400, function () {
                alloyFlow.next("msg");
            });
        },
        function (msg) {
            new To(flow, "scaleX", 1, 400);
            new To(flow, "scaleY", 1, 400, function () {
                alloyFlow.next("msg", 2000);
            });
        },
        function (msg) {
            new To(alloy, "scaleX", 0, 400);
            new To(alloy, "scaleY", 0, 400);
            new To(flow, "scaleX", 0, 400);
            new To(flow, "scaleY", 0, 400, function (msg) {
                alloyFlow.next("msg", 2000);
            });
        },
        function (msg) {
            alloyFlow.start();
        }
    ]
});

alloyFlow.start();

magician with transition

parallel with ease

var alloyFlow = new AlloyFlow({
    workflow: [
        {
            work: function () {
                dosomething1();
            },
            start: 0
        },{
            work: function () {
                dosomething2();
            },
            start: 0
        },{
            work: function () {
                dosomething3();
            },
            start: 1000
        },{
            work: function () {
                dosomething4();
            },
            start: 1000
        }
     ]
  });

 alloyFlow.start();

perfection in series

var alloyFlow = new AlloyFlow({
    workflow: [
        function () {
            ajax("xx.php",function(result){
                alloyFlow.next(result);
            });
        },
        function (result) {
            var data = process(result);
            alloyFlow.next(data);
        },
        function (data) {
            var html = toHTML(data, tpl);
            alloyFlow.next(html);
        },
        function (html) {
            renderTo(html, parent);
        }
  ]});

  alloyFlow.start();

amazing effect

API

flow of time

var alloyFlow = new AlloyFlow({
    workflow: [
        {
            work: function () { },
            start: 0
        },{
            work: function () { },
            start: 1500
        },{
            work: function () { },
            start: [720, 1000, 400, 6000]
        }
    ],
   onStart: function () { },
   onProgress: function () { },
   onEnd: function () { }
  });

  alloyFlow.start();

flow of task

 var alloyFlow = new AlloyFlow({
    workflow: [
        function () {
            alloyFlow.next("msg");
        },
        function (msg) {
            alloyFlow.next("msg", 2000);
        },
        function (msg) {
            
        }
    ]
  });

  alloyFlow.start();

[start|stop] method

 var alloyFlow = new AlloyFlow({
    workflow: [
        function () {
            //stop
            //alloyFlow.stop();
        },
        function (msg) {
            //restart
            alloyFlow.start();
        }
    ]
  });
  //start
  alloyFlow.start();

[next|callback] method

 var alloyFlow = new AlloyFlow({
    workflow: [
        function () {
            //exec the next function
            this.next("msg");
            //or exec the callback function
            //this.callback("msg" , "msg2");
        },
        function (msg) {
            //exec the next function after 2000ms
            this.next("msg", 2000);
        },
        function (msg) {
            
        }
    ]
  }).start();