成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css3動(dòng)畫在手機(jī)端的流暢度比較

TwIStOy / 2651人閱讀

摘要：我發(fā)現(xiàn)即使都是用的做動(dòng)畫，有的屬性在動(dòng)畫播放時(shí)卻會(huì)不流暢，出現(xiàn)定格動(dòng)畫的效果，這里做個(gè)比較，方便我以后做動(dòng)畫。流暢于流暢于其實(shí)這兩個(gè)沒法比，因?yàn)槭侵苯涌s放，會(huì)拉伸元素的，但如果用的是一個(gè)純色的，倒是可以用。

我發(fā)現(xiàn)即使都是用css3的transition做動(dòng)畫，有的屬性在動(dòng)畫播放時(shí)卻會(huì)不流暢，出現(xiàn)定格動(dòng)畫的效果，這里做個(gè)比較，方便我以后做動(dòng)畫。

transition支持的屬性類型

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

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


length: 真實(shí)的數(shù)字 如：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:真實(shí)的數(shù)字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等屬性；


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


number真實(shí)的（浮點(diǎn)型）數(shù)值，如：zoom,opacity,font-weight,等屬性；


transform list


rectangle:通過x, y, width 和 height（轉(zhuǎn)為數(shù)值）變換，如：crop


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


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


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


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


space-separated list of above:如果列表有相同的項(xiàng)目數(shù)值，則列表每一項(xiàng)按照上面的規(guī)則進(jìn)行變化，否則無變化


a shorthand property: 如果縮寫的所有部分都可以實(shí)現(xiàn)動(dòng)畫，則會(huì)像所有單個(gè)屬性變化一樣變化


具體什么css屬性可以實(shí)現(xiàn)transition效果，在W3C官網(wǎng)中列出了所有可以實(shí)現(xiàn)transition效果的CSS屬性值以及值的類型，大家可以點(diǎn)這里了解詳情。


引用自http://www.w3cplus.com/content/css3-transition
流暢度比較

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

transform:translate()流暢于padding、margin
transform:scale()流暢于width、height(其實(shí)這兩個(gè)沒法比，因?yàn)?b>transform:scale()是直接縮放，會(huì)拉伸元素的，但如果用的是一個(gè)純色的div，倒是可以用。)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115208.html

相關(guān)文章

  • 前端小記4——高性能mobile web開發(fā)

    摘要：高性能動(dòng)畫與端場景需要相比，移動(dòng)端需要考慮的因素也相對復(fù)雜，重點(diǎn)考慮流量功耗與流暢度。而在移動(dòng)端，我們選擇性能更優(yōu)瀏覽器原生實(shí)現(xiàn)方案動(dòng)畫。然而，動(dòng)畫在移動(dòng)多終端設(shè)備場景下，相比會(huì)面對更多的性能問題，主要體現(xiàn)在動(dòng)畫的卡頓與閃爍。1.高性能CSS3動(dòng)畫 與PC端場景需要相比，移動(dòng)web端需要考慮的因素也相對復(fù)雜，重點(diǎn)考慮：流量、功耗與流暢度。在pc端上考慮更多的是流暢度，而mobile web中...

    番茄西紅柿 評論0 收藏0

  • 前端動(dòng)畫調(diào)研-V1

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

    ddongjian0000 評論0 收藏0

  • #yyds干貨盤點(diǎn)#——css移動(dòng)端兼容

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

    lwx12525 評論0 收藏0

  • 前端遇到的那些技術(shù)難點(diǎn)

    摘要：目前主流的屏幕或者。產(chǎn)生原因在中，手指按住屏幕上下拖動(dòng)，會(huì)觸發(fā)事件?；蛘呖梢约尤胛业拈_發(fā)交流群相互學(xué)習(xí)，我們會(huì)有專業(yè)的技術(shù)答疑解惑如果你覺得這篇文章對你有點(diǎn)用的話，麻煩請給我們的開源項(xiàng)目點(diǎn)點(diǎn)不勝感激 移動(dòng)端兼容css篇移動(dòng)端的 1px問題描述：1px 的邊框。在高清屏下，移動(dòng)端的 1px 會(huì)很粗。產(chǎn)生原因：首先先要了解一個(gè)...

    番茄西紅柿 評論0 收藏2637

  • web前端 —— 移動(dòng)端知識(shí)的一些總結(jié)

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

    Astrian 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<