SVG анимация в браузере

У меня есть группа кругов svg в группе.SVG анимация в браузере

Я бы хотел, чтобы они перемещались влево немного 30 раз в секунду, чтобы создать эффект прокрутки.

Я использую requestAnimationFrame с интервалом 1/30 секунды, и я применяю

setAttribute('transform', 'translate(-' + offsetPx + ', 0)')

В хромированной временной шкале инструментов отладки он показывает, что установка этого преобразования атрибут заставляет макет быть пересчитан, который довольно дорого. Согласно этой статье: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ Я не думал, что это должно было случиться.

Что является наиболее эффективным способом для достижения этого эффекта прокрутки?

Заранее спасибо.

источник

2013-12-02 klyngbaek

Если вам не нужно использовать requestAnimationFrame, вы можете использовать тег анимации SVG.

<circle cx="50" cy="50" r="10"> 
    <animate attributeName="cx" from="50" to="0" dur="2" repeatCount="indefinite" /> 
</circle>

Дополнительная информация здесь https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate.

источник

2013-12-02 02:17:20 Minifyre

Проблема в том, что я не знаю, сколько мне нужно перемещаться с каждой итерацией. Могу ли я применить 1 анимацию, дождитесь ее окончания и затем применить другую? – klyngbaek

, если вы говорите о простой анимации, просто используйте перевод, и поверьте мне, что это не убийца процессора. – ProllyGeek

Хорошо, тогда SVG может быть не лучшим, но я думаю, вы могли бы отредактировать атрибуты тэга анимации на таймере (так что да, вы можете дождаться его завершения, а затем применить другое). Я считаю, что анимация SVG менее подвержена риску процессора. – Minifyre

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

http://www.greensock.com/js/speed.html

потому что многие статики там неправильны.

источник

2013-12-02 02:18:13 ProllyGeek

SVG анимация в браузере

ответ

Смежные вопросы