首页 > 代码库 > 开启gpu加速的高性能移动端相框组件！

开启gpu加速的高性能移动端相框组件！

2024-08-21 02:08:32   249人阅读

通过设置新的css3新属性translateX来代替传统的绝对定位改变left值的动画原理，新属性translateX会开启浏览器自带的gpu硬件加速动画性能，提高流畅度从而提高用户体验，

代码有很详细的注释，先上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--移动端相关声明-->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <!--允许苹果设备全屏显示-->
        <meta name="apple-touch-fullscreen" content="YES"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <title>滑动相框组件</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            body{background: #333;overflow: hidden;}
            #album{width: 100%;height: 100%;overflow: hidden;}
            #album ul,li{list-style: none;overflow: hidden;height: 100%;}
            /*用css3方式把li的内容居中显示，需要绝对定位的，在js中动态加入，js代码会说明*/
            #album li{display: -webkit-box;-webkit-box-pack: center;-webkit-box-align: center;}
        </style>
    </head>
    <body>
        <div id="album"></div>
    </body>
    <script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>
</html>

js代码部分

var list=[{
            height:950,
            width:800,
            src:"img/1.jpg"
        },
        {
            height: 1187,
            width: 900,
            src: "img/2.jpg"
        },
        {
            height: 766,
            width: 980,
            src: "img/3.jpg"
        },
        {
            height: 754,
            width: 980,
            src: "img/4.jpg"
        },
        {
            height: 493,
            src: "img/5.jpg",
            width: 750
        },
        {
            height: 500,
            src: "img/6.jpg",
            width: 750
        },
        {    
            height: 600,
            src: "img/7.jpg",
            width: 400
        }];

    function Silder(opts){
        this.wrap=opts.obj;
        this.list=opts.list;
        //构造三部曲
        this.init();
        this.renderDOM();
        this.bindDOM();
        
    }
    //初次化
    Silder.prototype.init=function(){
        //算出窗口长宽比
        this.radio=window.innerHeight/window.innerWidth;
        
        this.scaleW=window.innerWidth;
        //当前图片的索引值
        this.index=0;
        
    }
    //根据数据渲染页面的原型链
    Silder.prototype.renderDOM=function(){
        var wrap =this.wrap;
        var data=http://www.mamicode.com/this.list;
        var len=data.length;
        var scale=this.scaleW;
        
        this.Oul=document.createElement(‘ul‘);
        
        for(var i=0;i<len;i++){
            var li=document.createElement(‘li‘);
            var item=data[i];
            //设置li的相关参数
            li.style.width=scale+‘px‘;
            li.style.webkitTransform=‘translateX(‘+i*scale+‘px)‘;
            //如果item存在，do某事
            if(item){
                //如果图片的高宽比大于屏幕的高宽比，以高度来进行缩放
                if(item[‘height‘]/item[‘width‘]>this.radio){
                    li.innerHTML=‘<img height="‘+window.innerHeight+‘" src="http://www.mamicode.com/‘+item[‘src‘]+‘"/>‘;
                }else{
                    li.innerHTML=‘<img width="‘+scale+‘" src="http://www.mamicode.com/‘+item[‘src‘]+‘"/>‘;
                }
            }
            this.Oul.appendChild(li);
        }
        this.Oul.style.width=scale+‘px‘;
        wrap.style.height=window.innerHeight+‘px‘;
        wrap.appendChild(this.Oul);
    }
    //动画函数原型链
    Silder.prototype.go=function(num){
        var index=this.index;
        var lis=this.Oul.getElementsByTagName(‘li‘);
        var len=lis.length;
        var i;
        //把传入的转换位number类型
        i=index+num*1
        if(i>len-1){
            i=len-1
        }else if(i<0){
            i=0
        }
        //保留当前图片的索引值
        this.index=i;
        //加入过渡效果
        lis[i]&&(lis[i].style.webkitTransition=‘all 0.3s ease-out‘);
        lis[i-1]&&(lis[i-1].style.webkitTransition=‘all 0.3s ease-out‘);
        lis[i+1]&&(lis[i+1].style.webkitTransition=‘all 0.3s ease-out‘);
        
        //动态加入当前页，上一页，下一页绝对定位，过多绝对定位占用内存会过大，导致ios上浏览器闪退
        lis[i].style.position = ‘absolute‘;
        lis[i-1] && (lis[i-1].style.position = ‘absolute‘);
        lis[i+1] && (lis[i+1].style.position = ‘absolute‘);

        //当前页，上一页，下一页的动画切换
        lis[i]&&(lis[i].style.webkitTransform=‘translateX(0px)‘);        
        lis[i-1]&&(lis[i-1].style.webkitTransform=‘translateX(-‘+this.scaleW+‘px)‘);
        lis[i+1]&&(lis[i+1].style.webkitTransform=‘translateX(‘+this.scaleW+‘px)‘);
    }
    //事件绑定的原型链
    Silder.prototype.bindDOM=function(){
        var that=this;
        var scale=that.scaleW;
        var Oul=that.Oul;
        var len=that.list.length;
        //触摸屏幕函数
        var startHandler=function(event){
            //记录刚接触屏幕的时间
            that.startTime=new Date()*1;
            //记录刚接触屏幕的x坐标
            that.startX=event.touches[0].pageX;
            //清楚位移量
            that.offsetX=0;
        }
        //在触摸屏幕移动函数
        var moveHandler=function(event){
            event.preventDefault();
            that.offsetX=event.touches[0].pageX-that.startX;
            var lis=Oul.getElementsByTagName(‘li‘);
            //关键点，取得当前页，上一页，下一页的索引值
            var i=that.index-1;
            var n=i+3;
            //遍历选出当前页，上一页，下一页的索引来do 某事
            for(i; i<n; i++){
                //手指移动时候取消过渡效果
                lis[i]&&(lis[i].style.webkitTransition=‘none‘);
                //图片跟随手指移动
                lis[i]&&(lis[i].style.webkitTransform=‘translateX(‘+((i-that.index)*scale+that.offsetX)+‘px)‘);
            }

        }
        //触摸结束函数
        var endHandler=function(event){
            var boundary=scale/5;
            var endTime=new Date()*1;
            event.preventDefault();
            if(endTime-that.startTime>300){
                //用户慢滑动的情况
                if(that.offsetX>=boundary){
                    //调用切换到下一页函数
                    that.go(‘-1‘);
                }else if(that.offsetX<0&&that.offsetX<-boundary){
                    //调用切换上一页函数
                    that.go(‘1‘);
                }else{
                    //调用留在此页函数
                    that.go(‘0‘);
                }
            }else{
                //优化用户快速滑动的情况
                if(that.offsetX>50){
                    that.go(‘-1‘);
                }else if(that.offsetX<-50){
                    that.go(‘1‘);
                }else{
                    that.go(‘0‘);
                }
            }
        }
        //绑定事件
        Oul.addEventListener(‘touchstart‘,startHandler);
        Oul.addEventListener(‘touchmove‘,moveHandler);
        Oul.addEventListener(‘touchend‘,endHandler);
        
    }
    //传入数据调用
    new Silder({
        ‘obj‘:document.getElementById(‘album‘),
        ‘list‘:list
    })

最后说明一下开启gpu加速会导致设备耗电量增加

开启gpu加速的高性能移动端相框组件！


联系
我们