您現在的位置是:電腦技術吧?>? 故障問題 ??>??動感影,動感影集怎么做??>??正文詳情

動感影,動感影集怎么做

雷書蝶2019-11-24 11:31:03 人圍觀
簡介動感影集怎么公開動態相冊是QQ空間的一項新功能,可以方便地將靜態圖片轉換成動態視頻集,載體是HTML5(H5)頁面,這意味著可以在空間或朋友圈中共享,供朋友隨時欣賞。移動終端

動感影集是QQ空間新功能,可以將靜態的圖片輕松轉變為動態的視頻集,且載體是HTML5(簡稱H5)頁面,意味著可以隨時分享到空間或朋友圈給好友欣賞。

移動端區別于PC年代的相冊視頻,由于設備性能限制,每一個動畫細節都需要認真優化,今天就來說說動感影集開發過程中的動畫性能檢測與優化的問題。

  一、先利其器 Chrome TimelineRendering  性能分析前,我們先看看工具。

Chrome瀏覽器帶來的兩個工具是發現性能問題的利器,它們是Timeline和Rendering。

  Timeline  Timeline是一款基于錄制的工具,通過錄制在瀏覽器中的一系列操作,系統會記錄這個過程的所有細節數據,包括js計算、頁面重繪、復合層消耗等,同時還保存著這個過程每一幀的截圖。

  使用方法:  打開Chrome開發者工具,選擇Timeline。

點擊左上角小圓點錄制操作,然后在要檢測的頁面上做一系列交互操作,結束后再次點擊圓點停止,最后操作期間的一系列數據就會以圖表等的形式呈現在面板中。

  它有四種事件,對應四個顏色。

如下圖,網絡和DOM解析(藍色),JavaScript計算(黃色),樣式重計算和布局(紫色)以及繪畫和合成(綠色)事件。

  它有三個模式:幀模式、事件模式和內存模式。

  (1)幀模式  幀模式需要選中幀視圖(柱形圖按鈕)開啟。

該模式是檢查動畫性能最常用的模式。

  注意到,幀查看器有兩條分界線,分別是30fps和60fps。

  這需要我們重溫fps(每秒傳輸幀數)的概念:  若動畫表現fps大于60,則超越了人眼能反映的刷新頻率;  如果fps小于30,則卡頓明顯;  也就是說fps要保證接近60才能保證流暢。

點擊這里可以看到30fps和60fps的明顯區別。

回歸到幀模式柱狀圖,不難看出柱狀圖柱高越小表示動畫越流暢。

  同時通過點擊柱狀圖還可以看到CPU、內存的詳情,以及找到對應腳本和結點定位。

  基本用法:  點擊錄制-開始頁面動畫-結束錄制  通過查看柱狀圖記錄出哪些柱比較高(性能差)  點擊柱圖定位事件記錄,結合詳情數據找出性能卡頓的原因  (2)事件模式和內存模式  事件模式需要點擊事件按鈕開啟(如圖左側藍色),而內存模式是可以同時顯示在幀模式或事件模式中,只需要勾選Memory面板即可。

  事件模式是以事件為導向,觀察錄制間操作的事件經過,方便定位哪個操作占用的事件比較頻繁。

同時結合內存面板,可以看得出哪個事件消耗的內存最大,有沒有合理地進行垃圾回收(GC)。

  同時注意到這里勾選了Screenshots面板,這個面板記錄了過程間的屏幕截圖,更方便定位有性能問題的操作區間,發現問題所在。

  Rendering  Rendering處于開發者工具的隱藏面板中,打開Chrome開發者工具然后按ESC鍵打開。

  它有四個功能:  開啟繪制閃爍提示。

這功能會讓頁面在渲染的時候閃爍綠色,你可以借此增刪元素查看哪些元素是繪制消耗最大的。

(該功能替代了舊版的Show paint rectangles Enable continuous page repainting,Chrome46。

)

  顯示層塊邊框。

這功能會讓所有層塊元素展示黃色的邊框,可以方便定位元素的布局是否合理。

  顯示FPS計量器。

這功能會在頁面右上角展示一個FPS計量器,實時展示FPS數,可以方便地在做一系列操作的時候發現性能瓶頸卡在哪里。

  展示滾動表現。

這功能是使頁面滾動變得緩慢,對觸摸和滾動事件的監聽會使滾動延遲,可以通過這個功能查看滾動時期的瓶頸。

  二、洞察技巧 如何發現性能問題  上面說了性能分析的工具,下面應該說說檢測動畫性能問題的辦法。

