0.3.3 • Published 1 year ago
water-animation-2d v0.3.3
water-animation-2d
Library for adding simple 2d water animation by a canvas
Install
npm i water-animation-2d
How to use
- Add canvas on html
<DOCTYPE html />
<html>
...
<canvas id="canvas" width="200px" height="200px">
</canvas>
...
</html>
- Create waterAnimation2d
const canvas = document.getElementById("canvas");
const waterAnim = new WaterAnimation2d(canvas);
- Run animation
waterAnim.run();
- Apply force
const canvasRect = canvas.getBoundingClientRect();
// applying force downward into the center
const forceId = waterAnim.applyForce(canvasRect.width * 0.5, {
x: 0,
y: 500
});
- Cancel force
setTimeout(() => {
waterAnim.cancelForce(forceId)
}, 200)
Example projects
Author
Vladislav Nikolaev, react frontend developer
vladisnotlove@gmail.com telegram | gitlab | github