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

動感影集怎么做,動感影集怎么分享

九宜嘉2019-11-24 09:21:06 人圍觀
簡介扣扣怎么做動感影集動態相冊是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/14136.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • win10回收站清空了怎么恢復,回收站清空了能恢復嗎

    win10回收站清空了怎么恢復,回收站清空了能恢復嗎 相關圖片win7如何找回刪除文件最近,很多win7用戶向超人軟件編輯反映,他們錯誤地刪除了回收站中的軟件。那么,當win7回收站為空時,如何恢復呢?現在,超人軟件將介紹win7回收站文件的恢復...

  • 動態網頁制作技術哪些,動態網頁教程

    動態網頁制作技術哪些,動態網頁教程 相關圖片php制作動態網頁SWF動畫文件中的圖像、聲音、文本和動畫都固化在其中,如何實現動態數據在SWF文件中的顯示,這是一個新的問題?可以使用flash中的Fscommand。下面是如asp動態網頁設計教...

  • 守護世紀,世紀守護登錄

    守護世紀,世紀守護登錄 相關圖片守護者世紀戰元免費世紀衛報是一個很好的教育軟件。在這個軟件中,用戶不僅可以了解孩子在學校的情況,還可以查詢他們的學習成績。如何質疑世紀衛報的表現?現在,超人軟件編...

  • 實例卡,實例

    實例卡,實例 相關圖片實例文本使用CSS3 HSL聲明也用于設置顏色。下一個?HSLA?是的,這與RGBA H s L聲明相同,它使用色調(H)、飽和度(s)和亮度(L)來設置從顏色盤派生的什么是示例圖...

  • win7頻繁出現默認網關不可用,win7默認網關不可用怎么修復

    win7頻繁出現默認網關不可用,win7默認網關不可用怎么修復 相關圖片默認網關為空 上不了網我相信許多win7用戶都遇到了默認網關不可用的情況。那么,如果win7默認網關不可用呢?現在,超人軟件編輯器將介紹如何在這種情況下設置win7默認網關。讓我們...

  • icloud云儲存空間不可用,icloud云空間不可用怎么回事

    icloud云儲存空間不可用,icloud云空間不可用怎么回事 相關圖片蘋果6云存儲空間不可用Icloud是蘋果公司2011年推出的云存儲服務,用戶可以免費存儲5GB數據。由于iPhone的不可擴展內存,這種額外的云存儲非常實用。但我的一些朋友icloud云端信息不可用...

  • 路由器mtu值在哪設置,怎么設置路由器的mtu值

    路由器mtu值在哪設置,怎么設置路由器的mtu值 相關圖片路由器的mtu值MTU指的是可以通過通信協議的某一層傳遞的最大分組大小。在windows中,默認的MTU是1500,但是不同的網絡接入方式、不同地區的網絡運營商,甚至不同的路由光纖接入路由器...

  • vertical-align,verticalalign怎么用

    vertical-align,verticalalign怎么用 相關圖片chialign把input和img放在同一行,img標簽總是比input高一個頭,這很難看。我以前嘗試過很多方法,但我做不到。后來,我在網站上發現最多的方法是在img中添加atext align...

  • 定投怎么取出來,定投什么時候可以取

    定投怎么取出來,定投什么時候可以取 相關圖片定投可以隨時取出來嗎近日,支付寶推出了一款名為輕定投資的理財產品,只要用戶每天投資10元即可獲得獎勵。然而,許多歐洲合作伙伴發現,他們不知道如何拿回這筆錢。那我怎么才...

  • 守護世紀,世紀守護登錄

    守護世紀,世紀守護登錄 相關圖片守護者世紀戰元免費世紀衛士是一款致力于幫助孩子健康成長的教育軟件。在這個軟件中,用戶不僅可以和父母一起了解孩子的最新情況,還可以學習到最全面的教育信息。如何使用世...

熱評文章

  • 小紅書的東西靠譜嗎,海豚家app的東西真嗎

    小紅書的東西靠譜嗎,海豚家app的東西真嗎 相關圖片團粉秀買的東西是正品嗎蕭紅樹,作為一種海外購物的購物軟件,我相信所有小朋友最關心的話題是蕭紅樹的東西是真實的。然后,超人軟件編輯會為你分析假冒的iPhone版小紅皮書。如...

  • html style屬性,html5中style屬性

    html style屬性,html5中style屬性 相關圖片html5cssstyle在所需連接中添加內聯樣式:代碼如下:a href=ddrb/090630。Asptarget=﹐blank style=文本裝飾:下劃線;30/Ahtml中style什么意思...

  • 做一個oa系統多少錢,金蝶oa系統價格

    做一個oa系統多少錢,金蝶oa系統價格 相關圖片oa系統服務器一般多少錢最近,很多小伙伴都報告說,他們一直在處理OA系統,但他們不知道OA系統是什么,以及它的總體成本是多少。然后,超人軟件編輯會為你一一作答。我希望它能...

  • 預覽模式,怎么退出預覽模式

    預覽模式,怎么退出預覽模式 相關圖片取消預覽我相信很多合作伙伴已經升級了win10系統的預覽版10586。其中,許多合作伙伴報告說,右下角將有另一種測試模式。如何關閉win10系統預覽的10586測試模式無痕模式開啟百度...

  • IE瀏覽器圖標,啥是ie瀏覽器圖標

    IE瀏覽器圖標,啥是ie瀏覽器圖標 相關圖片360瀏覽器圖標本教程向您展示了如何使用焰火繪制IE瀏覽器圖標的過程,制作方法不是很難,本教程非常詳細,推薦給朋友們學習,希望對您有所幫助!1.創建一個新的畫布,選擇橢圓工...

  • office2010綠色破解版,破解版office2010下載

    office2010綠色破解版,破解版office2010下載 相關圖片office2016完整破解版Office 2010是Office于2009年發布的第12個Office軟件版本。由于其操作簡單,功能強大,深受廣大用戶的歡迎。但如果你沒有office 20office2010破解版網盤...

  • 美團外賣會員有什么用,美團外賣怎么辦會員

    美團外賣會員有什么用,美團外賣怎么辦會員 相關圖片美團會員如今,越來越多的人喜歡在家里點外賣,省去了做飯的麻煩。其中,美團外賣是一款非常實用的外賣軟件。美團外賣的會員卡呢?現在,超人軟件編輯將介紹美團外賣安卓會員...

  • 基礎語法,英語基礎語法入門

    基礎語法,英語基礎語法入門 相關圖片語法怎么學在HTML文本中,尖括號括起的部分稱為標記。標記通常有一個開始標記和一個結束標記,它們一起定義標記的內容。屬性只能在開始標記中指定,屬性值可以用單引號或雙引號...

  • 發現精彩打不開怎么辦,發現精彩打不開

    發現精彩打不開怎么辦,發現精彩打不開 相關圖片發現精彩無法啟動輸入法Find wonderful是一款非常實用的辦公理財軟件。在這個軟件中,用戶可以隨時隨地管理自己的信用卡狀況。那么,發現亮點無法打開的情況是什么呢?現在,超人軟...

  • 緩動,緩動器

    緩動,緩動器 相關圖片緩動效果Flash AS3是一個制作GIF動畫的簡單過程,對美女圖像的慢動作特效。本教程主要適合初學者。我希望大家可以先看看相關的文章:flashas3是一個簡單的將圖緩動算法...

關注微信

变脸官网查询