rafs

A more powerful and simpler requestAnimationFrame library

It has the pool to avoid busyness on the thread and avoiding multiple calls to requestAnimationFrame with the same callback.

window.requestAnimationFrame schedules and performs an animation before the next repaint, thus taking the guesswork out of being in sync with the user's browser readiness. It will perform the callback function 60 times per second, thus making the main thread quite busy. If you have hundreds of images on the page, it can be very painful on memory when you have hundreds of recurring handles on requestAnimationFrame. This small library can dramatically reduce memory usage as it uses a single requestAnimationFrame.

Installation

npm install rafs --save

Usage

import { requestAnimationFrame, cancelAnimationFrame, raf, caf } from 'rafs'

let id1 = requestAnimationFrame(callback1)
let id2 = requestAnimationFrame(callback2)
// cancel the callback1
cancelAnimationFrame(id1)

// cancal All without params
cancelAnimationFrame()
// raf is the window.requestAnimationFrame api which is Compatible with different browsers
// caf is the window.cancelAnimationFrame api which is Compatible with different browsers
let id = raf(function () {})
caf(id)

Or use it by script tag

<script src="https://unpkg.com/rafs@0.0.1/libs/rafs.umd.min.js"></script>
<script>
    let requestAnimationFrame = Rafs.requestAnimationFrame
    let cancelAnimationFrame = Rafs.cancelAnimationFrame

    let id1 = requestAnimationFrame(() => {
        console.log('first')
    })

    let id2 = requestAnimationFrame(() => {
        console.log('seconde')
    })

    let id3 = null
    setTimeout(() => {
        id3 = requestAnimationFrame(() => {
            console.log('third')
        })
        cancelAnimationFrame(id1)
    }, 5000)

    setTimeout(() => {
        cancelAnimationFrame()
    }, 10000)
</script>

Contributing

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.

Licence

MIT

Questions or advise

If you have some question or advise, you can send me a E-mail([e-mail]).