Как можно анимировать линию в canvas?

Question

[hatealleverything]

Добрый день, недавно начал работать с canvas. Вот что получилось у меня.
https://codepen.io/emptyhopes/pen/GRZoGwG
И вот что хотелось бы сделать ( режим на подобие CS:GO Crash ).
Примеры сайтов

1. https://csgorun.org/
   
2. https://csgo500.io/crash

Как я могу примерно также анимировать свою линию? Знаю про requestAnimationFrame(), но немного не понятно, как это реализовать в коде. Мне нужно её каждый раз переписывать и каждый раз задавать значение в ctx.bezierCurveTo()? Или это можно как-то лучше реализовать?

Answer 1

[twobomb]

Comments

[hatealleverything]

Огромное спасибо

[twobomb]

hatealleverything, Вариант №2

[hatealleverything]

Могу ли я как-то остановить анимацию в любой момент?

[twobomb]

hatealleverything, Конечно, не дать дальше выполниться setTimeout. По сути первый вариант, если убрать setTimeout это просто функция которая принимает значение t, t от 0 до 1, тоесть 0 это линию в нулевой точке, передаем 1 линия в самом конце, если передать 0.5 будет где-то в середине, ну и я t просто инкрементирую с малым шагом и через задержку рисую, получается типо анимация.
Второй вариант тоже самое, только там 3 параметра curY это текущее значение y , toY это куда стремится по сути наша анимация, step это тот же шаг с которым оно изменяет curY

[twobomb]

hatealleverything, Во втором варианте вы можете просто передать toY другое и оно остановится когда дойдет, а в первом варианте поменять условие if(t < 1) на другое, например if(t < 0.5), тогда она дойдет до середины и остановится

[hatealleverything]

twobomb, Огромное Вам спасибо