Estou utilizando o Canvas
para fazer isso https://jsfiddle.net/m42hu8zg/ , só que gostaria de parar a animação ao clicar na div
usando alguma funcionalidade do requestAnimationFrame
. Eu usei o setInterval
mas a animação não fica legal, então resolvi usar o requestAnimationFrame
mas nao sei parar a animação apos um click e continuar apos outro click.
O código funciona simplesmente com uma circunferência por cima de uma linha usando o método clip()
, e quando clica na div
, a circunferência move no eixo x passando por cima da linha mostrando-a, só que quero parar a animação apos um click e depois continuar (como um botão de play e stop, dando a intenção que a linha parou de crescer).
Seria possível também eu definir um caminho para a circunferência percorrer apos o click ? Exemplo: http://prntscr.com/7y1wpw
*No meu exemplo ele segue um caminho, mas é em linha reta, eu queria que a circunferência move-se por um caminho já pre-definido como no exemplo acima.