2016-10-18 2 views
0

Я пытаюсь сделать объект (круг), чтобы следовать по пути svg (я сделал это с успехом), но я хочу, чтобы этот объект минимизировался, когда он достиг некоторых коордов, а затем изменил размер до его радиуса снова автоматически и делать это снова и снова. Как я могу это сделать?Svg animation-object follow path

+0

Где ваш код? Пожалуйста, предоставьте [mcve] показ того, что вы пробовали до сих пор. – Shaggy

ответ

1

Если вы открыты для использования библиотеки, используйте для этого Greensock и плагин morphSVG. Они облегчают анимацию элементов вдоль пути. Вы можете передавать данные пути из существующего пути с помощью метода pathDataToBezier, а затем анимировать любой объект по этому пути. Он даже имеет возможность автоматического поворота на основе текущего направления.

Вам понадобится TweenMax или TweenLite, которая является основной библиотекой tweening, а затем плагин morphSVG для выполнения этой работы. Вы, вероятно, захотите еще нескольких других, например DrawSVG и Attr plugin.

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

http://codepen.io/anon/pen/VerMWX
http://greensock.com/forums/topic/13581-animate-svg-object-along-motion-path/