Оптимизация анимации погоды (снег/дождь/звезды) для мобильных устройств - альтернативы более 100 анимационным элементам ⇐ Javascript

[Anonymous]

Я строю портфель на тему погоды с интерактивными анимациями, которые должны поддерживать производительность на мобильных устройствах (≥ iPhone 8/Android 9). В то время как я делал оптимизацию, я достигаю ограничений производительности с помощью текущего подхода на основе CSS.

• кадры (особенно на более старых устройствах, таких как iPhone 8)
• high Battery Encument
  
  
  
  . /> Джиттер во время прокрутки < /strong> < /p>
  < /li>
  < /ol>

  Код: Выделить всё

  
  
  .snowflake {
  position: fixed;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  animation: fall 8s linear infinite;
  will-change: transform;
  }
  @keyframes fall {
  to { transform: translateY(100vh) rotate(360deg); }
  }
  
  

  производительность (moto g5/chrome):
  • 50 снежинок [/b]: ~ 40fps, + 150 МБ память о ГПУ
  • 
    60 Rawlops + ровно>. Устойчивый
  • 200 звезд : значительный джайтер прокрутки

  Что я пробовал:

  (100 itment elements (100 itme. Снежинки) < /p>
  < /li>
• Оптимизирован с

  Код: Выделить всё

  will-change: transform

  [/b] и

  Код: Выделить всё

  translateZ(0)

  [/b]
• Реализовано

  Код: Выделить всё

  requestAnimationFrame

  [/b] для JS Control
• добавил

  Код: Выделить всё

  prefers-reduced-motion

  [/b] Поддержка

Основные вопросы:

[*] ограничения элементов : есть рекомендуемое максимальное количество усовершенствованных анимированных элементов для мобильных? /> Технологический выбор < /strong>: в какой момент я должен переключиться с CSS на: < /p>

• canvas (

  Код: Выделить всё

  requestAnimationFrame

  [/b] + объединение объектов)
• svg (smil animations)
• webgl (pixijs/thre.js)

/> производительность прокрутки : лучшие методы предотвращения джиттера, когда многие элементы анимируются во время прокрутки? /> < /li>
Должен работать на мобильных устройствах среднего класса < /p>
< /li>
Предпочтения, смягченная мощность, требуется < /p>
< /li>
< /ul>

Подробнее здесь: https://stackoverflow.com/questions/795 ... ves-to-100