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

Lint and format src/runtime/motion/spring.js

Browse Source
pull/8569/head
S. Elliott Johnson 3 years ago
parent 5f020f7638
commit 739141f2a2
1 changed files with 112 additions and 117 deletions
Show Stats Download Patch File Download Diff File

229
src/runtime/motion/spring.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save