The Motion library provides a simple and versatile tool for handling animations with P5JS. It allows you to animate properties of JavaScript objects smoothly over time.
The Motion library seamlessly integrates with lite-server
to facilitate hot reloading and efficient image loading during development. This setup ensures immediate reflection of code and image asset changes in the browser, thereby enhancing the development workflow.
To get started with lite-server
, ensure it is installed as a development dependency (--save-dev
) in your project:
npm install lite-server --save-dev
To launch the development server, navigate to your project directory and run:
npm start
This command initiates the server and automatically opens your project in the default web browser.
<script src="path/motion.js"></script>
Initialize the motion
object, which will be used to handle animations.
motion.to(obj, values, duration, option);
- obj (Object): The JavaScript object subject to animation.
- values (Object): Attributes and their target values.
{ a: value, b: value, ... }
. - duration (Int): Duration of the animation in milliseconds.
- option (Object): Animation settings (e.g., ease, callback).
- ease (Function): Easing function for smooth transitions (optional).
- callback (Function): Callback function to execute after the animation completes (optional).
- strenght (Number): Strength factor for the easing function (optional).
- amplitude (Number): Amplitude factor for the easing function (optional).
- delay (Int): Delay before starting the animation (optional).
function draw(){
motion.play();
}
This function updates the animated properties based on the current frame.
// Adding an animation
motion.to(myObject, { x: 100, y: 200 }, 1000, { ease: easeInOut, callback: onAnimationComplete });
// Playing animations in the main loop
function draw() {
motion.play();
// Additional drawing logic
requestAnimationFrame(draw);
}
motion.debug();
Returns an array of animated items for debugging purposes.
hexToHsl(string);
Converts a hexadecimal color value to HSL (Hue, Saturation, Lightness) format.
hslToHex(h, s, l);
Converts HSL values to a hexadecimal color value.
-
The library internally uses the
frameCount
andgetTargetFrameRate
functions for precise time calculations. -
The easing functions used are customizable through the
ease
option. -
The library supports both numeric and color animations.
import motion from "./motion.js";
// Example usage of the motion library
motion.to(myObject, { x: 100, y: 200 }, 1000, { ease: easeInOut, callback: onAnimationComplete });
function draw() {
motion.play();
// Additional drawing logic
requestAnimationFrame(draw);
}
Feel free to customize the library and adjust parameters to suit your specific animation needs.