帧动画和时间轴拖动控制

虽然css3可以做出各种帧动画, addClass也可以作为控制.

但有的时候还是希望干干净净的用js

比如逐帧匀速的:

 $page.backwards = function(page, total) {
            var timer = null;
            var num = total + 1;
            timer = setInterval(function() {
                if (num > 0) {
                    num--;
                    if (num === 0) {
                        return;
                    }
                    $("." + page + "_frame" + num).show();
                }
            }, 100);
        };
        $page.forwards = function(page, total) {
            var timer = null;
            var num = 0;
            timer = setInterval(function() {
                if (num < total) {
                    num++;
                    if (num === total) {
                        return;
                    }
                    $("." + page + "_frame" + num).hide();
                }
            }, 100);
        };

setInterval用来设置播放速度,
如果要用drag驱动,

        $page.curwards = function(page, total, cur) {
            $(".frame_area img").hide();
            $("." + page + "_frame" + cur).show();
        };

html里面只要把图片按照倒叙排放, 第一张压在最上面即可(absolute的自然层级)

如果是垂直的时间轴, 例如它的宽度是500:

$page.horiSlide = function(page, width, left, num, obj) {
            var x = obj.x - width;
            var end = 500 - width;
            total = end - left;
            if (x <= left) { x = left; }
            if (x >= end) { x = end; }
            $("." + page + " .hori_button img").css("left", x);
            $page.curwards("." + page, num, Math.ceil((x - left) / (total / num)));
        };

这里的page是区分不同容器, 如此计算可以直接把来自touchmove时间的坐标x分段显示num个帧。