Как улучшить мобильную производительность моей анимации?

Question

Итак, я построил эту маленькую интерактивную рулетку:

http://techgoldmine.com/roulette/

Мне нужно, чтобы работать на мобильных устройствах, а также рабочий стол. Первоначально я обрабатывал взаимодействие, когда пользователь взаимодействовал с кругом SVG, перекрывающим изображение, однако для целей тестирования я удалил это.

В настоящее время анимации осуществляется с помощью события с setInterval функции:

 $('.roulette').bind('touchstart', function() { 
      if (inMotion == true) { 
       cleanUp(); 
      } 
      intervalvar = setInterval(spinWheel, 24); 
      // spinWheel(); 
      $(document).bind('touchend', function() { 
       count = Math.abs(force) 
       mouseup = 1; 
      }); 
     }); 

После вычисления проводятся, я поворачиваю в рулетку с помощью этой функции:

 function rotate(a) { 
      roulette.css({ 
       '-webkit-transform': 'rotate(' + a + 'deg)', 
       '-ms-transform': 'rotate(' + a + 'deg)', 
       '-o-transform': 'rotate(' + a + 'deg)', 
       '-moz-transform': 'rotate(' + a + 'deg)', 
       'transform': 'rotate(' + a + 'deg)' 
      }); 
     } 

Он работает отлично в браузере, однако, когда дело доходит до мобильного телефона, он значительно отстает. Любые идеи о том, как повысить производительность?

Answer 1

Не используйте setInterval для анимации. Мобильные устройства имеют возможности анимации CSS, используют CSS для ваших анимаций. Однако, если вам действительно нужно использовать JS-анимацию, используйте requestAnimationFrame вместо setInterval и синхронизируйте свои фреймы с обновлением браузера.