UNPKG

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