Raphael JS одновременно анимирует отдельные элементы

Я немного новичок в svg, но понимаю достаточно, чтобы попасть в беду. Я больше ищу высокоуровневое решение моей проблемы, а не точный код. В основном у меня есть следующий дизайн, который должен быть анимированным путем:

введите здесь описание изображения

Я немного не уверен в том, как мне создать путь, оранжевые и белые круги вдоль пути, оранжевые соединительные пути под каждой точкой, а затем анимировать все одновременно при обновлении пути. Я использую библиотеку Raphael JS. Я уже знаю, как создавать пути, круги и т. д. и т. д., но действительно чувствую, что мне не хватает понимания того, как соединить их вместе с помощью одной анимации.

Спасибо!!


person Brendan Moore    schedule 26.02.2014    source источник
comment
это поможет вам. api.greensock.com/js/com/greensock/plugins/RaphaelPlugin. html   -  person Subash Selvaraj    schedule 27.02.2014


Ответы (1)


Я думаю, все, что вам нужно для их анимации, это animate атрибуты элементов для новые ценности

Чтобы анимировать пути, вам придется немного поработать и написать transformPath, как см. этот ответ

Обновлять:

Чтобы анимировать их синхронно, raphael.js предлагает метод animateWith, который принимает эти аргументы. :

Параметры:

element — элемент [object] для синхронизации

anim — [объект] анимация для синхронизации

animation — объект анимации [object], см. Raphael.animation

Первоначально видел в этом ответе, который также включает скрипку

person tutuDajuju    schedule 26.02.2014
comment
Спасибо за ответ, я больше надеялся на решение, как анимировать двоих ВМЕСТЕ. анимировать их по отдельности не проблема. Моя проблема в том, что при анимации пути круги вдоль пути становятся отсоединенными, хотя я анимирую их до тех же значений, что и путь. Это просто отдельные объекты, и анимация не работает идеально вместе. Хотел узнать, есть ли способ сделать их более плавными вместе. Благодарность - person Brendan Moore; 09.04.2014