微信H5页面框架设计 h5_slide.js （二）

前接上文 ： 微信H5页面框架设计 h5_slide.js （一）

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

考虑到单页面内滚动高度可能随着不同屏幕分辨率有所不同，我们设计的接口只是提供一个滚动百分比的参数，这个参数的值可以从 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的一个线性封装，具体实现，敬请期待 微信H5页面框架设计 h5_slide.js （三）。