From 35aee272d64e40e7e369555f4246d41192e62f70 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Tue, 1 Jan 2019 02:14:59 -0500 Subject: [PATCH] start simplifying animations --- src/internal/animations.js | 86 +++++++++++++++++-------------------- src/internal/loop.js | 2 +- src/internal/transitions.js | 4 +- 3 files changed, 42 insertions(+), 50 deletions(-) diff --git a/src/internal/animations.js b/src/internal/animations.js index 2936b67f81..b8ed7407ef 100644 --- a/src/internal/animations.js +++ b/src/internal/animations.js @@ -13,8 +13,8 @@ export function wrapAnimation(node, from, fn, params) { const duration = 'duration' in info ? info.duration : 300; const delay = 'delay' in info ? info.delay : 0; const ease = info.easing || linear; - const start = window.performance.now() + delay; - const end = start + duration; + const start_time = window.performance.now() + delay; + const end = start_time + duration; const program = { a: 0, @@ -22,66 +22,59 @@ export function wrapAnimation(node, from, fn, params) { b: 1, delta: 1, duration, - start, + start: start_time, end }; const cssText = node.style.cssText; - const animation = { - pending: delay ? program : null, - program: delay ? null : program, - running: true, + function start() { + if (info.css) { + if (delay) node.style.cssText = cssText; - start() { - if (info.css) { - if (delay) node.style.cssText = cssText; + program.name = create_rule(program, ease, info.css); - program.name = create_rule(program, ease, info.css); - - node.style.animation = (node.style.animation || '') - .split(', ') - .filter(anim => anim && (program.delta < 0 || !/__svelte/.test(anim))) - .concat(`${program.name} ${program.duration}ms linear 1 forwards`) - .join(', '); - } + node.style.animation = (node.style.animation || '') + .split(', ') + .filter(anim => anim && (program.delta < 0 || !/__svelte/.test(anim))) + .concat(`${program.name} ${program.duration}ms linear 1 forwards`) + .join(', '); + } - animation.program = program; - animation.pending = null; - }, + running_program = program; + pending_program = null; + } - update: now => { - const p = now - program.start; - const t = program.a + program.delta * ease(p / program.duration); - if (info.tick) info.tick(t, 1 - t); - }, + let running = true; + let pending_program = delay ? program : null; + let running_program = delay ? null : program; - done() { - if (info.tick) info.tick(1, 0); - animation.stop(); - }, + function stop() { + if (info.css) delete_rule(node, program.name); + running = false; + } - stop() { - if (info.css) delete_rule(node, program.name); - animation.running = false; + const { abort, promise } = loop(now => { + if (pending_program && now >= pending_program.start) { + start(); } - }; - - const { abort, promise } = loop(() => { - const now = window.performance.now(); - if (animation.program && now >= animation.program.end) { - animation.done(); + if (running_program && now >= running_program.end) { + if (info.tick) info.tick(1, 0); + stop(); } - if (animation.pending && now >= animation.pending.start) { - animation.start(animation.pending); + if (!running) { + return false; } - if (animation.running) { - animation.update(now); - return true; + if (running_program) { + const p = now - program.start; + const t = program.a + program.delta * ease(p / program.duration); + if (info.tick) info.tick(t, 1 - t); } + + return true; }); if (info.tick) info.tick(0, 1); @@ -89,10 +82,11 @@ export function wrapAnimation(node, from, fn, params) { if (delay) { if (info.css) node.style.cssText += info.css(0, 1); } else { - animation.start(); + start(); } - return animation; + // TODO just return the function + return { stop }; } export function fixPosition(node) { diff --git a/src/internal/loop.js b/src/internal/loop.js index 602a910cba..fd75f9b1a6 100644 --- a/src/internal/loop.js +++ b/src/internal/loop.js @@ -3,7 +3,7 @@ let running = false; function run_tasks() { tasks.forEach(task => { - if (!task[0]()) { + if (!task[0](window.performance.now())) { tasks.delete(task); task[1](); } diff --git a/src/internal/transitions.js b/src/internal/transitions.js index 9495e20fdc..839801ee4b 100644 --- a/src/internal/transitions.js +++ b/src/internal/transitions.js @@ -61,9 +61,7 @@ export function wrapTransition(component, node, fn, params, intro) { if (!this.running) { this.running = true; - const { abort, promise } = loop(() => { - const now = window.performance.now(); - + const { abort, promise } = loop(now => { if (this.program && now >= this.program.end) { this.done(); }