84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
现在想做一个抽奖转盘的游戏,想通过设置角度,然后让图片指针旋转,但是现在想让其转五秒四圈,但是会出现卡顿,大家有没有什么好的方法,或者针对这种转盘有什么见解。我现在用的是一个jQueryRotate.js的插件实现指针的转动,现在感觉是因为角度变化太快手机反应不过来,看上去是卡顿。麻烦大家给点意见,谢谢。
小伙看你根骨奇佳,潜力无限,来学PHP伐。
Much better than me, but I can’t do anything? No one teaches me either
手机上,web的js解释器,在频询方面,虽然各家rom优化不同,但是为了减少耗电,都要减弱js的频询频率,比如:onscroll,电脑上大部分是100ms一次,在手机上(在非高耗电高性能模式下)大致1s一次;如果你使用js方法作动画就会卡一蹦一蹦的;所以推荐你使用svg或者css方式;而css方式由于浏览器的硬件加速问题,在部分手机上也会一蹦一蹦的;所以勒,SVG动画吧,js通过内存内写css也能控制的;
**首先,JQuery库对于手机来说很大,换zeptojs比较好。其次,JQuery的animate()方法对于非高配手机运行会有负担,用CSS3替代实现会更快,而且如果你对CSS3有深入理解还可以使用GPU加速(没深入理解一般不使用,会起反效果),会更加快.**
可以考虑用canvas来实现
转盘的交互性很低、可以用canvas实现性能会更好些、最好不要一直跑动画通常只需要中间的按钮做个点击、后面的根据算法自己转就完了推荐用canvas,很简单
移动端推荐使用canvas或者CSS3旋转实现,可以适当开启GPU加速
canvas
svg
css3
你可以试着在需要加动画的元素上启用gpu加速,做法就是给它加上这样一个类:
.accelerated { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); }
这样浏览器就会触发gpu加速机制。
说了这么多,就每个demo吗?
Much better than me, but I can’t do anything? No one teaches me either
手机上,web的js解释器,在频询方面,虽然各家rom优化不同,但是为了减少耗电,都要减弱js的频询频率,比如:onscroll,电脑上大部分是100ms一次,在手机上(在非高耗电高性能模式下)大致1s一次;如果你使用js方法作动画就会卡一蹦一蹦的;所以推荐你使用svg或者css方式;而css方式由于浏览器的硬件加速问题,在部分手机上也会一蹦一蹦的;所以勒,SVG动画吧,js通过内存内写css也能控制的;
**首先,JQuery库对于手机来说很大,换zeptojs比较好。
其次,JQuery的animate()方法对于非高配手机运行会有负担,用CSS3替代实现会更快,而且如果你对CSS3有深入理解还可以使用GPU加速(没深入理解一般不使用,会起反效果),会更加快.**
可以考虑用canvas来实现
转盘的交互性很低、可以用canvas实现性能会更好些、最好不要一直跑动画
通常只需要中间的按钮做个点击、后面的根据算法自己转就完了
推荐用canvas,很简单
移动端推荐使用canvas或者CSS3旋转实现,可以适当开启GPU加速
canvas
svg
css3
你可以试着在需要加动画的元素上启用gpu加速,做法就是给它加上这样一个类:
这样浏览器就会触发gpu加速机制。
说了这么多,就每个demo吗?