css3動畫在手機端的流暢度比較

TwIStOy 發布于2019-08-30 12:58 / 2632人閱讀

摘要：我發現即使都是用的做動畫，有的屬性在動畫播放時卻會不流暢，出現定格動畫的效果，這里做個比較，方便我以后做動畫。流暢于流暢于其實這兩個沒法比，因為是直接縮放，會拉伸元素的，但如果用的是一個純色的，倒是可以用。

我發現即使都是用css3的transition做動畫，有的屬性在動畫播放時卻會不流暢，出現定格動畫的效果，這里做個比較，方便我以后做動畫。

transition支持的屬性類型

首先說一下transition支持的屬性類型（是類型哦，具體屬性還是自己去看這里），這個到處都有，我復制粘貼就行了。

color: 通過紅、綠、藍和透明度組件變換（每個數值處理）如：background-color,border-color,color,outline-color等css屬性；

length: 真實的數字如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等屬性；

percentage:真實的數字如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等屬性；

integer離散步驟（整個數字），在真實的數字空間，以及使用floor()轉換為整數時發生如：outline-offset,z-index等屬性；

number真實的（浮點型）數值，如：zoom,opacity,font-weight,等屬性；

transform list

rectangle:通過x, y, width 和 height（轉為數值）變換，如：crop

visibility: 離散步驟，在0到1數字范圍之內，0表示“隱藏”，1表示完全“顯示”,如：visibility

shadow: 作用于color, x, y 和 blur（模糊）屬性,如：text-shadow

gradient: 通過每次停止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數值以便執行動畫,如：background-image

paint server (SVG): 只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似

space-separated list of above:如果列表有相同的項目數值，則列表每一項按照上面的規則進行變化，否則無變化

a shorthand property: 如果縮寫的所有部分都可以實現動畫，則會像所有單個屬性變化一樣變化

具體什么css屬性可以實現transition效果，在W3C官網中列出了所有可以實現transition效果的CSS屬性值以及值的類型，大家可以點這里了解詳情。

引用自http://www.w3cplus.com/content/css3-transition

流暢度比較

(下面的比較中，左邊永遠比右邊流暢的，而且比較的雙方是它們都能做同一個效果，否則沒有對比的意義哦)
這個比較是我做好demo后用肉眼看出來的，而且在ios、pc、mac、android中看，流暢度會有不同，但暫時未發現下列列表中右側比左側流暢的情況。

transform:translate()流暢于padding、margin
transform:scale()流暢于width、height(其實這兩個沒法比，因為transform:scale()是直接縮放，會拉伸元素的，但如果用的是一個純色的div，倒是可以用。)

GPU云服務器云服務器流暢動畫流暢度 webrtc流暢度 css3動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115208.html

前端小記4——高性能mobile web開發

摘要：高性能動畫與端場景需要相比，移動端需要考慮的因素也相對復雜，重點考慮流量功耗與流暢度。而在移動端，我們選擇性能更優瀏覽器原生實現方案動畫。然而，動畫在移動多終端設備場景下，相比會面對更多的性能問題，主要體現在動畫的卡頓與閃爍。1.高性能CSS3動畫與PC端場景需要相比，移動web端需要考慮的因素也相對復雜，重點考慮：流量、功耗與流暢度。在pc端上考慮更多的是流暢度，而mobile web中...

番茄西紅柿 2019-04-23 13:31 評論0 收藏0
前端動畫調研-V1

摘要：支持動畫狀態的，在動畫開始，執行中，結束時提供回調函數支持動畫可以自定義貝塞爾曲線任何包含數值的屬性都可以設置動畫倉庫文檔演示功能介紹一定程度上，也是一個動畫庫，適用所有的屬性，并且實現的能更方便的實現幀動畫，替代復雜的定義方式。動畫調研-V1 前言：動畫從用途上可以分為兩種，一種是展示型的動畫，類似于一張GIF圖，或者一段視頻，另一種就是交互性的動畫。這兩種都有具體的應用場景，比如...

ddongjian0000 2019-08-23 11:00 評論0 收藏0
#yyds干貨盤點#——css移動端兼容

摘要：移動端的問題描述的邊框。產生原因首先先要了解一個概念設備像素比，它是默認縮放為的情況下，設備像素和邏輯像素的比值。解決方式在滾動容器上增加滾動方法微軟雅黑設置設置外部為設置內容元素為。內部元素超出即產生滾動，超出的部分隱藏。移動端的 1px問題描述：1px 的邊框。在高清屏下，移動端的 1px 會很粗。產生原因：首先先要...

lwx12525 2021-11-22 15:29 評論0 收藏0
前端遇到的那些技術難點

摘要：目前主流的屏幕或者。產生原因在中，手指按住屏幕上下拖動，會觸發事件。或者可以加入我的開發交流群相互學習，我們會有專業的技術答疑解惑如果你覺得這篇文章對你有點用的話，麻煩請給我們的開源項目點點不勝感激移動端兼容css篇移動端的 1px問題描述：1px 的邊框。在高清屏下，移動端的 1px 會很粗。產生原因：首先先要了解一個...

番茄西紅柿 2021-11-22 15:29 評論0 收藏2637
web前端 —— 移動端知識的一些總結

摘要：打個招聘廣告杭州阿里巴巴招前端想去西溪的也可幫推薦，比較缺人，機會多多廣告位長期有效，有興趣簡歷我郵箱個人在移動端的一些總結歸納，有新的知識點會一直更新一部分用做動畫時，變形盡量通過來實現，而不是用，等屬性。不過的事件有一個事件穿透的問題。打個招聘廣告：杭州阿里巴巴B2B 招前端（想去西溪的也可幫推薦），比較缺人，機會多多！廣告位長期有效，有興趣簡歷我郵箱：854936875@q...

BetaRabbit 2019-08-22 10:58 評論0 收藏0