Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vitorluizc/animate
:space_invader: Create and manage animation functions with AnimationFrame API.
https://github.com/vitorluizc/animate
animation bili game-loop gameloop interval javascript loop requestanimationframe typescript
Last synced: 10 days ago
JSON representation
:space_invader: Create and manage animation functions with AnimationFrame API.
- Host: GitHub
- URL: https://github.com/vitorluizc/animate
- Owner: VitorLuizC
- License: mit
- Created: 2019-01-01T20:28:38.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-01-09T20:13:54.000Z (almost 3 years ago)
- Last Synced: 2024-09-20T13:05:32.516Z (about 2 months ago)
- Topics: animation, bili, game-loop, gameloop, interval, javascript, loop, requestanimationframe, typescript
- Language: TypeScript
- Homepage:
- Size: 222 KB
- Stars: 13
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `@bitty/animate`
[](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_);
#### See bubbles example at [Codepen](https://codepen.io/VitorLuizC/full/WLddER)
## Installation
This library is published in the NPM registry and can be installed using any compatible package manager.
```sh
npm install @vitorluizc/animate --save
# For Yarn, use the command below.
yarn add @vitorluizc/animate
```
### Installation from CDN
This module has an UMD bundle available through JSDelivr and Unpkg CDNs.
```html
// module will be available through `animate` function.
var animation = animate(function () {
// ...
});
animation.start();
```
## Usage
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).
## API
- **`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).
TypeScript type definitions.
```ts
export default function animate(callback: () => void): Animation;
```
- **`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...');
```
TypeScript type definitions.
```ts
export interface Animation {
readonly running: boolean;
stop: () => void;
start: () => void;
}
```
## License
Released under [MIT License](./LICENSE).