幀動畫和時間軸拖動控制

雖然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個幀。