现在位置首页 / 项目实战 /正文

微信H5页面框架设计 h5_slide.js (三)

作者: 释梵 | 2015年7月14日| 热度:℃ | 评论: |参与:

前接上文: 微信H5页面框架设计 h5_slide.js (二)


    前文提到,在一版页面内部滚动时候我们使用一个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 ;
                            }
                        };
                    };



妥了。 demo地址再贴一遍:  http://cardistry.cn/hero/demo.html


git在这儿: https://github.com/OutsourcingTeam/hero/blob/master/js/slide.js


主题功能基本完成,后续介绍一下模拟的按钮穿透实现以及 图片预加载等功能。

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询