popmotion-pose
Version:
A declarative animation library for HTML and SVG
164 lines • 6.88 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);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { value, chain, delay as delayAction } from 'popmotion';
import poseFactory from 'pose-core';
import defaultTransitions, { just } from '../inc/default-transitions';
import { animationLookup, easingLookup } from '../inc/lookups';
import { getValueType } from '../inc/value-types';
import { invariant } from 'hey-listen';
import * as easing from '@popmotion/easing';
var createPassiveValue = function (init, parent, transform) {
var raw = value(transform(init));
parent.raw.subscribe(function (v) { return raw.update(transform(v)); });
return { raw: raw };
};
var createValue = function (init) {
var type = getValueType(init);
var raw = value(init);
return { raw: raw, type: type };
};
var addActionDelay = function (delay, transition) {
if (delay === void 0) { delay = 0; }
return chain(delayAction(delay), transition);
};
var isCubicBezierArgs = function (args) { return typeof args[0] === 'number'; };
var getAction = function (v, _a, _b) {
var from = _b.from, to = _b.to, velocity = _b.velocity;
var _c = _a.type, type = _c === void 0 ? 'tween' : _c, definedEase = _a.ease, def = __rest(_a, ["type", "ease"]);
invariant(animationLookup[type] !== undefined, "Invalid transition type '" + type + "'. Valid transition types are: tween, spring, decay, physics and keyframes.");
var ease;
if (type === 'tween') {
if (typeof definedEase !== 'function') {
if (typeof definedEase === 'string') {
invariant(easingLookup[definedEase] !== undefined, "Invalid easing type '" + definedEase + "'. popmotion.io/pose/api/config");
ease = easingLookup[definedEase];
}
else if (Array.isArray(definedEase) && isCubicBezierArgs(definedEase)) {
invariant(definedEase.length === 4, "Cubic bezier arrays must contain four numerical values.");
var x1 = definedEase[0], y1 = definedEase[1], x2 = definedEase[2], y2 = definedEase[3];
ease = easing.cubicBezier(x1, y1, x2, y2);
}
}
}
ease = ease || definedEase;
var baseProps = type !== 'keyframes'
? {
from: from,
to: to,
velocity: velocity,
ease: ease
}
: { ease: ease };
return animationLookup[type](__assign(__assign({}, baseProps), def));
};
var isAction = function (action) {
return typeof action.start !== 'undefined';
};
var pose = function (_a) {
var transformPose = _a.transformPose, addListenerToValue = _a.addListenerToValue, extendAPI = _a.extendAPI, readValueFromSource = _a.readValueFromSource, posePriority = _a.posePriority, setValueNative = _a.setValueNative;
return poseFactory({
bindOnChange: function (values, onChange) { return function (key) {
if (!values.has(key))
return;
var raw = values.get(key).raw;
raw.subscribe(onChange[key]);
}; },
readValue: function (_a) {
var raw = _a.raw;
return raw.get();
},
setValue: function (_a, to) {
var raw = _a.raw;
return raw.update(to);
},
createValue: function (init, key, _a, _b) {
var elementStyler = _a.elementStyler;
var _c = _b === void 0 ? {} : _b, passiveParent = _c.passiveParent, passiveProps = _c.passiveProps;
var val = passiveParent
? createPassiveValue(init, passiveParent, passiveProps)
: createValue(init);
val.raw.subscribe(addListenerToValue(key, elementStyler));
return val;
},
convertValue: function (raw, key, _a) {
var elementStyler = _a.elementStyler;
raw.subscribe(addListenerToValue(key, elementStyler));
return {
raw: raw,
type: getValueType(raw.get())
};
},
getTransitionProps: function (_a, to) {
var raw = _a.raw, type = _a.type;
return ({
from: raw.get(),
velocity: raw.getVelocity(),
to: to,
type: type
});
},
resolveTarget: function (_, to) { return to; },
selectValueToRead: function (_a) {
var raw = _a.raw;
return raw;
},
startAction: function (_a, action, complete) {
var raw = _a.raw;
var reaction = {
update: function (v) { return raw.update(v); },
complete: complete
};
return action.start(reaction);
},
stopAction: function (action) { return action.stop(); },
getInstantTransition: function (_, _a) {
var to = _a.to;
return just(to);
},
convertTransitionDefinition: function (val, def, props) {
if (isAction(def))
return def;
var delay = def.delay, min = def.min, max = def.max, round = def.round, remainingDef = __rest(def, ["delay", "min", "max", "round"]);
var action = getAction(val, remainingDef, props);
var outputPipe = [];
if (delay)
action = addActionDelay(delay, action);
if (min !== undefined)
outputPipe.push(function (v) { return Math.max(v, min); });
if (max !== undefined)
outputPipe.push(function (v) { return Math.min(v, max); });
if (round)
outputPipe.push(Math.round);
return outputPipe.length ? action.pipe.apply(action, outputPipe) : action;
},
setValueNative: setValueNative,
addActionDelay: addActionDelay,
defaultTransitions: defaultTransitions,
transformPose: transformPose,
readValueFromSource: readValueFromSource,
posePriority: posePriority,
extendAPI: extendAPI
});
};
export default pose;
//# sourceMappingURL=pose.js.map