@bitty/animate
Version:
Create and manage animation functions with AnimationFrame API.
152 lines (100 loc) • 3.87 kB
Markdown
[](https://bundlephobia.com/result?p=@bitty/animate)
[](https://bundlephobia.com/result?p=@bitty/animate)
[](https://codepen.io/VitorLuizC/full/WLddER)
Create and manage animation functions with AnimationFrame API.
- :zap: Dependency free and smaller than **170B** (ESM minified + gzipped);
- :label: Type definitions to TS developers and IDE/Editors intellisense;
- :package: CommonJS, ESM and UMD distributions (_CDN uses UMD as default_);
This library is published in the NPM registry and can be installed using any compatible package manager.
```sh
npm install @vitorluizc/animate --save
yarn add @vitorluizc/animate
```
This module has an UMD bundle available through JSDelivr and Unpkg CDNs.
```html
<script src="https://cdn.jsdelivr.net/npm/@bitty/animate"></script>
<script>
// module will be available through `animate` function.
var animation = animate(function () {
// ...
});
animation.start();
</script>
```
Call `animate`, the default exported function, with your callback and use returned object to manage your animation.
```js
import animate from '@bitty/animate';
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const position = { x: 0, y: 0 };
const animation = animate(() => {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(position.x, position.y, 100 / 2, 0, 2 * Math.PI);
context.fillStyle = '#000000';
context.fill();
context.closePath();
});
window.addEventListener('mousemove', (event) => {
position.x = event.clientX;
position.y = event.clientY;
});
animation.start();
```
> See this example on [Codepen](https://codepen.io/VitorLuizC/pen/jXRzVp).
- **`animate`**
The default exported function, which receives `callback` as argument and returns an **`Animation`**.
- `callback` is a **synchronous function** running into a AnimationFrame recursion.
```js
let count = 0;
const animation = animate(() => {
context.clearRect(0, 0, element.width, element.height);
context.font = '4rem monospace';
context.textAlign = 'center';
context.fillText(count, element.width / 2, element.height / 2);
count++;
});
animation.start();
```
> See this example on [Codepen](https://codepen.io/VitorLuizC/pen/yGrvzP).
<details>
<summary>TypeScript type definitions.</summary>
<br />
```ts
export default function animate(callback: () => void): Animation;
```
</details>
- **`Animation`**
An object returned by **`animate`** function to manage your animations. It can start, stop and check if animation is running.
- **`running`**: A getter property that indicates if animation is running.
- **`start()`**: A method to start the animation.
- **`stop()`**: A method to stop the animation.
```js
const animation = animate(() => { ... });
animation.start();
// Stops the animation after 10s
setTimeout(() => animation.stop(), 10 * 1000);
if (animation.running)
console.log('The animation is running...');
```
<details>
<summary>TypeScript type definitions.</summary>
<br />
```ts
export interface Animation {
readonly running: boolean;
stop: () => void;
start: () => void;
}
```
</details>
Released under [MIT License](./LICENSE).