Maison  >  Questions et réponses  >  le corps du texte

javascript - 手机h5页面转盘抽奖 转动过程中卡顿

现在想做一个抽奖转盘的游戏,想通过设置角度,然后让图片指针旋转,但是现在想让其转五秒四圈,但是会出现卡顿,大家有没有什么好的方法,或者针对这种转盘有什么见解。我现在用的是一个jQueryRotate.js的插件实现指针的转动,现在感觉是因为角度变化太快手机反应不过来,看上去是卡顿。麻烦大家给点意见,谢谢。

伊谢尔伦伊谢尔伦2760 Il y a quelques jours962

répondre à tous(12)je répondrai

  • 手机用户1576490023

    手机用户15764900232019-12-24 17:04:20

    Bien mieux que moi, mais je ne peux rien faire ? Personne ne m'apprend non plus

    répondre
    0
  • PHPz

    PHPz2017-04-11 09:07:12

    手机上,web的js解释器,在频询方面,虽然各家rom优化不同,但是为了减少耗电,都要减弱js的频询频率,比如:onscroll,电脑上大部分是100ms一次,在手机上(在非高耗电高性能模式下)大致1s一次;如果你使用js方法作动画就会卡一蹦一蹦的;所以推荐你使用svg或者css方式;而css方式由于浏览器的硬件加速问题,在部分手机上也会一蹦一蹦的;所以勒,SVG动画吧,js通过内存内写css也能控制的;

    répondre
    0
  • 手机用户1576490023

    Je suis débutant, peux-tu m'apprendre ?

    手机用户1576490023 · 2019-12-24 17:02:41
  • PHP中文网

    PHP中文网2017-04-11 09:07:12

    **首先,JQuery库对于手机来说很大,换zeptojs比较好。
    其次,JQuery的animate()方法对于非高配手机运行会有负担,用CSS3替代实现会更快,而且如果你对CSS3有深入理解还可以使用GPU加速(没深入理解一般不使用,会起反效果),会更加快.**

    répondre
    0
  • 手机用户1576490023

    Le maître peut-il m'apprendre ? Je suis novice et je ne suis pas encore très doué dans ce domaine !

    手机用户1576490023 · 2019-12-24 16:50:41
  • 迷茫

    迷茫2017-04-11 09:07:12

    可以考虑用canvas来实现

    répondre
    0
  • 天蓬老师

    天蓬老师2017-04-11 09:07:12

    转盘的交互性很低、可以用canvas实现性能会更好些、最好不要一直跑动画
    通常只需要中间的按钮做个点击、后面的根据算法自己转就完了
    推荐用canvas,很简单

    répondre
    0
  • 手机用户1576490023

    Peux-tu m'apprendre? Bon dieu

    手机用户1576490023 · 2019-12-24 17:03:12
  • PHP中文网

    PHP中文网2017-04-11 09:07:12

    移动端推荐使用canvas或者CSS3旋转实现,可以适当开启GPU加速

    répondre
    0
  • 大家讲道理

    大家讲道理2017-04-11 09:07:12

    1. canvas

    2. svg

    3. css3

    répondre
    0
  • 天蓬老师

    天蓬老师2017-04-11 09:07:12

    你可以试着在需要加动画的元素上启用gpu加速,做法就是给它加上这样一个类:

    .accelerated {
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
    }

    这样浏览器就会触发gpu加速机制。

    répondre
    0
  • 黄舟

    黄舟2017-04-11 09:07:12

    说了这么多,就每个demo吗?

    répondre
    0
  • Annulerrépondre