msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Convert src/runtime/motion/spring.ts to JavaScript

Browse Source
pull/8569/head
S. Elliott Johnson 3 years ago
parent e798760aa0
commit 4aa44b7298
1 changed files with 152 additions and 143 deletions
Show Stats Download Patch File Download Diff File

295
src/runtime/motion/spring.ts
Unescape View File

@ -1,148 +1,157 @@
import { Readable, writable } from '../store'; import { writable } from '../store';
import { loop, now, Task } from '../internal'; import { loop, now } from '../internal';
import { is_date } from './utils'; import { is_date } from './utils';
/** @param {TickContext<T>} ctx
interface TickContext<T> { * @param {T} last_value
inv_mass: number; * @param {T} current_value
dt: number; * @param {T} target_value
opts: Spring<T>; * @returns {T}
settled: boolean; */
} function tick_spring(ctx, last_value, current_value, target_value) {
if (typeof current_value === 'number' || is_date(current_value)) {
function tick_spring<T>(ctx: TickContext<T>, last_value: T, current_value: T, target_value: T): T { // @ts-ignore
if (typeof current_value === 'number' || is_date(current_value)) { const delta = target_value - current_value;
// @ts-ignore // @ts-ignore
const delta = target_value - current_value; const velocity = (current_value - last_value) / (ctx.dt || 1 / 60); // guard div by 0
// @ts-ignore const spring = ctx.opts.stiffness * delta;
const velocity = (current_value - last_value) / (ctx.dt || 1 / 60); // guard div by 0 const damper = ctx.opts.damping * velocity;
const spring = ctx.opts.stiffness * delta; const acceleration = (spring - damper) * ctx.inv_mass;
const damper = ctx.opts.damping * velocity; const d = (velocity + acceleration) * ctx.dt;
const acceleration = (spring - damper) * ctx.inv_mass; if (Math.abs(d) < ctx.opts.precision && Math.abs(delta) < ctx.opts.precision) {
const d = (velocity + acceleration) * ctx.dt; return target_value; // settled
}
if (Math.abs(d) < ctx.opts.precision && Math.abs(delta) < ctx.opts.precision) { else {
return target_value; // settled ctx.settled = false; // signal loop to keep ticking
} else { // @ts-ignore
ctx.settled = false; // signal loop to keep ticking return is_date(current_value) ? new Date(current_value.getTime() + d) : current_value + d;
// @ts-ignore }
return is_date(current_value) ? new Date(current_value.getTime() + d) : current_value + d; }
} else if (Array.isArray(current_value)) {
} else if (Array.isArray(current_value)) { // @ts-ignore
// @ts-ignore return current_value.map((_, i) => tick_spring(ctx, last_value[i], current_value[i], target_value[i]));
return current_value.map((_, i) => }
tick_spring(ctx, last_value[i], current_value[i], target_value[i]) else if (typeof current_value === 'object') {
); const next_value = {};
} else if (typeof current_value === 'object') { for (const k in current_value) {
const next_value = {}; // @ts-ignore
for (const k in current_value) { next_value[k] = tick_spring(ctx, last_value[k], current_value[k], target_value[k]);
// @ts-ignore }
next_value[k] = tick_spring(ctx, last_value[k], current_value[k], target_value[k]); // @ts-ignore
} return next_value;
// @ts-ignore }
return next_value; else {
} else { throw new Error(`Cannot spring ${typeof current_value} values`);
throw new Error(`Cannot spring ${typeof current_value} values`); }
}
}
interface SpringOpts {
stiffness?: number;
damping?: number;
precision?: number;
} }
/** @param {T} value
interface SpringUpdateOpts { * @param {SpringOpts} opts
hard?: any; * @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/spring.ts-to-jsdoc").Spring<T>}
soft?: string | number | boolean; */
} export function spring(value, opts = {}) {
const store = writable(value);
type Updater<T> = (target_value: T, value: T) => T; const { stiffness = 0.15, damping = 0.8, precision = 0.01 } = opts;
/** @type {number} */
export interface Spring<T> extends Readable<T> { let last_time;
set: (new_value: T, opts?: SpringUpdateOpts) => Promise<void>; /** @type {Task} */
update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>; let task;
precision: number; /** @type {object} */
damping: number; let current_token;
stiffness: number; /** @type {T} */
let last_value = value;
/** @type {T} */
let target_value = value;
let inv_mass = 1;
let inv_mass_recovery_rate = 0;
let cancel_task = false;
/** @param {T} new_value
* @param {SpringUpdateOpts} opts
* @returns {Promise<void>}
*/
function set(new_value, opts = {}) {
target_value = new_value;
const token = (current_token = {});
if (value == null || opts.hard || (spring.stiffness >= 1 && spring.damping >= 1)) {
cancel_task = true; // cancel any running animation
last_time = now();
last_value = new_value;
store.set((value = target_value));
return Promise.resolve();
}
else if (opts.soft) {
const rate = opts.soft === true ? 0.5 : +opts.soft;
inv_mass_recovery_rate = 1 / (rate * 60);
inv_mass = 0; // infinite mass, unaffected by spring forces
}
if (!task) {
last_time = now();
cancel_task = false;
task = loop((now) => {
if (cancel_task) {
cancel_task = false;
task = null;
return false;
}
inv_mass = Math.min(inv_mass + inv_mass_recovery_rate, 1);
const ctx = {
inv_mass,
opts: spring,
settled: true,
dt: ((now - last_time) * 60) / 1000
};
const next_value = tick_spring(ctx, last_value, value, target_value);
last_time = now;
last_value = value;
store.set((value = next_value));
if (ctx.settled) {
task = null;
}
return !ctx.settled;
});
}
return new Promise((fulfil) => {
task.promise.then(() => {
if (token === current_token)
fulfil();
});
});
}
/** @type {Spring<T>} */
const spring = {
set,
update: (fn, opts) => set(fn(target_value, value), opts),
subscribe: store.subscribe,
stiffness,
damping,
precision
};
return spring;
} }
export function spring<T = any>(value?: T, opts: SpringOpts = {}): Spring<T> {
const store = writable(value);
const { stiffness = 0.15, damping = 0.8, precision = 0.01 } = opts;
let last_time: number;
let task: Task;
let current_token: object;
let last_value: T = value;
let target_value: T = value;
let inv_mass = 1;
let inv_mass_recovery_rate = 0;
let cancel_task = false;
function set(new_value: T, opts: SpringUpdateOpts = {}): Promise<void> { /**
target_value = new_value; * @typedef {(target_value: T, value: T) => T} Updater
const token = (current_token = {}); * @template T
*/
if (value == null || opts.hard || (spring.stiffness >= 1 && spring.damping >= 1)) {
cancel_task = true; // cancel any running animation /** @typedef {Object} TickContext
last_time = now(); * @property {number} inv_mass
last_value = new_value; * @property {number} dt
store.set((value = target_value)); * @property {Spring<T>} opts
return Promise.resolve(); * @property {boolean} settled
} else if (opts.soft) { */
const rate = opts.soft === true ? 0.5 : +opts.soft; /** @typedef {Object} SpringOpts
inv_mass_recovery_rate = 1 / (rate * 60); * @property {number} [stiffness]
inv_mass = 0; // infinite mass, unaffected by spring forces * @property {number} [damping]
} * @property {number} [precision]
*/
if (!task) { /** @typedef {Object} SpringUpdateOpts
last_time = now(); * @property {any} [hard]
cancel_task = false; * @property {string|number|boolean} [soft]
*/
task = loop((now) => { /** @typedef {Object} Spring
if (cancel_task) { * @property {(new_value:T,opts?:SpringUpdateOpts)=>Promise<void>} set
cancel_task = false; * @property {(fn:Updater<T>,opts?:SpringUpdateOpts)=>Promise<void>} update
task = null; * @property {number} precision
return false; * @property {number} damping
} * @property {number} stiffness
*/
inv_mass = Math.min(inv_mass + inv_mass_recovery_rate, 1);
const ctx: TickContext<T> = {
inv_mass,
opts: spring,
settled: true, // tick_spring may signal false
dt: ((now - last_time) * 60) / 1000
};
const next_value = tick_spring(ctx, last_value, value, target_value);
last_time = now;
last_value = value;
store.set((value = next_value));
if (ctx.settled) {
task = null;
}
return !ctx.settled;
});
}
return new Promise((fulfil) => {
task.promise.then(() => {
if (token === current_token) fulfil();
});
});
}
const spring: Spring<T> = {
set,
update: (fn, opts: SpringUpdateOpts) => set(fn(target_value, value), opts),
subscribe: store.subscribe,
stiffness,
damping,
precision
};
return spring;
}
Write Preview
Loading…
Cancel
Save