kling-26-motion-control

A JavaScript library for streamlined motion control and animation, providing utilities for creating fluid and responsive movements in web applications and other JavaScript environments. This package simplifies complex animation sequences by offering pre-built functions and customizable options.

Installation

Install the package using npm:
bash
npm install kling-26-motion-control

Usage Examples

Here are a few examples demonstrating how to use kling-26-motion-control in your projects:

1. Simple Linear Animation:
javascript
const motionControl = require('kling-26-motion-control');

const element = document.getElementById('myElement');

motionControl.animate(element, {
translateX: '200px',
opacity: 0.5
}, {
duration: 1000,
easing: 'linear'
}).then(() => {
console.log('Animation complete!');
});

This example moves an HTML element with the ID 'myElement' 200 pixels to the right and reduces its opacity to 50% over a duration of 1 second, using a linear easing function.

2. Chained Animations with Callbacks:
javascript
const motionControl = require('kling-26-motion-control');

const element = document.getElementById('anotherElement');

motionControl.animate(element, { translateX: '100px' }, { duration: 500 })
.then(() => motionControl.animate(element, { translateY: '50px' }, { duration: 300 }))
.then(() => {
console.log('Chained animations finished!');
});

This example chains two animations together. First, the element is moved 100 pixels to the right, then 50 pixels down. The then() calls ensure that the animations execute sequentially.

3. Keyframe Animation:
javascript
const motionControl = require('kling-26-motion-control');

const element = document.getElementById('keyframeElement');

const keyframes = [
{ transform: 'rotate(0deg)', opacity: 1, offset: 0 },
{ transform: 'rotate(180deg)', opacity: 0.5, offset: 0.5 },
{ transform: 'rotate(360deg)', opacity: 1, offset: 1 }
];

motionControl.animate(element, keyframes, { duration: 2000, easing: 'ease-in-out' })
.then(() => console.log('Keyframe animation complete.'));

This example demonstrates a keyframe animation, rotating an element through 360 degrees and altering its opacity over a 2-second duration using an ease-in-out easing function.

4. Using Custom Easing Functions:
javascript
const motionControl = require('kling-26-motion-control');

const element = document.getElementById('customEasingElement');

// Example custom easing function (easeOutBounce)
const easeOutBounce = (t) => {
const n1 = 7.5625;
const d1 = 2.75;

if (t < 1 / d1) {
return n1 t t;
} else if (t < 2 / d1) {
return n1 (t -= (1.5 / d1)) t + 0.75;
} else if (t < 2.5 / d1) {
return n1 (t -= (2.25 / d1)) t + 0.9375;
} else {
return n1 (t -= (2.625 / d1)) t + 0.984375;
}
};

motionControl.animate(element, { top: '300px' }, { duration: 1500, easing: easeOutBounce })
.then(() => console.log('Custom easing animation done!'));

This showcases usage of a custom easing function to create a bouncing effect as the element animates.

API Summary

* animate(element, properties, options): Animates an HTML element.
* element: The DOM element to animate.
* properties: An object defining the CSS properties to animate, or an array of keyframes.
* options: An object configuring the animation.
* duration: The animation duration in milliseconds (default: 400).
* easing: The easing function to use (default: 'ease'). Can be a string ('linear', 'ease-in', 'ease-out', 'ease-in-out') or a custom function.
* delay: The delay before the animation starts, in milliseconds (default: 0).

License

MIT

This package is part of the kling-26-motion-control ecosystem. For advanced features and enterprise-grade tools, visit: https://supermaker.ai/blog/how-to-use-kling-26-motion-control-ai-free-full-tutorial-ai-baby-dance-guide/