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

add silence

Browse Source
This commit is contained in:
Mashy 2019-07-05 17:45:54 +10:00
parent 020ca2445b
commit 548b88241f
2 changed files with 95 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/animations.jsx
View File

@ -30,6 +30,7 @@ const Recharge = require('./anims/recharge');
const Refl = require('./anims/reflect');
const Restrict = require('./anims/restrict');
const Ruin = require('./anims/ruin');
const Silence = require('./anims/silence');
const Siphon = require('./anims/siphon');
const SiphonTick = require('./anims/siphon.tick');
const Slay = require('./anims/slay');
@ -136,7 +137,7 @@ function animations(props) {
case 'DecayTick': return false;
case 'Invert': return <Invert id={construct.id} />;
case 'Purge': return false;
case 'Silence': return false;
case 'Silence': return <Silence />;
case 'Restrict': return <Restrict />;
// Stun Base

93
client/src/components/anims/silence.jsx Normal file
View File

@ -0,0 +1,93 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Silence extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
class='skill-animation blue'
version="1.1"
id="silence"
xmlns="http://www.w3.org/2000/svg"
style={{ transform: 'scale(3)' }}
viewBox="0 0 128 128">
<defs>
<filter id="silenceFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g filter="url(#silenceFilter)" stroke-width="4px" >
<path id="sOne" d="M 8 124 L 8 8" />
<path id="sTwo" d="M 124 8 L 124 124" />
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#silence'],
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
targets: ['#silence'],
scale: {
value: 1,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS * 0.2,
easing: 'easeInExpo',
},
delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1,
duration: TIMES.TARGET_DURATION_MS * 0.2,
easing: 'easeOutSine',
}));
this.animations.push(anime({
targets: ['#sOne'],
d: 'M 124 8 L 8 124',
delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
duration: TIMES.TARGET_DURATION_MS * 0.4,
easing: 'easeOutSine',
}));
this.animations.push(anime({
targets: ['#sTwo'],
d: 'M 124 124 L 8 8',
delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
duration: TIMES.TARGET_DURATION_MS * 0.4,
easing: 'easeOutSine',
}));
}
// 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 = Silence;