start simplifying animations

pull/1937/head
Richard Harris 7 years ago
parent 4f5f187cbe
commit 35aee272d6

@ -13,8 +13,8 @@ export function wrapAnimation(node, from, fn, params) {
const duration = 'duration' in info ? info.duration : 300; const duration = 'duration' in info ? info.duration : 300;
const delay = 'delay' in info ? info.delay : 0; const delay = 'delay' in info ? info.delay : 0;
const ease = info.easing || linear; const ease = info.easing || linear;
const start = window.performance.now() + delay; const start_time = window.performance.now() + delay;
const end = start + duration; const end = start_time + duration;
const program = { const program = {
a: 0, a: 0,
@ -22,18 +22,13 @@ export function wrapAnimation(node, from, fn, params) {
b: 1, b: 1,
delta: 1, delta: 1,
duration, duration,
start, start: start_time,
end end
}; };
const cssText = node.style.cssText; const cssText = node.style.cssText;
const animation = { function start() {
pending: delay ? program : null,
program: delay ? null : program,
running: true,
start() {
if (info.css) { if (info.css) {
if (delay) node.style.cssText = cssText; if (delay) node.style.cssText = cssText;
@ -46,42 +41,40 @@ export function wrapAnimation(node, from, fn, params) {
.join(', '); .join(', ');
} }
animation.program = program; running_program = program;
animation.pending = null; 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);
},
done() { let running = true;
if (info.tick) info.tick(1, 0); let pending_program = delay ? program : null;
animation.stop(); let running_program = delay ? null : program;
},
stop() { function stop() {
if (info.css) delete_rule(node, program.name); if (info.css) delete_rule(node, program.name);
animation.running = false; running = false;
} }
};
const { abort, promise } = loop(() => { const { abort, promise } = loop(now => {
const now = window.performance.now(); if (pending_program && now >= pending_program.start) {
start();
}
if (animation.program && now >= animation.program.end) { if (running_program && now >= running_program.end) {
animation.done(); if (info.tick) info.tick(1, 0);
stop();
} }
if (animation.pending && now >= animation.pending.start) { if (!running) {
animation.start(animation.pending); return false;
} }
if (animation.running) { if (running_program) {
animation.update(now); const p = now - program.start;
return true; 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); if (info.tick) info.tick(0, 1);
@ -89,10 +82,11 @@ export function wrapAnimation(node, from, fn, params) {
if (delay) { if (delay) {
if (info.css) node.style.cssText += info.css(0, 1); if (info.css) node.style.cssText += info.css(0, 1);
} else { } else {
animation.start(); start();
} }
return animation; // TODO just return the function
return { stop };
} }
export function fixPosition(node) { export function fixPosition(node) {

@ -3,7 +3,7 @@ let running = false;
function run_tasks() { function run_tasks() {
tasks.forEach(task => { tasks.forEach(task => {
if (!task[0]()) { if (!task[0](window.performance.now())) {
tasks.delete(task); tasks.delete(task);
task[1](); task[1]();
} }

@ -61,9 +61,7 @@ export function wrapTransition(component, node, fn, params, intro) {
if (!this.running) { if (!this.running) {
this.running = true; this.running = true;
const { abort, promise } = loop(() => { const { abort, promise } = loop(now => {
const now = window.performance.now();
if (this.program && now >= this.program.end) { if (this.program && now >= this.program.end) {
this.done(); this.done();
} }

Loading…
Cancel
Save