動畫性能分析主要用到Timeline幀模式 Rendering的開啟繪制閃爍和顯示層級邊框功能。

  用法1:檢查卡頓情況  打開幀模式,點擊錄制按鈕,開始錄制頁面操作,之后結束錄制,查看柱狀圖。

發現低于60fps的柱形,點擊具體的幀率柱,查看記錄詳情,根據左邊的信息定位問題所在,如下圖:

  用法2:查看層級與多余布局塊  有時候感覺頁面卡,可能會是因為層塊多沒有處理好顯隱。

可以通過功能面板的paint選項卡開啟渲染截圖。

  該功能開啟后,再次錄制操作,結束后可以在詳細數據面板看到每一個柱形圖的即時渲染截圖,通過移動和查找可以看出哪些塊是不應該出現的,從而把它解決掉。

  用法3:查看多余或重復渲染的結點  勾選Rendering中的Enable paint flashing和Show layer borders。

直接操作頁面,可以看到操作期間是否會有意料之外的塊狀渲染(渲染的結點會呈現綠色框框),若有問題則刪除多余結點再次嘗試,逐漸定位出有問題的結點。

  以上三個功能可以幫助你發現很多性能的問題。

  三、江湖事跡 動感影集性能案例  說了那么多,現在就來分享三個開發過程中的簡單性能案例。

  1. 封尾擴散動畫  動感影集的封尾頁會用到一個通用的頁尾,動畫很簡單,是一個圈圈由中間向兩邊擴散。

實現也很快,馬上會想到border動畫,把border由0px-1000px,在PC看沒問題,于是就有了這個。

  但是,在小米2S看的時候就發現結束的時候十分卡,看了下前面的元素都是漸現動畫,不可能呀,于是用Timeline工具分析了一下。

  各種綠色!說明是painting(渲染)引起的性能問題,因此毫無疑問是動畫原因了。

同時我還看了下Paint面板:

  發現了一個十分大的層在繪制(綠色部分),發現是bg-border這個結點的問題。

于是我查看了該結點的動畫:

  會不會就是這個結點的border動畫引起的?那試試換一種寫法,我把border值固定,通過transform:scale來改變大小,實現了一樣的效果。

  再看看timeline?

  O.M.G!除了剛開始繪制的消耗外,其他時候已經不會產生太多嚴重消耗,總體FPS維持在60以上(十分流暢),而且層的大小也自然降了下來。

  結論: border動畫在低端機器可能會產生性能問題,看情況使用其他方式代替。

  2. 前景放大動畫  在邀請函模板里有一個前景由小變大的動畫,但是在安卓機上產生了嚴重的渲染異常,如下圖:

  在IOS機器上沒有重現,循例我查看了timeline。

發現上面也沒有異樣,性能還是能保持流暢。

那么問題出在哪里呢?

  我查看了這區域的代碼,這里是一個影集間的相片切換效果,其中上一個效果結束會加上一個.animate-b的類,作用了這個類將會有一個漸隱的動畫;與此同時新的頁只要加上.animate類就開始播放。

這是通過js控制兩個類來實現不同類型動畫的切換。

  那么問題是否出在這里呢?于是我把漸隱動畫去掉,播放完的頁面直接隱藏掉,不讓動畫播放,然后新動畫調整到直接播放不漸現的效果。

  最后發現,問題解決了!效果如圖:

  結論: 背后的動畫可能會影響當前動畫的播放,在安卓4.0系統都會產生渲染異常的問題,因此應該把不在當前播放的動畫停掉。

  3. 安卓逐幀渲染bug  更多的性能問題都不會產生嚴重的表現,最多是一點卡頓。

但是安卓4.0的渲染異常卻是常會出現,為此我再找一個例子。

以下是我做萬圣節活動的時候發現的一個問題,具體表現直接上圖:

  這是魅族比較好的一臺機器,但依然會產生逐幀渲染問題。

  根據之前的例子,我第一時間會想到是否別的動畫在影響?我看到這個動畫作用錢有一個手一直搖一搖的動畫,而且發現搖完后那個動畫在背后是循環播放(infinite)的,一直沒有結束。

  心想,只能是它了,于是我把它去掉:

  結果如我所想,頁面終于流暢了:

  總結: 在性能檢測的時候,有時候工具并不能幫到你,在找問題的時候也不要一味在當前頁面找,很有可能是背后的一些無關代碼在做著別的消耗性行為,因此在找不到問題的時候不妨從當前頁的上下游入手。

  四、熟能生巧 性能優化的經驗技巧  說了一些具體操作辦法,最后來說一下我在開發過程中積累的經驗。

  1. 以下屬性的更優解決方案  左側屬性都很有可能會帶來性能問題。

  2. 動畫坑點  兄弟元素間動畫互相影響  當前播放的動畫會因為其他結點動畫還沒結束而收到影響,安卓機器上會呈現逐幀渲染的表現。

  解決辦法:處可視區域播放的動畫外,將背后播放的動畫display:none或者animation-play-state:pause。

  z-index設置不當  兄弟元素在復合層中渲染,且z-index比主元素小,則主元素也會被加入到復合層渲染。

