mirror of https://github.com/sveltejs/svelte
S. Elliott Johnson
3 years ago
parent
8225b5e3ff
commit
3fbad648de
@ -1,143 +1,122 @@
|
|||||||
import { Readable, writable } from '../store';
|
import { writable } from '../store';
|
||||||
import { assign, loop, now, Task } from '../internal';
|
import { assign, loop, now } from '../internal';
|
||||||
import { linear } from '../easing';
|
import { linear } from '../easing';
|
||||||
import { is_date } from './utils';
|
import { is_date } from './utils';
|
||||||
|
/** @returns {(t: any) => any} */
|
||||||
function get_interpolator(a, b) {
|
function get_interpolator(a, b) {
|
||||||
if (a === b || a !== a) return () => a;
|
if (a === b || a !== a)
|
||||||
|
return () => a;
|
||||||
const type = typeof a;
|
const type = typeof a;
|
||||||
|
if (type !== typeof b || Array.isArray(a) !== Array.isArray(b)) {
|
||||||
if (type !== typeof b || Array.isArray(a) !== Array.isArray(b)) {
|
throw new Error('Cannot interpolate values of different type');
|
||||||
throw new Error('Cannot interpolate values of different type');
|
}
|
||||||
}
|
if (Array.isArray(a)) {
|
||||||
|
const arr = b.map((bi, i) => {
|
||||||
if (Array.isArray(a)) {
|
return get_interpolator(a[i], bi);
|
||||||
const arr = b.map((bi, i) => {
|
});
|
||||||
return get_interpolator(a[i], bi);
|
return (t) => arr.map((fn) => fn(t));
|
||||||
});
|
}
|
||||||
|
if (type === 'object') {
|
||||||
return (t) => arr.map((fn) => fn(t));
|
if (!a || !b)
|
||||||
}
|
throw new Error('Object cannot be null');
|
||||||
|
if (is_date(a) && is_date(b)) {
|
||||||
if (type === 'object') {
|
a = a.getTime();
|
||||||
if (!a || !b) throw new Error('Object cannot be null');
|
b = b.getTime();
|
||||||
|
const delta = b - a;
|
||||||
if (is_date(a) && is_date(b)) {
|
return (t) => new Date(a + t * delta);
|
||||||
a = a.getTime();
|
}
|
||||||
b = b.getTime();
|
const keys = Object.keys(b);
|
||||||
const delta = b - a;
|
const interpolators = {};
|
||||||
return (t) => new Date(a + t * delta);
|
keys.forEach((key) => {
|
||||||
}
|
interpolators[key] = get_interpolator(a[key], b[key]);
|
||||||
|
});
|
||||||
const keys = Object.keys(b);
|
return (t) => {
|
||||||
const interpolators = {};
|
const result = {};
|
||||||
|
keys.forEach((key) => {
|
||||||
keys.forEach((key) => {
|
result[key] = interpolators[key](t);
|
||||||
interpolators[key] = get_interpolator(a[key], b[key]);
|
});
|
||||||
});
|
return result;
|
||||||
|
};
|
||||||
return (t) => {
|
}
|
||||||
const result = {};
|
if (type === 'number') {
|
||||||
keys.forEach((key) => {
|
const delta = b - a;
|
||||||
result[key] = interpolators[key](t);
|
return (t) => a + t * delta;
|
||||||
});
|
}
|
||||||
return result;
|
throw new Error(`Cannot interpolate ${type} values`);
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type === 'number') {
|
|
||||||
const delta = b - a;
|
|
||||||
return (t) => a + t * delta;
|
|
||||||
}
|
|
||||||
|
|
||||||
throw new Error(`Cannot interpolate ${type} values`);
|
|
||||||
}
|
}
|
||||||
|
/** @param {T} value
|
||||||
interface Options<T> {
|
* @param {Options<T>} defaults
|
||||||
delay?: number;
|
* @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/tweened.ts-to-jsdoc").Tweened<T>}
|
||||||
duration?: number | ((from: T, to: T) => number);
|
*/
|
||||||
easing?: (t: number) => number;
|
export function tweened(value, defaults = {}) {
|
||||||
interpolate?: (a: T, b: T) => (t: number) => T;
|
const store = writable(value);
|
||||||
}
|
/** @type {Task} */
|
||||||
|
let task;
|
||||||
type Updater<T> = (target_value: T, value: T) => T;
|
let target_value = value;
|
||||||
|
/** @param {T} new_value
|
||||||
export interface Tweened<T> extends Readable<T> {
|
* @param {Options<T>} opts
|
||||||
set(value: T, opts?: Options<T>): Promise<void>;
|
* @returns {any}
|
||||||
|
*/
|
||||||
update(updater: Updater<T>, opts?: Options<T>): Promise<void>;
|
function set(new_value, opts) {
|
||||||
|
if (value == null) {
|
||||||
|
store.set((value = new_value));
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
target_value = new_value;
|
||||||
|
let previous_task = task;
|
||||||
|
let started = false;
|
||||||
|
let { delay = 0, duration = 400, easing = linear, interpolate = get_interpolator } = assign(assign({}, defaults), opts);
|
||||||
|
if (duration === 0) {
|
||||||
|
if (previous_task) {
|
||||||
|
previous_task.abort();
|
||||||
|
previous_task = null;
|
||||||
|
}
|
||||||
|
store.set((value = target_value));
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
const start = now() + delay;
|
||||||
|
let fn;
|
||||||
|
task = loop((now) => {
|
||||||
|
if (now < start)
|
||||||
|
return true;
|
||||||
|
if (!started) {
|
||||||
|
fn = interpolate(value, new_value);
|
||||||
|
if (typeof duration === 'function')
|
||||||
|
duration = duration(value, new_value);
|
||||||
|
started = true;
|
||||||
|
}
|
||||||
|
if (previous_task) {
|
||||||
|
previous_task.abort();
|
||||||
|
previous_task = null;
|
||||||
|
}
|
||||||
|
const elapsed = now - start;
|
||||||
|
if (elapsed > duration) {
|
||||||
|
store.set((value = new_value));
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// @ts-ignore
|
||||||
|
store.set((value = fn(easing(elapsed / duration))));
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
return task.promise;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
set,
|
||||||
|
update: (fn, opts) => set(fn(target_value, value), opts),
|
||||||
|
subscribe: store.subscribe
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function tweened<T>(value?: T, defaults: Options<T> = {}): Tweened<T> {
|
|
||||||
const store = writable(value);
|
|
||||||
|
|
||||||
let task: Task;
|
|
||||||
let target_value = value;
|
|
||||||
|
|
||||||
function set(new_value: T, opts?: Options<T>) {
|
|
||||||
if (value == null) {
|
|
||||||
store.set((value = new_value));
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
|
|
||||||
target_value = new_value;
|
|
||||||
|
|
||||||
let previous_task = task;
|
|
||||||
let started = false;
|
|
||||||
|
|
||||||
let {
|
|
||||||
delay = 0,
|
|
||||||
duration = 400,
|
|
||||||
easing = linear,
|
|
||||||
interpolate = get_interpolator
|
|
||||||
} = assign(assign({}, defaults), opts);
|
|
||||||
|
|
||||||
if (duration === 0) {
|
|
||||||
if (previous_task) {
|
|
||||||
previous_task.abort();
|
|
||||||
previous_task = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
store.set((value = target_value));
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
|
|
||||||
const start = now() + delay;
|
/**
|
||||||
let fn;
|
* @typedef {(target_value: T, value: T) => T} Updater
|
||||||
|
* @template T
|
||||||
|
*/
|
||||||
|
|
||||||
task = loop((now) => {
|
/** @typedef {Object} Options
|
||||||
if (now < start) return true;
|
* @property {number} [delay]
|
||||||
|
* @property {number|((from:T,to:T)=>number)} [duration]
|
||||||
if (!started) {
|
* @property {(t:number)=>number} [easing]
|
||||||
fn = interpolate(value, new_value);
|
* @property {(a:T,b:T)=>(t:number)=>T} [interpolate]
|
||||||
if (typeof duration === 'function') duration = duration(value, new_value);
|
*/
|
||||||
started = true;
|
/** @typedef {Object} Tweened */
|
||||||
}
|
|
||||||
|
|
||||||
if (previous_task) {
|
|
||||||
previous_task.abort();
|
|
||||||
previous_task = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const elapsed = now - start;
|
|
||||||
|
|
||||||
if (elapsed > <number>duration) {
|
|
||||||
store.set((value = new_value));
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
store.set((value = fn(easing(elapsed / duration))));
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
|
|
||||||
return task.promise;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
set,
|
|
||||||
update: (fn, opts?: Options<T>) => set(fn(target_value, value), opts),
|
|
||||||
subscribe: store.subscribe
|
|
||||||
};
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue