3 ms·
Bouncy Ball – Compare Web Animation Techniques
- leetrout 3y agoThey should add a Rive example to go with Lottie.
- doubloon 3y agonone of these seem use the good old fashion integer method from the 80s yvel = yvel + accel height = height - yvel if position < floor, yvel *= -1 pause for x milliseconds, repeat i wonder why this is not good enough and we need to resort to calculus and exponentiation
- kibibu 3y agoPhysics based animation is great, but there are some limitations. Firstly, it's frame-rate dependent as you've described it. You'd need at minimum to multiply by time delta per frame. Secondly, the integration method you've used is called Euler integration. which is inherently unstable. There are stable approaches but they are more complex and easy to get subtly wrong. Thirdly, it's not parametric, which (for example) the CSS version is. This might not be important, but for some applications being able to play the animation more slowly, or in reverse, is important.
- floydnoel 3y agointeresting that the CSS version is the smoothest in an ios webview