有篇文章就是說這個問題。

  解決辦法:給作用于動畫的兄弟元素設置合理z-index值。

  3. 巧妙使用css動畫  這是一些用CSS3來解決一般JS效果的做法。

  4. 是否都要GPU加速?

  最后,討論一下這個問題。

開啟GPU加速固然會讓頁面動畫更流暢,但是否表示所有元素都要開啟?肯定不是,會有以下幾個缺點:  盲目使用會讓無關元素都渲染成復合層。

  復合層渲染成位圖消耗內存,也會耗時。

  移動端手機會因此電量消耗更快。

  由此可見,如果使用GPU的元素很多,那么內存的消耗可能就遠遠大于動畫的消耗,這就有點本末倒置了。

因此,最好的辦法是處理好動畫層級,整合動畫層一并開啟GPU加速。

版權聲明:本文由 雷書蝶 整理編輯。

原標題:做動感影集為什么沒有音樂,照片動感影集

轉載注明出處:http://www.dn9ww09s.icu/fault/14165.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 臺式機連藍牙,臺式機怎么裝藍牙

    臺式機連藍牙,臺式機怎么裝藍牙 相關圖片臺式電腦藍牙在哪最近,很多小伙伴問小編如何設置win7藍牙。接下來,超人軟件為您介紹win7電腦藍牙設置。讓我們看看下面的步驟。你很快就能學會!一。首先,單擊計算機的右側臺式...

  • 派派怎么刪除直屬家族,新版派派怎么退出家族

    派派怎么刪除直屬家族,新版派派怎么退出家族 相關圖片派派會長怎么退出公會在排派,用戶可以加入一個家庭,與家人朋友聊天。你知道怎么離開家嗎?如何加入家庭?現在,超人軟件編輯將為您解答,希望能對您有所幫助。派派怎么退族...

  • 魔獸世界隨身,魔獸世界隨身集合石

    魔獸世界隨身,魔獸世界隨身集合石 相關圖片魔獸世界9.0魔獸世界是魔獸世界的一個特殊輔助工具,用戶可以通過它在手機上操作游戲。那么魔獸世界在進行什么呢?如何在旅途中玩魔獸世界?現在,讓我們用超人軟件來了解它魔...

  • XXLive,X-

    XXLive,X- 相關圖片x y代碼如下:meta http equiv=x-ua-compatiblecontent=ie=9;ie=8;ie=7;ie=edge/1。這是什么意思?2。有些e^x...

  • 什么是芝士,芝士

    什么是芝士,芝士 相關圖片奶酪和芝士的區別奶酪網是一個非常實用的網站。在這個網站上,用戶可以學到很多奶酪并進行測試。那么錯誤呢?奶酪網能收集錯誤嗎?接下來,超人軟件編輯將引入cheese net來檢查錯...

  • 什么是菜單欄,菜單欄在哪

    什么是菜單欄,菜單欄在哪 相關圖片如何顯示菜單欄核心提示:在使用Dreamweaver之前,讓我們先看看Dreamweaver中的菜單欄,然后再使用Dreamweaver,讓我們先看看Dreamweaver中菜單欄跑到上面去了...

  • win7綠屏,win7開機綠屏

    win7綠屏,win7開機綠屏 相關圖片win10出現綠屏相信很多小伙伴在使用win7時都有先例,比如使用win7播放視頻時,就出現了綠屏故障。視頻播放是在flash插件下播放的,視頻播放對flash版本和電腦配置有一win7電腦開機就綠...

  • 網上訂票取消訂單,網上訂票取消訂單三次

    網上訂票取消訂單,網上訂票取消訂單三次 相關圖片12306多次取消訂單12306年以來,廣大上班族在網上訂票十分方便。他們終于可以工作和訂票了。但有時我們需要取消網上預訂的訂單,因為一些事情或錯誤的訂單。我們該怎么辦?12306 取...

  • 模擬器,模擬器哪個好

    模擬器,模擬器哪個好 相關圖片天天模擬器這都是CSS3的基本用法,并不復雜。如果你感興趣,你可以試著寫一個。唯一復雜的是你可以看到瀏覽器標簽的模擬,chrome標簽的基本特征如下:梯形有圓角寬度,自適mumu模擬...

  • 天天動聽 停止服務,天天動聽停止服務原因

    天天動聽 停止服務,天天動聽停止服務原因 相關圖片天天動聽什么時候出的對許多人來說,每天停止這項服務是一個巨大的炸彈。對于許多喜歡每天停止服務的用戶來說,這一定是他們最想知道的。接下來,超人軟件將向您介紹如何停止...

