說說動畫卡頓的解決方案

時間 2019-11-09

標籤說說動畫解決方案简体版

原文原文鏈接

CSS3 動畫卡頓解決方案

前端時間用animation實現H5頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留700ms後再縮小至頂部。代碼以下javascript

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=1" >
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <title>首頁加載動畫</title>
    <head>
        <style>
            .welcome-main{
                display: none;
                padding-bottom: 40px;
            }
            .top-info{
                width: 100%;
                position: absolute;
                left: 0;
                top: 93px;
            }
            .wec-img{
                width: 175px;
                height: 175px;
                position: relative;
                padding: 23px;
                box-sizing: border-box;
                margin: 0 auto;
            }
            .wec-img:before{
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: url("./images/kf-welcome-loading.png");
                background-size: 100%;
            }
            .wec-img .img-con{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                /*box-sizing: border-box;*/
                background: url("./images/kf_1.jpg");
                background-size: 100%;
                padding: 1px;
            }
            .wec-img .img-con img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
            .loaded .wec-img{
                -webkit-transform-origin: center top;
            }               
            .loading.welcome-main{
                display: block;
            }
            .loading .wec-img{
                -webkit-animation:fadeIn .3s  ease both;
            }
            .loading .wec-img:before{
                -webkit-animation:rotate .6s .2s linear both;
            }
            .loaded .top-info{
                -webkit-animation:mainpadding 1s 0s ease both;
            }
            .loaded .wec-img{
                -webkit-animation:imgSmall 1s 0s ease both;
            }
            @-webkit-keyframes mainpadding{
                0%{
                    -webkit-transform:translateY(0)
                }
                100%{
                    -webkit-transform:translateY(-87px)
                }
            }
            @-webkit-keyframes imgSmall{
                0%{
                    width: 175px;
                    height: 175px;
                    padding: 23px;
            
                }
                100%{
                    width: 60px;
                    height: 60px;
                    padding: 0;
            
                }
            }
            @-webkit-keyframes fadeIn{
                0%{opacity:0;-webkit-transform:scale(.3)}
                100%{opacity:1;-webkit-transform:scale(1)}
            }
            @-webkit-keyframes rotate{
                0%{opacity:0;-webkit-transform:rotate(0deg);}
                50%{opacity:1;-webkit-transform:rotate(180deg);}
                100%{opacity:0;-webkit-transform:rotate(360deg);}
            }
          </style>
        <body>
            <div class="welcome-main">
                <div class="top-info">
                    <div class="wec-img"><p class="img-con"><img src="" alt=""></p></div>
                </div>
            </div>
            <script>
                $('.welcome-main').addClass('loading');
                setTimeout(function(){
                    $('.hi.fst').removeClass('loading');
                    $('.welcome-main').addClass('loaded');
                },700);
            
            </script>
        </body>
    </html>

在chrome上測試ok，但在提測給QA的時候發現部分機型，如華爲，系統4.2，oppo系統5.1的出現卡頓狀況。html

百思不得其解，後來參考文章深刻瀏覽器理解CSS animations 和 transitions的性能問題一文，將圖片縮放中動畫元素改爲transform，以下前端

@-webkit-keyframes imgSmall{
    0%{
        -webkit-transform:scale(1);
    }
    100%{
        -webkit-transform:scale(.465);
    }
  }

果真啊，卡頓問題解決了。java

文章深刻瀏覽器理解CSS animations 和 transitions的性能問題是這麼解釋的，現代的瀏覽器一般會有兩個重要的執行線程，這2個線程協同工做來渲染一個網頁：主線程和合成線程。jquery

通常狀況下，主線程負責：運行JavaScript；計算HTML 元素的 CSS 樣式；頁面的佈局；將元素繪製到一個或多個位圖中；將這些位圖交給合成線程。web

相應地，合成線程負責：經過 GPU將位圖繪製到屏幕上；通知主線程更新頁面中可見或即將變成可見的部分的位圖；計算出頁面中哪部分是可見的；計算出當你在滾動頁面時哪部分是即將變成可見的；當你滾動頁面時將相應位置的元素移動到可視區域。chrome

假設咱們要一個元素的height從 100 px 變成 200 px，就像這樣：瀏覽器

div {
    height: 100px;
    transition: height 1s linear;
}

div:hover {
    height: 200px;
}

主線程和合成線程將按照下面的流程圖執行相應的操做。注意在橘黃色方框的操做可能會比較耗時，在藍色框中的操做是比較快速的。app

而使用transform:scale實現佈局

div {
    transform: scale(0.5);
    transition: transform 1s linear;
}

div:hover {
    transform: scale(1.0);
}

此時流程以下：

也就是說，使用transform,瀏覽器只須要一次生成這個元素的位圖，並在動畫開始的時候將它提交給GPU去處理。以後，瀏覽器不須要再作任何佈局、繪製以及提交位圖的操做。從而，瀏覽器能夠充分利用 GPU 的特長去快速地將位圖繪製在不一樣的位置、執行旋轉或縮放處理。

爲了從數量級上去證明這個理論，我打開chrome的Timeline查看頁面FPS

其中，當用height作動畫元素時，在切換過程的FPS只有44，咱們知道每秒60幀是最適合人眼的交互，小於60，人眼能明顯感受到，這就是爲何卡頓的緣由。

rendering和painting所花的時間以下：

再來看看用transform:scale

FPS達到66，且rendering和painting時間減小了3倍。

到此爲止問題是解決了，隔了幾天，看到一篇解決Chrome動畫」卡頓」的辦法，發現還能經過開啓硬件加速的方式優化動畫，因而又試了一遍。

webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

驚人的事情發生了，FPS達到72：