Как правильно подготовить вектор для анимации разборки на части?

Привет всем.

Нарисовал картинку для сайта, есть задача разобрать ее на части (выделено разными цветами) с помощью клика на нужную область. Разобрать - значит нужная часть увеличивается, остальные отлетают в стороны.

5c8fc8ad92fa1446750707.gif

Возникло два вопроса:

1. Как правильно подготовить svg? Думал использовать спрайт и немного html разметки по типу

<svg class="svg-container">
	
	<svg>
		<use href="file.svg#fork" xlink:href="file.svg#fork"/>
	</svg>
	
	<svg>
		<use href="file.svg#engine" xlink:href="file.svg#engine"/>
	</svg>	
	
</svg>


Нормальное ли это решение?

2. Для анимации приглянулся TweenMax из-за приятного функционала и удобного синтаксиса. Но может подскажете что-то еще? Примечание - картинка собирается обратно при клике на кнопку. У твинмакс есть удобные функции для таких штук. Ну и таймлайн может пригодится.
  • Вопрос задан
  • 122 просмотра
Решения вопроса 1
@weart Автор вопроса
Кому интересно, сделал по способу, предложенному мной же ))

5c93ad981ae6d218605428.gif
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
kostyaostapuk
@kostyaostapuk
Spritemap с svg файлами довольно хорошее решение.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы