我写了一个移动端的网页小游戏,在使用translate3d对人物进行快速移动的时候有特征很明显的人物图片卡顿现象该怎么破解

问题:为什么很多移动端的HTML UI,在滚动时都用transform属性而不是用传统的滚动条?
描述:例如 sencha touch, mobiscrollmobiscroll 在下滑滚动选择日期时都是改变 CSS-webkit-transform: translate3d(0px, -40px, 0px);去实现的。这样有一个效果是日期在选择的时候不会连带拖动整个 UI。除此之外还有什么好处吗?解决方案1:overflow: 很多坑。。解决方案2:是性能问题,移动端的焦点图效果都是translate3d做的,那样运动效果更平滑,而不是一卡一卡的解决方案3:translate3d能开启硬件加速,提升性能。解决方案4:關鍵不在硬件加速,而在於是否 reflow。A reflow is a more significant change. This will happen whenever the DOM tree is manipulated, whenever a style is changed that affects the layout, whenever the className property of an element is changed, or whenever the browser window size is changed.使用 margin/top 修改會觸發 reflow,拖慢速度。Elements that are positioned absolutely or fixed, do not affect the layout of the main document, so if they reflow, they are the only thing that reflows. The document behind them will need to repaint to allow for any changes, but this is much less of a problem than an entire reflow.absolute 和 fixed 的元素的 reflow 不會牽動整體,但依舊不如 transform 只需要 repaint。而 translate 和 translate3d 的區別則在於硬件加速。參考資料:/articles/efficient-javascript/?page=3#reflow解决方案5:我记得移动端是不支持原生滚动的,也就是不支持overflow: 于是才有了iscroll这样的解决框架。不过最新的Safari开始支持了。具体你搜下到处都是,不列举了。
以上介绍了“为什么很多移动端的HTML UI,在滚动时都用transform属性而不是用传统的滚动条?”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:/itwd/1135995.html
上一篇: 下一篇:我就是想问一下在编辑模式中如何让人物前后移动?_3d定制少女xp吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名:今日本吧第个签到,本吧因你更精彩,明天继续来努力!
本吧签到人数:0可签7级以上的吧50个
本月漏签0次!成为超级会员,赠送8张补签卡连续签到:天&&累计签到:天超级会员单次开通12个月以上,赠送连续签到卡3张
关注:3,252贴子:
我就是想问一下在编辑模式中如何让人物前后移动?
按ctrl加方向键只能上下左右移动?能否做到前后移动望指教。还有就是如果我下了个凳子的MOD,然后在游戏中使用了之后凳子就长在人物身上了,怎样才能做到让人物坐到凳子上?用编辑模式慢慢去调吗?
KS大视界是【空间素材吧...
写故事我们是认真的!
张爱玲说出名要趁早,这...
加州生活怎么样?跟着主...
快看,这里有一大堆表情...
哪部你最期待?
都说美不美看大腿,帅不...
风格不限,可萌可毒、可...
比爵迹好不了多少的电影
“萨德” 事件持续发酵 韩...
盘点娱乐圈孝子明星。
你是写手or读者?你怎么...
缺牙要及时修复,揭秘种植牙如何做到几十年不掉?
ctrl+SHIFT+箭头
贴吧热议榜
使用签名档&&
保存至快速回贴}

我要回帖

更多关于 伟大人物最明显 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信