Grabbed dndbeyond's source code
``` ~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js ```
This commit is contained in:
+88
@@ -0,0 +1,88 @@
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["duration", "easing", "delay"];
|
||||
// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
|
||||
// to learn the context in which each easing should be used.
|
||||
export const easing = {
|
||||
// This is the most common easing curve.
|
||||
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
// Objects enter the screen at full velocity from off-screen and
|
||||
// slowly decelerate to a resting point.
|
||||
easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
|
||||
// Objects leave the screen at full velocity. They do not decelerate when off-screen.
|
||||
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
||||
// The sharp curve is used by objects that may return to the screen at any time.
|
||||
sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
|
||||
};
|
||||
|
||||
// Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
|
||||
// to learn when use what timing
|
||||
export const duration = {
|
||||
shortest: 150,
|
||||
shorter: 200,
|
||||
short: 250,
|
||||
// most basic recommended timing
|
||||
standard: 300,
|
||||
// this is to be used in complex animations
|
||||
complex: 375,
|
||||
// recommended when something is entering screen
|
||||
enteringScreen: 225,
|
||||
// recommended when something is leaving screen
|
||||
leavingScreen: 195
|
||||
};
|
||||
function formatMs(milliseconds) {
|
||||
return `${Math.round(milliseconds)}ms`;
|
||||
}
|
||||
function getAutoHeightDuration(height) {
|
||||
if (!height) {
|
||||
return 0;
|
||||
}
|
||||
const constant = height / 36;
|
||||
|
||||
// https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
|
||||
return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
|
||||
}
|
||||
export default function createTransitions(inputTransitions) {
|
||||
const mergedEasing = _extends({}, easing, inputTransitions.easing);
|
||||
const mergedDuration = _extends({}, duration, inputTransitions.duration);
|
||||
const create = (props = ['all'], options = {}) => {
|
||||
const {
|
||||
duration: durationOption = mergedDuration.standard,
|
||||
easing: easingOption = mergedEasing.easeInOut,
|
||||
delay = 0
|
||||
} = options,
|
||||
other = _objectWithoutPropertiesLoose(options, _excluded);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const isString = value => typeof value === 'string';
|
||||
// IE11 support, replace with Number.isNaN
|
||||
// eslint-disable-next-line no-restricted-globals
|
||||
const isNumber = value => !isNaN(parseFloat(value));
|
||||
if (!isString(props) && !Array.isArray(props)) {
|
||||
console.error('MUI: Argument "props" must be a string or Array.');
|
||||
}
|
||||
if (!isNumber(durationOption) && !isString(durationOption)) {
|
||||
console.error(`MUI: Argument "duration" must be a number or a string but found ${durationOption}.`);
|
||||
}
|
||||
if (!isString(easingOption)) {
|
||||
console.error('MUI: Argument "easing" must be a string.');
|
||||
}
|
||||
if (!isNumber(delay) && !isString(delay)) {
|
||||
console.error('MUI: Argument "delay" must be a number or a string.');
|
||||
}
|
||||
if (typeof options !== 'object') {
|
||||
console.error(['MUI: Secong argument of transition.create must be an object.', "Arguments should be either `create('prop1', options)` or `create(['prop1', 'prop2'], options)`"].join('\n'));
|
||||
}
|
||||
if (Object.keys(other).length !== 0) {
|
||||
console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
|
||||
}
|
||||
}
|
||||
return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
|
||||
};
|
||||
return _extends({
|
||||
getAutoHeightDuration,
|
||||
create
|
||||
}, inputTransitions, {
|
||||
easing: mergedEasing,
|
||||
duration: mergedDuration
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user