熱評文章

  • 銀行卡信息驗證失敗,微信綁定銀行卡失敗

    銀行卡信息驗證失敗,微信綁定銀行卡失敗 相關圖片微信綁定銀行卡一直失敗視頻條是一個直播軟件。在這個軟件中,如果用戶想給自己喜歡的主機送禮,必須先綁定銀行卡進行充值。不過,最近不少小伙伴都反映綁定銀行卡失敗。為什...

  • 多邊形的講解,相似多邊形講解

    多邊形的講解,相似多邊形講解 相關圖片多邊形內角和視頻講解視頻本教程介紹如何使用焰火多邊形切片工具在導航欄重疊時產生效果。方法簡單實用。希望通過本教程能夠熟練掌握多邊形工具的使用方法,并對您有所幫助!...

  • 美圖秀秀彩虹,美圖秀秀彩虹在哪里

    美圖秀秀彩虹,美圖秀秀彩虹在哪里 相關圖片美圖秀秀里面的彩虹貼紙在哪彩虹魔筆是美圖秀推出的一項新功能,它可以為用戶的照片帶來許多有趣的PS播放方式。如何在美圖秀中使用彩虹魔筆?現在,超人軟件編輯還想介紹一下如...

  • 怎么制作網頁教程,怎么制作網頁

    怎么制作網頁教程,怎么制作網頁 相關圖片制作網頁步驟在制作網頁之前,我們應該首先了解網頁中需要哪些元素。今天的編輯將介紹網頁的元素網站的基本元素是網頁。每個網頁構成一個完整的網站。網頁也是可分離的。網頁...

  • 拼多多怎樣取消待拼團,拼多多賣家如何取消訂單

    拼多多怎樣取消待拼團,拼多多賣家如何取消訂單 相關圖片拼多多隨意取消訂單品多多是一款非常好的購物軟件。最近,許多小伙伴報告說,他們買了一些商品,但不想要。他們可以取消訂單。平度多如何取消訂單?接下來,超人軟件編輯將為...

  • 關閉迅雷9瀏覽器,怎么關閉迅雷9的瀏覽器

    關閉迅雷9瀏覽器,怎么關閉迅雷9的瀏覽器 相關圖片迅雷10關閉右側瀏覽器在迅雷的眾多版本中,除了迅雷7.9的早期版本外,最受歡迎的版本是迅雷9。迅雷9的特點是界面豐富,總能找到你需要的功能,但有些用戶覺得太臃腫了,尤其是右...

  • 17世紀對班級授課制,19世紀對班級組織的發展產生

    17世紀對班級授課制,19世紀對班級組織的發展產生 相關圖片小學每個班級有多少人世紀衛報是一個學習平臺,致力于為學生和學校之間提供一個橋梁。在這個軟件中,用戶可以通過加入班級來查看學校和班級的最新情況。世紀衛報怎么能加入這...

  • 氣泡,好看的氣泡

    氣泡,好看的氣泡 相關圖片免費氣泡Flash CS4在制作美麗泡泡動畫時,是考題,本文將flashcs4在制作美麗泡泡動畫教程中進行閱讀。請仔細閱讀以下內容!詳細代碼:function ballQQ絕版氣泡...

  • 桌面圖標不見了怎么辦,桌面不顯示圖標怎么辦

    桌面圖標不見了怎么辦,桌面不顯示圖標怎么辦 相關圖片手機桌面圖標最近,很多小伙伴報告說,他們的電腦被流氓圖標盯著看,不管怎樣都不能刪除。那么如何刪除win7廣告圖標呢?接下來,超人軟件編輯器將介紹如何刪除win7桌面廣告圖標顯...

  • 升級,qq等級怎么升級

    升級,qq等級怎么升級 相關圖片b站等級怎么升級視頻條是一個非常好的實時軟件。在這個軟件中,用戶可以得到更好的服務,如果他們升級他們的帳戶為皇冠或太陽。那么,直播如何才能晉級皇冠呢?接下來,超人軟...

關注微信

变脸官网查询