Как сделать интерактивную траву?

Question

[DonTraffic]

Есть травинка, которая в спокойствии, просто колышется влево и вправо (как будто дует ветер).
Когда пользователь касается с левой стороны, травинка отклоняется в право (от касания). После продолжает обычное движение из этой точки.
Каким способом такое реализовать, где можно взять информацию по теме, и не умрёт ли страница, если таких травинок будет много (например 20)

Answer 1

[Владимир Коротенко]

https://codepen.io/Adilade/pen/ExxJKKL
https://www.oreilly.com/library/view/svg-animation...

https://www.google.com/search?q=svg+interactive+gr...

В первом приближении отрисуйте траву, каждой травинке присвой id в ява скрипте получи все id и наложи обработчики на клик. Дальше при клике проигрывай другую анимацию

Comments

[DonTraffic]

Думал над таким решением, но я не нашёл информации, как через js взять процент выполнения анимации через keyframe. Что бы от этого положения, наклонять травинку в нужное положение

[Владимир Коротенко]

DonTraffic, делайте все через скрипты. то есть запуск анимации стартует счетчик, клик сбрасывает его ну и так далее