成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

移動端動畫小結(jié)

CNZPH / 2384人閱讀

摘要：一丶方法可以細化操作，回調(diào)方法，但是在移動端安卓卡頓二丶可以用細化過渡效果，沒有回調(diào)操作，只能監(jiān)控是否已完成。會存在過度繪制，會造成幀丟失，繼而導(dǎo)致動畫斷續(xù)顯示。

一丶jq/zepto animate()方法

可以細化操作，回調(diào)方法，但是在移動端（安卓）卡頓

二丶css3 animation

可以用@keyframes細化過渡效果，沒有回調(diào)操作，只能監(jiān)控animation/transition是否已完成。

三丶transform 過渡top/left 導(dǎo)致重繪，手機性能不好時依然卡頓

使用絕對位置定位頁面上的動畫元素，將其脫離文檔流，可以有效的防止重排。

使用transform:translateY/X來移動元素 scale()縮放元素

加上 -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); 開啟GPU硬件加速

[參考鏈接]http://blog.csdn.net/majun000...

四丶RequestAnimationFrame

如果你需要細化過渡效果，但是使用setTimeout可能在性能不夠的手機上還是會出現(xiàn)卡頓的情況，我就遇到了這樣的情況。 setTimeout會存在過度繪制，會造成幀丟失，繼而導(dǎo)致動畫斷續(xù)顯示。這也是setTimeout的定時器值推薦最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60幀）。而requestAnimationFrame是跟著瀏覽器繪制來的，不會存在過度繪制，也就不會出現(xiàn)動畫卡頓的情況。
參考鏈接代碼

五丶遇到的坑

元素display:none的時候是拿不到transform的值（其他屬性沒試），解決辦法：用visibility: hidden;

過渡動畫的時候，先讓元素display:block 馬上執(zhí)行css3動畫，結(jié)果瀏覽器直接忽略過渡動畫，渲染最后的結(jié)果。

解決辦法：使用延時器(1ms)，延遲一點css3動畫的執(zhí)行。

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113088.html

相關(guān)文章

  • 移動端動畫小結(jié)

    摘要：一丶方法可以細化操作，回調(diào)方法，但是在移動端安卓卡頓二丶可以用細化過渡效果，沒有回調(diào)操作，只能監(jiān)控是否已完成。會存在過度繪制，會造成幀丟失，繼而導(dǎo)致動畫斷續(xù)顯示。 一丶jq/zepto animate()方法 可以細化操作，回調(diào)方法，但是在移動端（安卓）卡頓 二丶css3 animation 可以用@keyframes細化過渡效果，沒有回調(diào)操作，只能監(jiān)控animation/transi...

    silencezwm 評論0 收藏0

  • 移動web開發(fā)問題和優(yōu)化小結(jié)

    摘要：如何讓我們所開發(fā)的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發(fā)問題和優(yōu)化小結(jié)。關(guān)于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言 到目前為止，互聯(lián)網(wǎng)行業(yè)里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領(lǐng)域。用戶要求越來越高，網(wǎng)站功能越來越好，效果越來越炫酷，這就要求我們產(chǎn)品質(zhì)量越來越高，web前端開...

    galaxy_robot 評論0 收藏0

  • 移動web開發(fā)問題和優(yōu)化小結(jié)

    摘要：如何讓我們所開發(fā)的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發(fā)問題和優(yōu)化小結(jié)。關(guān)于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言 到目前為止，互聯(lián)網(wǎng)行業(yè)里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領(lǐng)域。用戶要求越來越高，網(wǎng)站功能越來越好，效果越來越炫酷，這就要求我們產(chǎn)品質(zhì)量越來越高，web前端開...

    ysl_unh 評論0 收藏0

  • 移動Web開發(fā)小結(jié)

    摘要：在做移動開發(fā)時有很多地方跟端是不一樣的，需要不一樣的設(shè)置，這里就記錄下移動開發(fā)中有用的設(shè)置和一些通用代碼。其他關(guān)于打電話發(fā)短信發(fā)郵件的實現(xiàn)打電話給發(fā)短信給發(fā)郵件給關(guān)于布局移動端中對于的支持已經(jīng)很好，是布局神器。 在做移動 Web 開發(fā)時有很多地方跟 PC 端是不一樣的，需要不一樣的設(shè)置，這里就記錄下移動 Web 開發(fā)中有用的設(shè)置和一些通用代碼。 我的博客地址 HTML 設(shè)置頁面寬度等于...

    derek_334892 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<