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

資訊專欄INFORMATION COLUMN

移動(dòng)端動(dòng)畫小結(jié)

CNZPH / 2352人閱讀

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

一丶jq/zepto animate()方法

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

二丶css3 animation

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

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

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

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

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

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

四丶RequestAnimationFrame

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

五丶遇到的坑

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

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

解決辦法：使用延時(shí)器(1ms)，延遲一點(diǎn)css3動(dòng)畫的執(zhí)行。

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

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

相關(guān)文章

  • 移動(dòng)端動(dòng)畫小結(jié)

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

    silencezwm 評論0 收藏0

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

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

    galaxy_robot 評論0 收藏0

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

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

    ysl_unh 評論0 收藏0

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

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

    derek_334892 評論0 收藏0

發(fā)表評論

0條評論

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