Как облегчить конкретную анимацию с большими SVG?

Question

[vatrikovsky]

dev-1.vatrikovsky.ru/rings.html
внизу страницы

Имеется машина, отрисованная в SVG с относительно сложной анимацией CSS (вращение колеса со смещением центра и т. д.), и двуслойный фон с гигантскими SVG, двигающийся так же с помощью анимации CSS.

На малопроизводительных компьютерах анимация начинает протормаживать. Замена SVG-фонов картинками (gif+jpeg) дело только ухудшила, вернул SVG. Можно ли что-то оптимизировать, не жертвуя элементами и детальностью? Может, какие-то грубые ошибки есть? Или наоборот, нет хитроумных фишек?

Спасибо.

Comments

[Dark Hole]

Анимация у меня полетела

Answer 1

[Dark Hole]

Первое что приходит на ум: вы разбивали на несколько мелких картинок?

Comments

[vatrikovsky]

Бэкграунд? Не очень понимаю, как это возможно, честно говоря, поясните, пожалуйста.

Я сейчас это представляю только как разбитие фонов на множество мелких SVG (отдельно каждый человек, дерево, дом и т. д.) и распихивание их по отдельным позиционированным блокам в качестве фонов/содержимого. Тогда анимировать придется уже позиции самих блоков, а родительский блок делать overflow-x: hidden.

Вы имели в виду это или что-то более красивое? :)

[Dark Hole]

vatrikovsky: у вас есть, по сути, 6 объектов: корпус, ось, два колеса, бэкграунд спереди, бэкраунд сзади. Их можно отдельными картинками анимировать

[vatrikovsky]

Dark Hole: бэкграунды и так отдельными картинками, в сборе только корпус, ось и два колеса. Я просто не очень понимаю, от какого действия ожидается выгода — надо разделить SVG машины на 4 отдельных, или именно заменить на картинки (png/gif/jpeg) все? От замены тех же бэкграундов картинками становилось только хуже, а машина сама по себе не тормозит (такой вариант есть на главной, нормально работает даже с телефона, не говоря уж о ноутбуках-айпадах).

[Dark Hole]

vatrikovsky: ну, я предлагаю разделить svg на 6 jpg. Их и анимировать

[vatrikovsky]

Dark Hole: понимаете, в чем дело — бэкграунды я уже менял на jpg + gif (верхнему нужна прозрачность). И стало сильно хуже. Замеры не делал, по ощущениям было очевидно. Для машины, возможно, выгода будет, но есть сильные сомнения, что она что-то компенсирует — отдельно машина не особо-то тормозит, а вот отдельно фоны уже грузят.

Но за образовавшуюся идею разбить сами фоны и позиционировать спасибо. Возможно, решение в этом.

Answer 2

[Nwton]

Варианты:
1) Разбиение и замена svg на несколько jpg изображений
2) Полная замена одной gif
3) Вставка анимации в качестве видео файла с автовоспроизведением

Comments

[vatrikovsky]

1. См. дискуссию выше. Разве что фон на гифки с позиционированием, в остальном выгода получается невеликой.

2. Полная замена, к сожалению, не подойдет, как минимум 2 гифки потребуется, чтобы растягивать анимацию на любую ширину: машина и фоны, причем гифки ретинно-ашдэшные. Но, возможно, замена фона гифкой даст эффект, я попробую, спасибо.

3. Вариант, конечно, радикальный... Но спасибо, буду держать в голове как крайнее средство для машины. Для фона, опять же, не получится, в силу требований к ширине.