UNPKG

3.63 kBJavaScriptView Raw
1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.default = createTransitions;
7exports.easing = exports.duration = void 0;
8// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
9// to learn the context in which each easing should be used.
10const easing = exports.easing = {
11 // This is the most common easing curve.
12 easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
13 // Objects enter the screen at full velocity from off-screen and
14 // slowly decelerate to a resting point.
15 easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
16 // Objects leave the screen at full velocity. They do not decelerate when off-screen.
17 easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
18 // The sharp curve is used by objects that may return to the screen at any time.
19 sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
20};
21
22// Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
23// to learn when use what timing
24const duration = exports.duration = {
25 shortest: 150,
26 shorter: 200,
27 short: 250,
28 // most basic recommended timing
29 standard: 300,
30 // this is to be used in complex animations
31 complex: 375,
32 // recommended when something is entering screen
33 enteringScreen: 225,
34 // recommended when something is leaving screen
35 leavingScreen: 195
36};
37function formatMs(milliseconds) {
38 return `${Math.round(milliseconds)}ms`;
39}
40function getAutoHeightDuration(height) {
41 if (!height) {
42 return 0;
43 }
44 const constant = height / 36;
45
46 // https://www.desmos.com/calculator/vbrp3ggqet
47 return Math.min(Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10), 3000);
48}
49function createTransitions(inputTransitions) {
50 const mergedEasing = {
51 ...easing,
52 ...inputTransitions.easing
53 };
54 const mergedDuration = {
55 ...duration,
56 ...inputTransitions.duration
57 };
58 const create = (props = ['all'], options = {}) => {
59 const {
60 duration: durationOption = mergedDuration.standard,
61 easing: easingOption = mergedEasing.easeInOut,
62 delay = 0,
63 ...other
64 } = options;
65 if (process.env.NODE_ENV !== 'production') {
66 const isString = value => typeof value === 'string';
67 const isNumber = value => !Number.isNaN(parseFloat(value));
68 if (!isString(props) && !Array.isArray(props)) {
69 console.error('MUI: Argument "props" must be a string or Array.');
70 }
71 if (!isNumber(durationOption) && !isString(durationOption)) {
72 console.error(`MUI: Argument "duration" must be a number or a string but found ${durationOption}.`);
73 }
74 if (!isString(easingOption)) {
75 console.error('MUI: Argument "easing" must be a string.');
76 }
77 if (!isNumber(delay) && !isString(delay)) {
78 console.error('MUI: Argument "delay" must be a number or a string.');
79 }
80 if (typeof options !== 'object') {
81 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'));
82 }
83 if (Object.keys(other).length !== 0) {
84 console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
85 }
86 }
87 return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
88 };
89 return {
90 getAutoHeightDuration,
91 create,
92 ...inputTransitions,
93 easing: mergedEasing,
94 duration: mergedDuration
95 };
96}
\No newline at end of file