vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
152 lines • 5.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SwipeInertia = void 0;
var Timeline_1 = require("../../../components/Timeline");
var isFiniteNumber_1 = require("../../../internal/isFiniteNumber");
var VELOCITIES_COUNT = 4;
var SwipeInertia = /** @class */ (function () {
function SwipeInertia(_ctx) {
this._ctx = _ctx;
/** Velocity tracking */
this._velocities = [];
}
/**
* Add new velocity sample
*/
SwipeInertia.prototype.addVelocity = function (velocity) {
if (this.has) {
return;
}
this._velocities.push(velocity);
if (this._velocities.length > VELOCITIES_COUNT) {
this._velocities.shift();
}
};
/** Update last timestamp */
SwipeInertia.prototype.updateLastTimestamp = function () {
var velocities = this._velocities;
var length = velocities.length;
if (length > 0) {
velocities[length - 1].timestamp = performance.now();
}
};
Object.defineProperty(SwipeInertia.prototype, "velocity", {
/** Returns current velocity */
get: function () {
var samples = this._velocities;
if (samples.length < 2) {
return { x: 0, y: 0, angle: 0 };
}
var totalWeight = 0;
var wvx = 0;
var wvy = 0;
var wva = 0;
for (var i = 1; i < samples.length; i += 1) {
var current = samples[i];
var previous = samples[i - 1];
var deltaX = current.x - previous.x;
var deltaY = current.y - previous.y;
var angleDiff = current.angle - previous.angle;
if (angleDiff > 180)
angleDiff -= 360;
if (angleDiff < -180)
angleDiff += 360;
var deltatTime = Math.max(current.timestamp - previous.timestamp, 1);
var sx = (deltaX / deltatTime) * 1000;
var sy = (deltaY / deltatTime) * 1000;
var sa = (angleDiff / deltatTime) * 1000;
var weight = 1 / Math.exp(-deltatTime * 0.1);
wvx += sx * weight;
wvy += sy * weight;
wva += sa * weight;
totalWeight += weight;
}
if (totalWeight > 0) {
return {
x: wvx / totalWeight,
y: wvy / totalWeight,
angle: wva / totalWeight,
};
}
return { x: 0, y: 0, angle: 0 };
},
enumerable: false,
configurable: true
});
Object.defineProperty(SwipeInertia.prototype, "has", {
/** Check if inertia is active */
get: function () {
return !!this._timeline;
},
enumerable: false,
configurable: true
});
/** Apply inertia-based movement */
SwipeInertia.prototype.release = function (onUpdate) {
var _this = this;
var swipe = this._ctx;
var props = swipe.props, callbacks = swipe.callbacks;
var ratio = props.inertiaRatio, velocityModifier = props.velocityModifier;
var rawVelocity = this.velocity;
var sourceVelocity = {
x: rawVelocity.x * ratio,
y: rawVelocity.y * ratio,
angle: rawVelocity.angle * ratio,
};
var finalVelocity = velocityModifier
? velocityModifier(sourceVelocity)
: sourceVelocity;
var velocityX = finalVelocity.x, velocityY = finalVelocity.y, velocityA = finalVelocity.angle;
var distance = Math.sqrt(Math.pow(velocityX, 2) + Math.pow(velocityY, 2));
// Check if we have sufficient velocity
if (distance < props.inertiaDistanceThreshold) {
callbacks.emit('inertiaFail', undefined);
return;
}
// Calculate animation duration
var duration = props.inertiaDuration(distance);
// Check if the animation duration is positive
if (!(0, isFiniteNumber_1.isFiniteNumber)(duration) || duration <= 0) {
callbacks.emit('inertiaFail', undefined);
return;
}
// Calculate the start and add matrices
var addMatrix = { x: 0, y: 0, angle: 0 };
// Start the inertia animation
this._timeline = new Timeline_1.Timeline({ duration: duration, easing: props.inertiaEasing });
this._timeline.on('start', function () { return callbacks.emit('inertiaStart', undefined); });
this._timeline.on('update', function (_a) {
var eased = _a.eased;
addMatrix.x = velocityX * eased;
addMatrix.y = velocityY * eased;
addMatrix.angle = velocityA * eased;
onUpdate(addMatrix);
callbacks.emit('inertia', undefined);
});
this._timeline.on('end', function () {
_this.cancel();
callbacks.emit('inertiaEnd', undefined);
});
setTimeout(function () { var _a; return (_a = _this._timeline) === null || _a === void 0 ? void 0 : _a.play(); }, 0);
};
/** Destroy inertia animation */
SwipeInertia.prototype.cancel = function () {
var _a;
if (!this._timeline) {
return;
}
if (this._timeline.progress < 1) {
this._ctx.callbacks.emit('inertiaCancel', undefined);
}
(_a = this._timeline) === null || _a === void 0 ? void 0 : _a.destroy();
this._timeline = undefined;
};
/** Destroy instance */
SwipeInertia.prototype.destroy = function () {
var _a;
(_a = this._timeline) === null || _a === void 0 ? void 0 : _a.destroy();
};
return SwipeInertia;
}());
exports.SwipeInertia = SwipeInertia;
//# sourceMappingURL=index.js.map