cha0s/avocado-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: all for nothing, web anims suck

Browse Source
This commit is contained in:
cha0s 2019-04-24 03:27:19 -05:00
parent 177b719ef4
commit dd6d045bf0
2 changed files with 28 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/graphics/proton/text-node-renderer.js
View File

@ -10,13 +10,23 @@ export class TextNode {
this.text = text;
}
applyCssRule(rule) {
for (const attribute in rule) {
const value = rule[attribute];
this.div.style[attribute] = value;
}
}
copyFrom(other) {
this.span.className = other.spanClassName();
this.span.textContent = other.text;
this.span.style.fontSize = `${other.sizeInPx()}px`;
}
createDom() {
const div = window.document.createElement('div');
div.className = 'particle';
const span = window.document.createElement('span');
span.className = this.spanClassName();
span.textContent = this.text;
span.style.fontSize = `${this.sizeInPx()}px`;
this.span = span;
div.appendChild(span);
this.div = div;
@ -30,7 +40,7 @@ export class TextNode {
return 'text';
}
particleStateToCssRules(particle) {
particleStateToCssRule(particle) {
const color = particle.color;
// Position.
const transforms = [];
@ -120,9 +130,6 @@ export class TextNodeRenderer extends Proton.BaseRender {
const target = this.constructor.pullFromFreeList();
if (target) {
particle.target = target;
particle.target.span.className = particle.body.spanClassName();
particle.target.span.textContent = particle.body.text;
particle.target.span.style.fontSize = `${particle.body.sizeInPx()}px`;
particle.target.div.style.opacity = 1;
}
else {
@ -132,6 +139,7 @@ export class TextNodeRenderer extends Proton.BaseRender {
this.parent.appendChild(particle.target.div);
}
}
particle.target.copyFrom(particle.body);
// Queue if we don't have a parent yet.
if (!this.parent) {
this.queued.push(particle.target);
@ -142,38 +150,20 @@ export class TextNodeRenderer extends Proton.BaseRender {
}
this.queued = [];
}
// Simulate the particle in discrete steps to build keyframes for
// animation.
const life = particle.life;
particle.life = life * 1.01;
const stepsPerSec = 10;
let stepCount = life * stepsPerSec;
const keyframes = [];
const damping = 1 - .006;
const time = 1 / stepsPerSec;
while (stepCount--) {
const keyframe = particle.target.particleStateToCssRules(
particle,
);
particle.update(time, 0);
Proton.integrator.integrate(particle, time, damping);
keyframes.push(keyframe);
}
particle.life = Infinity;
// Start animation.
const animation = particle.target.div.animate(keyframes, {
duration: life * 1000,
});
animation.addEventListener('finish', () => {
particle.dead = true;
particle.target.div.style.opacity = 0;
this.constructor.pushToFreeList(particle.target);
particle.target = undefined;
});
const rule = particle.target.particleStateToCssRule(particle);
particle.target.applyCssRule(rule);
}
onParticleUpdate(particle) {}
onParticleUpdate(particle) {
const rule = particle.target.particleStateToCssRule(particle);
particle.target.applyCssRule(rule);
}
onParticleDead(particle) {}
onParticleDead(particle) {
particle.target.div.style.opacity = 0;
this.constructor.pushToFreeList(particle.target);
particle.target = undefined;
}
}

3
packages/graphics/traits/emitter.trait.js
View File

@ -54,7 +54,7 @@ export class Emitter extends decorate(Trait) {
}
}
tick(elapsed) {
renderTick(elapsed) {
for (const key in this.emitters) {
const emitter = this.emitters[key];
emitter.tick(elapsed);
@ -62,4 +62,3 @@ export class Emitter extends decorate(Trait) {
}
}