let myChart = this.$echarts.init(document.getElementById('plant-charts'));
            

        

    

    


        


            


            

        

        


            

                // 繪制圖表
            

        

    

    


        


            


            

        

        


            

                myChart.setOption({
            

        

    

    


        


            


            

        

        


            

                tooltip: {
            

        

    

    


        


            


            

        

        


            

                formatter: '{c}' //設(shè)置單位
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                //圖例樣式
            

        

    

    


        


            


            

        

        


            

                legend: {
            

        

    

    


        


            


            

        

        


            

                data: ['寬帶情況', '數(shù)據(jù)量'],
            

        

    

    


        


            


            

        

        


            

                textStyle: {//圖例文字的樣式
            

        

    

    


        


            


            

        

        


            

                color: '#fff',
            

        

    

    


        


            


            

        

        


            

                fontSize: 12,
            

        

    

    


        


            


            

        

        


            

                padding: [0, 20, 0, 0]
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                grid: { //設(shè)置圖標(biāo)距離父級(jí)div的間距
            

        

    

    


        


            


            

        

        


            

                top: "10",
            

        

    

    


        


            


            

        

        


            

                left: "0",
            

        

    

    


        


            


            

        

        


            

                right: "15",
            

        

    

    


        


            


            

        

        


            

                bottom: "10",
            

        

    

    


        


            


            

        

        


            

                containLabel: true
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                xAxis: {
            

        

    

    


        


            


            

        

        


            

                type: 'category',
            

        

    

    


        


            


            

        

        


            

                boundaryGap: false,
            

        

    

    


        


            


            

        

        


            

                data: ['2015','2016','2017','2018','2019','2020','2021'],
            

        

    

    


        


            


            

        

        


            

                axisLabel: {
            

        

    

    


        


            


            

        

        


            

                interval: '0', //類目軸(category)中用數(shù)值表示顯示間隔，0為顯示所有，1為隔一個(gè)顯示一個(gè)，以此類推
            

        

    

    


        


            


            

        

        


            

                textStyle: { //文字樣式
            

        

    

    


        


            


            

        

        


            

                color: '#62799C',
            

        

    

    


        


            


            

        

        


            

                fontSize: '12'
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                axisTick: { //y軸刻度線不顯示
            

        

    

    


        


            


            

        

        


            

                show: false
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                yAxis: {
            

        

    

    


        


            


            

        

        


            

                type: 'value',
            

        

    

    


        


            


            

        

        


            

                //show: false,
            

        

    

    


        


            


            

        

        


            

                axisLabel: {
            

        

    

    


        


            


            

        

        


            

                textStyle: { //文字樣式
            

        

    

    


        


            


            

        

        


            

                color: '#62799C',
            

        

    

    


        


            


            

        

        


            

                fontSize: '12'
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                // 控制網(wǎng)格線
            

        

    

    


        


            


            

        

        


            

                splitLine: {
            

        

    

    


        


            


            

        

        


            

                //  改變軸線顏色
            

        

    

    


        


            


            

        

        


            

                lineStyle: {
            

        

    

    


        


            


            

        

        


            

                color: '#2a2a2d'
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                axisTick: { //y軸刻度線
            

        

    

    


        


            


            

        

        


            

                show: false
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                series: [{
            

        

    

    


        


            


            

        

        


            

                data: [5000,6000,7000,4400,3200,4500,6800],
            

        

    

    


        


            


            

        

        


            

                type: 'line',
            

        

    

    


        


            


            

        

        


            

                itemStyle: {
            

        

    

    


        


            


            

        

        


            

                normal: {
            

        

    

    


        


            


            

        

        


            

                color: 'rgba(62,139,222,1)'//線顏色
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                areaStyle: {
            

        

    

    


        


            


            

        

        


            

                normal: {
            

        

    

    


        


            


            

        

        


            

                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //折線圖顏色漸變
            

        

    

    


        


            


            

        

        


            

                offset: 0,
            

        

    

    


        


            


            

        

        


            

                color: 'rgba(62,139,222,0.6)'
            

        

    

    


        


            


            

        

        


            

                }, {
            

        

    

    


        


            


            

        

        


            

                offset: 1,
            

        

    

    


        


            


            

        

        


            

                color: 'rgba(62,139,222,0.01)'
            

        

    

    


        


            


            

        

        


            

                }])
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }]
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


        

    

//圖例
    legend: {undefined
        icon: "circle",
        //icon形狀  類型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none,
        itemWidth: 10,  // 設(shè)置icon寬度
        itemHeight: 10, // 設(shè)置icon高度
        itemGap: 40, // 設(shè)置間距
        // top: '5%',//豎直位置
        // left: 'center',//水平位置
        x: 50,//水平位置
        y: 200,//豎直位置
        orient: "vertical",//設(shè)置顯示順序，默認(rèn)水平（水平，豎直）
         textStyle: {undefined
            color: "#000"
         },//文本樣式
         // 使用回調(diào)函數(shù)（設(shè)置文本顯示內(nèi)容，例如 加百分號(hào)）
          formatter: function(name) {undefined
            var data = option.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0, l = data.length; i < l; i++) {undefined
              total += data[i].value;
              if (data[i].name == name) {undefined
                tarValue = data[i].value;
              }
            }
            var p = ((tarValue / total) * 100).toFixed(2);
            return name + " " + " " + p + "%";
          },
    },

在終端APP中，動(dòng)畫非常常見(jiàn)，它可以輔助視覺(jué)制造焦點(diǎn)，同時(shí)也可以讓用戶交互更加順滑，但動(dòng)畫的實(shí)現(xiàn)卻是設(shè)計(jì)師和研發(fā)群體的一個(gè)痛點(diǎn)。如何輔助設(shè)計(jì)師設(shè)計(jì)高性能炫酷的動(dòng)畫、如何將設(shè)計(jì)師設(shè)計(jì)的動(dòng)畫準(zhǔn)確無(wú)誤的還原到終端APP上是業(yè)界不斷探索和解決的問(wèn)題。

圖1 傳統(tǒng)動(dòng)畫實(shí)現(xiàn)流程圖

當(dāng)前最好的動(dòng)畫設(shè)計(jì)軟件是Adobe After Effects（簡(jiǎn)稱AE），從AE動(dòng)畫制作到終端APP呈現(xiàn)，傳統(tǒng)的實(shí)現(xiàn)方式如圖1所示，有三大痛點(diǎn)：實(shí)現(xiàn)成本高、溝通成本高和性能難以保證。

近幾年，業(yè)界誕生了像Lottie、SVGA這樣的動(dòng)畫工作流解決方案，雖然在一定程度上提升了生產(chǎn)效率，但存在AE支持能力有限、動(dòng)畫性能難以保證、配套工具支持有限的問(wèn)題。

1 ：PAG解決的問(wèn)題

——————————

PAG（Portable Animated Graphics）是騰訊PCG發(fā)布器中臺(tái)自主研發(fā)的一套完整的動(dòng)畫工作流解決方案，助力于將AE動(dòng)畫方便快捷的應(yīng)用于各平臺(tái)終端。PAG的流程圖如圖2所示，設(shè)計(jì)師在AE上設(shè)計(jì)出動(dòng)畫后，可以通過(guò)導(dǎo)出插件導(dǎo)出pag文件，同時(shí)PAG提供了桌面端預(yù)覽工具，支持實(shí)時(shí)預(yù)覽效果，在確認(rèn)效果后，通過(guò)運(yùn)行配置上線，各平臺(tái)終端可以通過(guò)PAG SDK加載渲染pag動(dòng)畫。

圖2 PAG動(dòng)畫工作流流程圖

與Lottie、SVGA相比，PAG增加支持了服務(wù)端。除此之外，如圖3所示，PAG動(dòng)畫方案在導(dǎo)出動(dòng)畫文件大小、AE特性支持和可編輯性方面具有較大的優(yōu)勢(shì)。

圖3 PAG和Lottie對(duì)比圖

2: PAG支持的AE特性能力

——————————

2.1 矢量特性能力的支持

和Lottie、SVGA實(shí)現(xiàn)不同的是，PAG不依賴平臺(tái)端渲染接口，可以實(shí)現(xiàn)各平臺(tái)的渲染一致性。PAG與Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。

2.2 BMP預(yù)合成--全AE特性支持

無(wú)論是PAG還是Lottie、SVGA，所支持的AE特性僅僅是AE眾多特性中的很少的一部分，這在一定程度上限制了設(shè)計(jì)師的創(chuàng)造力。針對(duì)這個(gè)問(wèn)題，PAG新增了BMP預(yù)合成的導(dǎo)出方式，支持導(dǎo)出所有AE特性，適用于不可編輯的場(chǎng)景。其原理如圖4所示，在合成的層面將渲染結(jié)果截取成圖片，然后進(jìn)行視頻編碼。

圖 4 BMP預(yù)合成原理圖

針對(duì)視頻不支持透明通道而動(dòng)畫需要包含透明通道的問(wèn)題，在編碼的層面擴(kuò)展了透明通道的支持，如圖5所示。

圖6 PAG矢量和BMP預(yù)合成混合導(dǎo)出

3: PAG導(dǎo)出插件

——————————

3.1 不支持AE特性提示

針對(duì)導(dǎo)出動(dòng)畫和AE設(shè)計(jì)動(dòng)畫存在偏差的問(wèn)題，PAG導(dǎo)出插件增加了使用了不支持AE特性提醒功能，如下圖7所示。

圖7 PAG導(dǎo)出面板

在預(yù)覽界面，同樣有不支持特性的提示，如圖8所示。

圖8 PAG導(dǎo)出面板預(yù)覽窗口

在使用AE設(shè)計(jì)動(dòng)畫的過(guò)程中，設(shè)計(jì)師可以方便快捷的提前查看使用了那些不支持直接導(dǎo)出的AE特性，換種實(shí)現(xiàn)方式或者導(dǎo)出成BMP預(yù)合成，有效的解決了設(shè)計(jì)動(dòng)畫和導(dǎo)出動(dòng)畫存在偏差的問(wèn)題。

3.2 BMP預(yù)合成一鍵設(shè)置

在AE動(dòng)畫設(shè)計(jì)的過(guò)程中，PAG導(dǎo)出面板提供了一鍵設(shè)置BMP預(yù)合成的方法，如下圖9所示。需要提示的是，一旦設(shè)置了BMP預(yù)合成，該合成中的文本和圖片將不能再被用戶編輯。

圖9 BMP 預(yù)合成設(shè)置

由于BMP預(yù)合成可能會(huì)影響到可替換圖片的數(shù)量，PAG同時(shí)會(huì)實(shí)時(shí)更新可替換圖片的數(shù)量給設(shè)計(jì)以提示。

3.3 圖片填充模式設(shè)置

在用pag設(shè)置的素材中，經(jīng)常會(huì)遇到用戶填充的圖片與默認(rèn)占位圖尺寸不一致的情況，在導(dǎo)出面板中PAG增加圖片填充的四個(gè)規(guī)則，如圖10所示：

圖10 可替換圖片填充設(shè)置

其中：

不縮放：畫面不縮放，從左上角位置開(kāi)始裁剪

黑邊：在保持高寬比的情況下縮放到設(shè)備的可用屏幕大小，圖像不發(fā)生變形，如果圖片尺寸和填充區(qū)域比例不一致，會(huì)出現(xiàn)黑邊，為默認(rèn)填充模式

拉伸：不保持寬高比填充，會(huì)發(fā)生失變形

裁剪：在保持高寬比的情況下縮放到完全填滿可用的屏幕大小

具體效果如圖11所示。

圖11 圖片填充效果圖

4桌面預(yù)覽工具PAGViewer

——————————

4.1 效果預(yù)覽

PAGViewer支持桌面端預(yù)覽PAG文件動(dòng)畫效果，如下圖所示。支持查看動(dòng)畫文件中包含有多少個(gè)可編輯文本和可編輯圖片，且支持設(shè)計(jì)師本地填充素材，實(shí)時(shí)預(yù)覽填充效果，無(wú)需等待上線后才能確認(rèn)真實(shí)效果。圖片占位圖支持填充圖片或視頻，如果PAG文件內(nèi)置了音頻文件，支持播放音頻效果。具體效果如圖12所示。

圖12 PAG效果預(yù)覽

4.2 性能檢測(cè)

在pag動(dòng)畫實(shí)際使用的過(guò)程中，PAG經(jīng)常遇到的問(wèn)題是設(shè)計(jì)師辛辛苦苦設(shè)計(jì)的動(dòng)畫在終端上性能表現(xiàn)不佳，需要進(jìn)行返工優(yōu)化，同樣的問(wèn)題在使用Lottie方案時(shí)候也會(huì)存在。

除了效果預(yù)覽，PAGViewer還增加了性能展示面板，可以很方便的看到pag動(dòng)畫的基本信息，如時(shí)長(zhǎng)、幀率、尺寸、bmp預(yù)合成的數(shù)量，圖層總數(shù)等，還有量化的性能指標(biāo)，定量的評(píng)估pag文件的性能，如圖13所示，方便設(shè)計(jì)師進(jìn)行針對(duì)性的優(yōu)化，而不需要等到上線前才會(huì)暴露性能問(wèn)題。具體效果如圖13所示。

圖13 PAG性能展示面板

5: PAG的應(yīng)用場(chǎng)景

目前PAG方案已經(jīng)廣泛應(yīng)用于騰訊公司內(nèi)外幾十款產(chǎn)品中，涵蓋了眾多的國(guó)民級(jí)應(yīng)用。

總結(jié)下來(lái)，PAG目前主要使用在以下幾大場(chǎng)景：

5.1 UI動(dòng)畫

圖15 UI動(dòng)畫場(chǎng)景

設(shè)計(jì)師設(shè)計(jì)出動(dòng)畫文件后，研發(fā)只需要替換預(yù)設(shè)的文本內(nèi)容即可，并且文件體積非常小。

5.2 貼紙動(dòng)畫

圖16 貼紙動(dòng)畫場(chǎng)景

5.3 照片/視頻模板

圖17 照片/視頻模板場(chǎng)景

PAG支持將內(nèi)置的圖片作為占位圖替換，并保留所有動(dòng)畫效果。因此可以將整個(gè)PAG動(dòng)畫設(shè)計(jì)成一個(gè)模板，把預(yù)設(shè)的占位圖替換成用戶選取的照片，自動(dòng)套用效果生成視頻。全程可以讓設(shè)計(jì)師自由批量生產(chǎn)模板，無(wú)需研發(fā)介入。

仍然基于圖片替換原理，PAG也支持將占位圖替換為視頻，實(shí)現(xiàn)視頻模板功能。

5.4 智能剪輯

圖18 智能剪輯場(chǎng)景

智能剪輯是圍繞用戶上傳的視頻內(nèi)容，生成定制化的模板，模板本身是不固定的，可以從多個(gè)PAG文件組合而成，類似活字印刷。設(shè)計(jì)師可以利用這個(gè)特性，構(gòu)建自己的特效組件庫(kù)，然后對(duì)接AI的識(shí)別能力，根據(jù)一定規(guī)則組合得到無(wú)限數(shù)量的模板效果，可以做到一鍵出片。這塊目前的典型應(yīng)用場(chǎng)景是王者榮耀的周戰(zhàn)報(bào)功能，隨機(jī)生成游戲高光時(shí)刻視頻。

文章來(lái)源：站酷   作者：騰訊ISUX

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)