開啓gpu加速的高性能移動端相框組件！

時間 2019-12-13

標籤開啓 gpu 加速高性能移動端相組件欄目無線简体版

原文原文鏈接

經過設置新的css3新屬性translateX來代替傳統的絕對定位改變left值的動畫原理，新屬性translateX會開啓瀏覽器自帶的gpu硬件加速動畫性能，提升流暢度從而提升用戶體驗，javascript

代碼有很詳細的註釋，先上代碼css

<!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代碼部分html

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=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="'+item['src']+'"/>';
                }else{
                    li.innerHTML='<img width="'+scale+'" src="'+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
    })