Что это за анимация и как ее создать?

Question

Я посетил сайт lofavor и увидел там очень милую анимацию. Может кто-нибудь сказать мне, что это за анимация? Очевидно, что это не флеш или анимация JavaScript. Элементом является SVG. Но как я могу создать подобную анимацию с помощью SVG?

Это немного сложная анимация, чем просто повернуть, перевести или масштабировать. Пожалуйста, дайте мне подсказку или ключевое слово, чтобы провести исследование по этому вопросу. Должен ли я кодировать все переходы или есть ли способ WYSIWYG для этого?

Answer 1

Это трансформация SVG Transform, и да, вы должны ее закодировать. Для получения дополнительной информации вы можете проверить SVG Transform.

Если проверить DOM элемент, который я думаю, что вы сделали, вы бы увидели g элементы с атрибутом transform и матрицей, которая определяет Rotation, Translation или Scale.

Существует также метод маскировки для этой красной ленты, которая катится в первую очередь. Хорошим началом работы с SVG является SVG Essential книга.