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

electrify

Browse Source
This commit is contained in:
ntr 2019-07-02 12:43:22 +10:00
parent a0e3ebafbc
commit fd2fbd58cb
2 changed files with 104 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@ const Buff = require('./anims/buff');
const Debuff = require('./anims/debuff');
const Decay = require('./anims/decay');
const Curse = require('./anims/curse');
const Electrify = require('./anims/electrify');
const Haste = require('./anims/haste');
const Stun = require('./anims/stun');
const Heal = require('./anims/heal');
@ -101,6 +102,7 @@ function animations(props) {
case 'Block': return <Block />;
case 'Buff': return <Buff />;
case 'Curse': return <Curse />;
case 'Electrify': return <Electrify />;
case 'Blast': return <Blast id={construct.id} team={player}/>;
case 'Debuff': return <Debuff />;
case 'Decay': return <Decay />;

102
client/src/components/anims/electrify.jsx Normal file
View File

@ -0,0 +1,102 @@
const preact = require('preact');
const { Component } = require('preact');
const times = require('lodash/times')
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
// shamelessly lifted from teh anime docs
// https://animejs.com/documentation/#svgAttr
class Electrify extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
class='skill-animation blue'
version="1.1"
id="electrify"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128">
<defs>
<filter id="electrifyFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path
class='blue'
filter='url("#electrifyFilter")'
d='M10,64 L10,64 L20,64 L30,64 L40,64 L50,64 L60,64 L70,64 L80,64 L90,64 L100,64 L110,64'
/>
<path
class='white'
filter='url("#electrifyFilter")'
d='M10,64 L10,64 L20,64 L30,64 L40,64 L50,64 L60,64 L70,64 L80,64 L90,64 L100,64 L110,64'
/>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#electrify'],
opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION },
],
easing: 'easeInOutSine',
}));
const path = () => `M10,64
L10,${anime.random(34, 94)}
L20,${anime.random(34, 94)}
L30,${anime.random(34, 94)}
L40,${anime.random(34, 94)}
L50,${anime.random(34, 94)}
L60,${anime.random(34, 94)}
L70,${anime.random(34, 94)}
L80,${anime.random(34, 94)}
L90,${anime.random(34, 94)}
L100,${anime.random(34, 94)}
L110,64
`;
this.animations.push(anime({
targets: ['#electrify path'],
d: times(10, path),
easing: 'easeOutExpo',
loop: true,
duration: TIMES.TARGET_MAIN_DURATION / 5,
}));
this.animations.push(anime({
targets: ['#electrify path.white'],
strokeWidth: [2, 1],
easing: 'easeInOutSine',
direction: 'alternate',
loop: true,
duration: TIMES.TARGET_MAIN_DURATION,
}));
}
// 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 = Electrify;