nimate - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/animate.d.ts

@@ -34,3 +34,3 @@ import EventEmitter from 'eventemitter3';
     private process?;
-    private previousValue;
+    private currentValue;
     private loopsCompleted;
@@ -45,2 +45,3 @@ private isReversed;
     start(): this;
+    getCurrentValue(): AnimatableValue;
     stop(): this;
@@ -47,0 +48,0 @@ set(options: SetOptions): void;

dist/animate.js

@@ -47,2 +47,3 @@ "use strict";
             const currentValue = this.getInterpolatedValue(this.from, this.to, easedT);
+            this.currentValue = currentValue;
             this.emit('update', currentValue);
@@ -94,6 +95,6 @@ // Check if animation is complete
         this.startTime = performance.now();
-        this.previousValue = from;
         this.loopsCompleted = 0;
         this.isReversed = direction === 'reverse';
         this.hasCompleted = false;
+        this.currentValue = from;
     }
@@ -152,2 +153,5 @@ isValidAnimatableValue(value) {
     }
+    getCurrentValue() {
+        return this.currentValue;
+    }
     stop() {
@@ -154,0 +158,0 @@ if (this.process !== undefined) {

dist/index.d.ts

 export { Animate } from './animate';
 export { Sequence } from './sequence';
 export { Queue } from './queue';
+export { Blend } from './blend';
 export { easing } from './easing';

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.easing = exports.Queue = exports.Sequence = exports.Animate = void 0;
+exports.easing = exports.Blend = exports.Queue = exports.Sequence = exports.Animate = void 0;
 var animate_1 = require("./animate");
@@ -10,3 +10,5 @@ Object.defineProperty(exports, "Animate", { enumerable: true, get: function () { return animate_1.Animate; } });
 Object.defineProperty(exports, "Queue", { enumerable: true, get: function () { return queue_1.Queue; } });
+var blend_1 = require("./blend");
+Object.defineProperty(exports, "Blend", { enumerable: true, get: function () { return blend_1.Blend; } });
 var easing_1 = require("./easing");
 Object.defineProperty(exports, "easing", { enumerable: true, get: function () { return easing_1.easing; } });

dist/queue.d.ts

 import EventEmitter from 'eventemitter3';
 import { Animate } from './animate';
+import { Blend } from './blend';
+type AnimationType = Animate | Blend;
 export declare class Queue extends EventEmitter {
     private animations;
     constructor();
-    add(animation: Animate): void;
+    add(animation: AnimationType): void;
     private startNextAnimation;
@@ -12,1 +14,2 @@ private onAnimationComplete;
 }
+export {};

dist/sequence.d.ts

 import EventEmitter from 'eventemitter3';
 import { Animate } from './animate';
-type SequenceItem = Animate | Sequence;
+import { Blend } from './blend';
+type SequenceItem = Animate | Blend | Sequence;
 interface SequenceOptions {
@@ -5,0 +6,0 @@ items: SequenceItem[];

dist/sequence.js

@@ -9,2 +9,3 @@ "use strict";
 const animate_1 = require("./animate");
+const blend_1 = require("./blend");
 class Sequence extends eventemitter3_1.default {
@@ -29,3 +30,3 @@ constructor({ items, parallel = false }) {
                 this.currentIndex++;
-                if (item instanceof animate_1.Animate) {
+                if (item instanceof animate_1.Animate || item instanceof blend_1.Blend) {
                     this.activeAnimates++;
@@ -64,3 +65,3 @@ item.on('update', (value) => this.emit('update', value));
         this.items.forEach(item => {
-            if (item instanceof animate_1.Animate) {
+            if (item instanceof animate_1.Animate || item instanceof blend_1.Blend) {
                 item.stop();
@@ -67,0 +68,0 @@ }

package.json

 {
   "name": "nimate",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A simple, flexible animation library.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -114,3 +114,3 @@ # nimate
   .on('start', () => console.log('Parallel Sequence Start'))
-  .on('update', value => console.log('Parallel Sequence Update:', value))
+  .on('update', value => console.log('Parallel Sequence Update'))
   .on('complete', () => console.log('Parallel Sequence Complete'))
@@ -155,4 +155,46 @@ .on('stop', () => console.log('Parallel Sequence Stop'));
   .on('complete', () => console.log('All animations in the queue are complete'));
+
+// Start the queue
+queue.start();
 ```
 
+### Blending Animations
+
+The `Blend` object allows you to pass multiple `Animate` objects and blend their results.
+
+```javascript
+import { Animate, Blend } from 'nimate';
+
+// Create individual animations
+const animateAlpha = new Animate({
+  from: { a: 1.0 },
+  to: { a: 0.2 },
+  duration: 1000,
+});
+
+const animateColor = new Animate({
+  from: { r: 255, g: 255, b: 0 },
+  to: { r: 255, g: 255, b: 255 },
+  duration: 1000,
+});
+
+// Define a blend function
+const blendFunction = (values) => ({ ...values[1], ...values[0] });
+
+// Create a Blend object
+const blend = new Blend({
+  animates: [animateAlpha, animateColor],
+  blendFunction: blendFunction,
+});
+
+// Attach event listeners
+blend.on('start', () => console.log('Blend Start'));
+blend.on('update', (value) => console.log('Blended value:', value));
+blend.on('complete', () => console.log('Blend Complete'));
+blend.on('stop', () => console.log('Blend Stop'));
+
+// Start the blend animation
+blend.start();
+```
+
 ## 📚 API
@@ -178,2 +220,3 @@
 - `stop()`: Stops the animation.
+- `set(options: SetOptions)`: Updates the animation properties while it is running.
 
@@ -187,2 +230,14 @@ #### Events
 
+#### `SetOptions`
+
+The `set` method accepts an object with the following optional properties:
+
+- `from` (AnimatableValue, optional): The new initial value.
+- `to` (AnimatableValue, optional): The new target value.
+- `duration` (number, optional): The new duration of the animation in milliseconds.
+- `easing` (EasingFunction, optional): The new easing function to use.
+- `delay` (number, optional): The new delay before the animation starts in milliseconds.
+- `direction` ('normal' | 'reverse' | 'alternate', optional): The new direction of the animation.
+- `loop` (number, optional): The new number of times the animation should loop.
+
 ### `Sequence`
@@ -215,3 +270,5 @@
 
-- `add(animation: Animate)`: Adds an `Animate` instance to the queue.
+- `add(animation
+
+: Animate | Blend)`: Adds an `Animate` or `Blend` instance to the queue.
 - `clear()`: Clears the queue and stops any currently running animation.
@@ -227,2 +284,23 @@ - `stop()`: Stops the currently running animation without clearing the queue.
 - `complete`: Emitted when all animations in the queue are complete.
-```
+
+### `Blend`
+
+Creates a blended animation from multiple `Animate` objects.
+
+#### Options
+
+- `animates` (Animate[]): The animations to blend.
+- `blendFunction` (BlendFunction): The function to blend the animation values.
+
+#### Methods
+
+- `start()`: Starts the blended animation.
+- `stop()`: Stops the blended animation.
+- `setBlendFunction(blendFunction: BlendFunction)`: Sets a new blend function.
+
+#### Events
+
+- `start`: Emitted when the blended animation starts.
+- `update`: Emitted on each update with the blended value.
+- `complete`: Emitted when the blended animation completes.
+- `stop`: Emitted when the blended animation is stopped.

No alert changes

Improved metrics

Total package byte prevSize

30375

increased by22.53%

Number of package files

15

increased by15.38%

Lines of code

520

increased by21.21%

Number of lines in readme file

301

increased by34.98%

No dependency changes