国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

silencezwm / 2987人閱讀

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

一丶jq/zepto animate()方法

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

二丶css3 animation

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

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

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

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

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

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

四丶RequestAnimationFrame

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

五丶遇到的坑

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/94432.html

相關(guān)文章

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

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

    CNZPH 評(píng)論0 收藏0

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

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

    galaxy_robot 評(píng)論0 收藏0

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

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

    ysl_unh 評(píng)論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)端中對(duì)于的支持已經(jīng)很好，是布局神器。 在做移動(dòng) Web 開發(fā)時(shí)有很多地方跟 PC 端是不一樣的，需要不一樣的設(shè)置，這里就記錄下移動(dòng) Web 開發(fā)中有用的設(shè)置和一些通用代碼。 我的博客地址 HTML 設(shè)置頁(yè)面寬度等于...

    derek_334892 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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