0

During an animation, using react Konva and Spring, I would like to add a "moving line" (or a blinking line), at the beginning it will have a size of 0, then during 1/10sec a size of X, and then 0 again. (the line could grow 1/2/3/... times during the animation, depending of the conditions, but I think once I can do it for one, I could easily handle it for more) I have a little bit edited this example : https://codesandbox.io/embed/88lmnl6w88 to be closer from what a would like (without the line), with just those 2 lines :

range: [0, 0.23, 0.25, 0.27, 0.83, 0.85, 0.87, 1], 
output: [0, 0, 5, 0, 0, 5, 0, 0]

But I don't achieve to do this with a line... Neither convert this example with 'react-spring/renderprops-konva'. I know how to move a line from a position to another, but not multiple times during a frame. And I haven't found any example for this...

For the context, I'm animating a 2D replay of a CSGO match, and the line will be (for now) the representation of a shoot (that's why it can append 0/1/2/3/... during an animation).

If you had any tips to help me, I would be glad.

julien2313
  • 339
  • 2
  • 6
  • 22
  • There was this answer https://stackoverflow.com/questions/53214214/animate-drawing-of-path-on-html5-canvas/53231715#53231715 related to animating a line along a path. Any use? – Vanquished Wombat Dec 23 '20 at 18:30
  • I've seen another answer like this one (or it was this one), and I haven't figured out how to modify it to fit my need :( – julien2313 Dec 23 '20 at 19:05

0 Answers0