40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
import { interpolate } from '../../utils/interpolate.mjs';
|
|
import { easeInOut } from '../../easing/index.mjs';
|
|
|
|
function defaultEasing(values, easing) {
|
|
return values.map(() => easing || easeInOut).splice(0, values.length - 1);
|
|
}
|
|
function defaultOffset(values) {
|
|
const numValues = values.length;
|
|
return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);
|
|
}
|
|
function convertOffsetToTimes(offset, duration) {
|
|
return offset.map((o) => o * duration);
|
|
}
|
|
function keyframes({ from = 0, to = 1, ease, offset, duration = 300, }) {
|
|
const state = { done: false, value: from };
|
|
const values = Array.isArray(to) ? to : [from, to];
|
|
const times = convertOffsetToTimes(offset && offset.length === values.length
|
|
? offset
|
|
: defaultOffset(values), duration);
|
|
function createInterpolator() {
|
|
return interpolate(times, values, {
|
|
ease: Array.isArray(ease) ? ease : defaultEasing(values, ease),
|
|
});
|
|
}
|
|
let interpolator = createInterpolator();
|
|
return {
|
|
next: (t) => {
|
|
state.value = interpolator(t);
|
|
state.done = t >= duration;
|
|
return state;
|
|
},
|
|
flipTarget: () => {
|
|
values.reverse();
|
|
interpolator = createInterpolator();
|
|
},
|
|
};
|
|
}
|
|
|
|
export { convertOffsetToTimes, defaultEasing, defaultOffset, keyframes };
|