@sycoraxya/iaspect-raf v1.1.4
iaspect-raf
Installation:
npm install @sycoraxya/iaspect-raf
or
yarn add @sycoraxya/iaspect-raf
Specific version
npm install @sycoraxya/iaspect-raf@v1.1.3
or
yarn add @sycoraxya/iaspect-raf@v1.1.3
See tags for version numbers
Importing:
Add the following line to your script
import Raf from "@sycoraxya/iaspect-raf";
Or add the folder to your webpack.config:
resolve: {
modulesDirectories: ["node_modules/@sycoraxya"];
}
// And add the following line to your scripts
import Raf from "iaspect-raf";
Usage
iaspect-raf has 3 timers: Now, Timeout and Interval.
Now
Use Now to perform an action in the next animationframe.
import Raf from "@sycoraxya/iaspect-raf";
Raf.now((rafInstance, elapsed) => {
// Do stuff
});
Timeout
Use Timeout to perform an action after given MS.
The second argument can be a number or a Settings object.
import Raf from "@sycoraxya/iaspect-raf";
Raf.timeout((rafInstance, elapsed) => {
// Do stuff
}, 200);
Interval
Use Interval to perform an action after given MS and repeat it.
The second argument can be a number or a Settings object.
import Raf from "@sycoraxya/iaspect-raf";
Raf.interval((rafInstance, elapsed) => {
// Do stuff
}, 200);
Using a Settings object
If you want to specify a tickFn, use a Settings object instead of a number as the second argument
The tickFn includes the final tick
Raf.interval(
(rafInstance, elapsed) => {
// Do stuff after 200ms
},
{
time: 200,
tickFn: (rafInstance, elapsed) => {
// Do stuff every tick
},
},
);
Types
Exported types
- RafTimeout
- RafInterval
- RafNow
You can import these types like this:
import Raf, { RafInterval } from "@sycoraxya/iaspect-raf";
let interval: RafInterval;
Callback
All callbacks are called with the following arguments:
Argument | Description |
---|---|
rafInstance | The instance of the raf timer that's created (RafNow, RafInterval, RafTimeout) |
elapsed | (number) The amount of time in ms that has elapsed since the method started |
Settings
A Settings object can be passed as the second argument instead of a number.
Settings can contain the following properties:
Property | Required | Description |
---|---|---|
time | Yes | (number) the time in MS |
tickFn | No | (Callback) A function that gets called every animationframe |
RafNow & RafTimeout
methods
Method | Description |
---|---|
pause | Pauses the timer |
resume | Resumes the timer |
stop | Stops the timer |
restart | Restarts the timer with the settings that were defined at creation |
properties
Property | Type | Description |
---|---|---|
paused | boolean | Is the instance paused |
done | boolean | Is the instance done |
progress | number | The progress of the current iteration as a percentage |
elapsed | number | How much time has elapsed since the start of the current iteration |
RafInterval
RafInterval inherits all methods and properties from RafNow and adds the following:
properties
Property | Description |
---|---|
iteration | (number) The iteration of the interval. Starts at 1 |