微信H5页面框架设计 h5_slide.js用法介绍

1. 习惯所致，通常开始写代码之前写一点准备代码, 完全是为了减少代码量方便阅读

$ = function(sel, holder){ 
    return [].slice.call( (holder||document).querySelectorAll(sel) );
};
$.on = function(dom, eventType, f){
    [].concat(dom).forEach(function(d){
        eventType.split(/W+/).forEach(function(type){
            d.addEventListener(type, f ,false);
        });
    });
    return $;
};

2.  第一步创建一个类似swiper的切换效果，当然我们只是操作纵向，在CSS3中使用 transform 位置变换 + 过渡效果，很容易实现，关键是需要在事件绑定时候进行计算。另外，如果所有页面都是100%宽100%高的话自然不需要考虑内部滚动事件，我们这里需要考虑更多的事情，所以最好使用额外的一个透明层做事件绑定，然后操作与真实的section内容。

container = $("#container")[0]
holder = document.createElement("div"),
holder.style.cssText = "position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 1;";
container.appendChild(holder);

3. 切换的方法我暂且定做  transform_set(dom/*当前section*/, i/*前移还是后移i个section*/); 大概就是酱紫了

var H = document.documentElement.clientHeight;
        if( "undefined" === typeof i ){
            i = dom | 0;
        }else if( "number" != typeof dom ){
            i = sections.indexOf(dom) + i;
        }
        i = Math.min( Math.max( 0, i ), sections.length - 1);
        
css_model = function(h,l){
            return "-webkit-transform: translate3d("+(l|0)+"px, "+(h|0)+"px, 0); transform: translate3d("+(l|0)+"px, "+(h|0)+"px, 0);";
        };
        
sections.forEach(function(section, index){
                switch(index){
                    case i:
                        current_index = i;
                        section.style.cssText = css_model();
                        break;
                    case i+1:
                        section.style.cssText = css_model(H);
                        break;
                    case i-1:
                        section.style.cssText = css_model(-H);
                        break;
                    default:
                        section.style.cssText = css_model( (index > i) ? H : -H );
                }
            });

4. 注意事件绑定的时候需要判断方向，来确定切换是前移还是后移

// 事件
    var startTy, curTy, endTy, autoStep;
    $.on(holder, "touchstart", function(e){
        var touch = e.touches[0];
            startTy = curTy = touch.clientY;
    }).on(holder, "touchend", function(e){
        var touch = e.changedTouches[0],  //只判断单点触控
                endTy = touch.clientY;
        transform_set(sections[current_index], startTy > endTy ? 1 : -1);
        startTy = curTy = endTy = 0;
    }).on(document, "keydown", function(e){    // key 和 mouse 事件只是为了方便PC浏览器
        switch(e.keyCode){
            case 32:
            case 39:
            case 40: transform_set(sections[current_index], 20); break;
            case 37:
            case 38: transform_set(sections[current_index], -20); break;
        }
    }).on(document, "mousewheel", function(e){
        transform_set(sections[current_index], e.wheelDeltaY < 0 ? 20: -20);
    });

这节先到这里，事实上已经完成了一个方便的swiper效果。  然并卵，复杂的内容还木有开始（scrollTop位置检测，内置元素的相对transform设置和参数设计，动画元素分组，图片loading，按钮元素模拟穿透等）， 详情关注本系列文章。

在前文中，我们简单讲了一个移动端整页切换的效果处理，本文主要来识别滚屏动画的进度接口设置。

考虑到单页面内滚动高度可能随着不同屏幕分辨率有所不同，我们设计的接口只是提供一个滚动百分比的参数，这个参数的值可以从 0 ~ 1.

run(per/*滚动百分比*/,dir/*滚动方向*/) // 滚动方向不一定用得上，暂且留着。

我们将这个run假定注册在原生的dom元素上面，再加一个run的className来识别，那么相关代码就会如下：

$.on(holder, "touchstart", function(e){
        var touch = e.touches[0];
            startTy = curTy = touch.clientY;
}).on(holder, "touchmove", function(e){
        var touch = e.changedTouches[0],
                endTy = touch.clientY;
        run( curTy - endTy, e);
        curTy = endTy;
});
    function run(dir, e){
        e.stopPropagation();
        e.preventDefault();
        var _this = sections[current_index];
        var st = _this.scrollTop,
            ch = _this.clientHeight,
            sh = _this.scrollHeight;
        scrollTy = st;
        st = _this.scrollTop = _this.scrollTop + dir;
        
        // 这里还有判断跳切换页面的逻辑
        
        $(".run", _this).forEach(function(r){  // 对当前section中的所有.run循环，判断是否存在run方法
            if( typeof r.run === "function" ){
                var per = _this.scrollTop == (sh-ch) ? 1 : _this.scrollTop / (sh-ch);
                r.run(per, dir);  // 存在这个方法就执行它， 把per带上。 per计算来自于当前滚动高度÷最大滚动高度
            }
        });
    }

