ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

decay

Browse Source
This commit is contained in:
ntr 2019-07-01 14:54:35 +10:00
parent beb40da7fe
commit c7120d795f
1 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
client/src/components/anims/decay.jsx Normal file
View File

@ -0,0 +1,68 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Decay extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
id='decay'
class="skill-animation blue"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300">
<g>
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#decay'],
opacity: 1,
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
}));
this.animations.push(anime({
targets: ['#decay rect'],
transform: () => `translate(${anime.random(-100, 100)} ${anime.random(-100, 100)}) rotate(${anime.random(-15, 15)})`,
opacity: 0,
easing: 'linear',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.START_SKILL,
}));
}
// this is necessary because
// skipping / timing / unmounting race conditions
// can cause the animations to cut short, this will ensure the values are reset
// because preact will recycle all these components
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
}
module.exports = Decay;