popmotion-pose
Version:
A declarative animation library for HTML and SVG
101 lines • 4.01 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { spring, tween, action, pointer, transform } from 'popmotion';
import { linear } from '@popmotion/easing';
import { BoundingBoxDimension } from '../types';
import { percent } from 'style-value-types';
import { resolveProp } from '../dom/utils';
var interpolate = transform.interpolate;
var singleAxisPointer = function (axis) { return function (from) {
var _a;
return pointer((_a = {},
_a[axis] = typeof from === 'string' ? parseFloat(from) : from,
_a)).pipe(function (v) { return v[axis]; });
}; };
var pointerX = singleAxisPointer('x');
var pointerY = singleAxisPointer('y');
var createPointer = function (axisPointerCreator, min, max, measurement) { return function (transitionProps) {
var from = transitionProps.from, type = transitionProps.type, dimensions = transitionProps.dimensions, dragBounds = transitionProps.dragBounds;
var axisPointer = axisPointerCreator(dimensions.measurementAsPixels(measurement, from, type));
var transformQueue = [];
if (dragBounds) {
var resolvedDragBounds_1 = resolveProp(dragBounds, transitionProps);
if (resolvedDragBounds_1[min] !== undefined) {
transformQueue.push(function (v) {
return Math.max(v, dimensions.measurementAsPixels(measurement, resolvedDragBounds_1[min], type));
});
}
if (resolvedDragBounds_1[max] !== undefined) {
transformQueue.push(function (v) {
return Math.min(v, dimensions.measurementAsPixels(measurement, resolvedDragBounds_1[max], type));
});
}
}
if (type === percent) {
transformQueue.push(interpolate([0, dimensions.get(measurement)], [0, 100], { clamp: false }), function (v) { return v + '%'; });
}
return transformQueue.length
? axisPointer.pipe.apply(axisPointer, transformQueue) : axisPointer;
}; };
export var just = function (from) {
return action(function (_a) {
var update = _a.update, complete = _a.complete;
update(from);
complete();
});
};
var underDampedSpring = function (_a) {
var from = _a.from, velocity = _a.velocity, to = _a.to;
return spring({
from: from,
to: to,
velocity: velocity,
stiffness: 500,
damping: 25,
restDelta: 0.5,
restSpeed: 10
});
};
var overDampedSpring = function (_a) {
var from = _a.from, velocity = _a.velocity, to = _a.to;
return spring({ from: from, to: to, velocity: velocity, stiffness: 700, damping: to === 0 ? 100 : 35 });
};
var linearTween = function (_a) {
var from = _a.from, to = _a.to;
return tween({ from: from, to: to, ease: linear });
};
var intelligentTransition = {
x: underDampedSpring,
y: underDampedSpring,
z: underDampedSpring,
rotate: underDampedSpring,
rotateX: underDampedSpring,
rotateY: underDampedSpring,
rotateZ: underDampedSpring,
scaleX: overDampedSpring,
scaleY: overDampedSpring,
scale: overDampedSpring,
opacity: linearTween,
default: tween
};
var dragAction = __assign(__assign({}, intelligentTransition), { x: createPointer(pointerX, 'left', 'right', BoundingBoxDimension.width), y: createPointer(pointerY, 'top', 'bottom', BoundingBoxDimension.height) });
var justAxis = function (_a) {
var from = _a.from;
return just(from);
};
var intelligentDragEnd = __assign(__assign({}, intelligentTransition), { x: justAxis, y: justAxis });
export default new Map([
['default', intelligentTransition],
['drag', dragAction],
['dragEnd', intelligentDragEnd]
]);
//# sourceMappingURL=default-transitions.js.map