Я пытаюсь сделать объект (круг), чтобы следовать по пути svg (я сделал это с успехом), но я хочу, чтобы этот объект минимизировался, когда он достиг некоторых коордов, а затем изменил размер до его радиуса снова автоматически и делать это снова и снова. Как я могу это сделать?Svg animation-object follow path
ответ
Если вы открыты для использования библиотеки, используйте для этого 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/
- 1. HTML SVG map image follow path
- 2. SKSpriteNode follow bezier path rotation
- 3. svg path to svg polyline
- 4. svg: generate 'outline path'
- 5. SVG Fill Path Animation
- 6. smooth svg path connection
- 7. Loop svg path animation
- 8. svg path не отображается
- 9. SVG rotate path
- 10. SVG Path Hit-Testing
- 11. SVG Path Element
- 12. Animate SVG path
- 13. SVG Path and Transformation
- 14. LinearGradient for path SVG
- 15. svg path неправильно рисуется
- 16. svg path stroke анимация бесконечная
- 17. Draw svg path с мышью
- 18. Scale svg path с Javascript
- 19. SVG path mask не работает
- 20. svg path внутри прямоугольника переполнения
- 21. Svg path animation on hover
- 22. SVG draw path with onclick
- 23. Dashtype line in svg path
- 24. SVG path: Анимация и слияние
- 25. Parse svg: path d attribute
- 26. d3 svg clippath with path
- 27. Ветвление на основе ввода пользователем w/raw_input(); no path follow
- 28. На клике svg image path get path id?
- 29. горизонтальный центр svg path в svg включить в контейнер div
- 30. «svg: hover path» работает только на последнем svg
Где ваш код? Пожалуйста, предоставьте [mcve] показ того, что вы пробовали до сих пор. – Shaggy