Canvas question.
For a test for a possible new job I have to do animations which I've never done.
It's a car on a road, if you press a button the wheels will slightly move causing the car to speed up. These wheels are 11 images, which have to be shown in about 150ms and it has to look fluid with no hiccups.
Now they obviously did advice me to google and I've been searching my ass off for 3 days, found a few solutions but none of them really work. I'm having a few issues which I just can't find or figure out a fix for...
- I tried rendering 11 images with position absolute, having only the first on opacity 1 and the rest on 0. This works, but I am not too keen on rendering 11 images at the same time and having 10 hidden.
- I've now been trying this with canvas, but I am not sure where to go from here. All examples I see has every 'animation frame' stitched together to one big image. Also the documentation on this is confusing as hell and pretty bad..
Does anyone have a proper source for good explanation on canvas image animating? Best one I found is from freecodecamp, but this does use the stitched together image as example which doesn't solve my issue.
Edit: In case you wonder, yes I told them I have no experience with this. They want to see how far I can get which includes asking in forums if needed.
4 Replies
https://www.youtube.com/@Frankslaboratory is one of the best YouTube channels for vanilla JS canvas learning
If you're only looking for how to do sprite sheet animations:
https://youtu.be/1bj7g6sXit8
Otherwise either of these recent videos can help you learn the entire canvas experience:
https://www.youtube.com/watch?v=EvC3ge_puQk&t=80s
https://www.youtube.com/watch?v=EvC3ge_puQk&t=80s
https://www.youtube.com/watch?v=EvC3ge_puQk&t=80s
Thanks - sadly this involves sprites as well..
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Ah, yeah I am not allowed to use libraries sadly. I opted to not use a canvas, instead ill just try to go with the 11 render images and playing with opacity. Will definitely save your links for later, though 🙂