完事儿，我们需要达到的效果其实就是酱紫的：

document.getElementById('logo').run = function(per, dir){
            var W = document.documentElement.clientWidth;
            this.style.cssText =
                "-webkit-transform: translate3d("+( (140+W) * per |0)+"px, "+(this.parentNode.scrollTop|0)+"px, 0); "
                +"transform: translate3d("+((140+W) * per |0)+"px, "+(this.parentNode.scrollTop|0)+"px, 0);";
        };

绑定一个run，就能按照规则执行滚动动画咯。

demo： http://cardistry.cn/hero/demo.html

建议用手机查看，或者使用chrome的移动端调试控制台。

查看源代码的时候你会发现如下代码：

.set = function(set,w,h,W,H){
                set.begin({x:0,y:0,rotate: 0, scale:1}).then({
                    per: .3,
                    x: w-W,
                    y: 300,
                    rotate: 180,
                    scale: .5
                }).then({
                    per: .5,
                    x: -100,
                    y: 200,
                    opacity: 1,
                    rotate: 360,
                    scale: 1
                }).then({
                    per: .7,
                    x: -100,
                    y: 200,
                    opacity: 1,
                    rotate: 240,
                    scale: 1.5
                }).then({
                    per: .8,
                    x: -100,
                    y: 200,
                    opacity:.2,
                    rotate: 120,
                    scale: 1
                }).end({x:w-W,y:H-h,rotate:0, scale:1});
            };

看起来很高大上的样子， 写动画好像更加方便了。这个其实就是基于上面run的一个线性封装，具体实现

前文提到，在一版页面内部滚动时候我们使用一个run方法传入参数per执行，期望接口使用者方便调用。

然而事实上， 还有一些个通用的执行过程可以进行抽离，例如我们期望通过如下方式书写动画：

.set = function(set,w,h,W,H){
                set.begin({x:0,y:0,rotate: 0, scale:1}).then({
                    per: .3,
                    x: w-W,
                    y: 300,
                    rotate: 180,
                    scale: .5
                }).then({
                    per: .5,
                    x: -100,
                    y: 200,
                    opacity: 1,
                    rotate: 360,
                    scale: 1
                }).then({
                    per: .7,
                    x: -100,
                    y: 200,
                    opacity: 1,
                    rotate: 240,
                    scale: 1.5
                }).then({
                    per: .8,
                    x: -100,
                    y: 200,
                    opacity:.2,
                    rotate: 120,
                    scale: 1
                }).end({x:w-W,y:H-h,rotate:0, scale:1});
            };

看起来像CSS3-animation实现过程呶。  建立在run方法已经可以被检测执行的基础上，我们可以想办法把这些数据构建一个run方法来：

1. 处理过程存储和参数部分：

var trace = [],
                        set = {
                            begin: function(d){d.per = d.per || 0;trace.push(d);return this;},
                            end: function(d){d.per = d.per || 1;trace.push(d);return this;},
                            then: function(d){trace.push(d);return this;}
                        },
                        w = r.offsetWidth,
                        h = r.offsetHeight,
                        W = document.documentElement.clientWidth,
                        H = document.documentElement.clientHeight;

2. 执行dom的set方法，将过程存储到trace数组中：

r.set(set,w,h,W,H);

3. 封装成为run方法（过程中依次循环数组，当属于某区间时候计算区间内属性的线性变换并且赋值）支持的属性有限，位置变换移动端不能使用left、top：

r.run = function(per, dir){
                        for (var i = 1; i < trace.length; i++) {
                            if( trace[i-1].per <= per && trace[i].per >= per ){
                                var prev = trace[i-1],
                                    next = trace[i],
                                    rate = (per - prev.per) / (next.per - prev.per),
                                    _x = (prev.x+(next.x-prev.x)*rate) || 0,
                                    _y = (prev.y+(next.y-prev.y)*rate) + sections[current_index].scrollTop || 0,
                                    _o = (prev.opacity+(next.opacity-prev.opacity)*rate),
                                    _s = (prev.scale+(next.scale-prev.scale)*rate),
                                    _r = (prev.rotate+(next.rotate-prev.rotate)*rate),
                                    _s = isNaN(_s) ? 1 : _s;
                                    _r = isNaN(_r) ? 0 : _r;
                                var cssText =
                                    "-webkit-transform: scale("+_s+") translate3d("+_x+"px, "+_y+"px, 0) rotate("+_r+"deg);"
                                    +"transform: scale("+_s+") translate3d("+_x+"px, "+_y+"px, 0) rotate("+_r+"deg);"
                                    + ( isNaN(_o) ? "" : ("opacity: " + _o+ ";") );
                                this.style.cssText = cssText;
                                return ;
                            }
                        };
                    };