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

hybrid

Browse Source
This commit is contained in:
ntr 2019-07-02 23:36:22 +10:00
parent 0938187f7b
commit da80cac15c
2 changed files with 100 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

@ -18,6 +18,7 @@ const Haste = require('./anims/haste');
const Stun = require('./anims/stun');
const Heal = require('./anims/heal');
const Hex = require('./anims/hex');
const Hybrid = require('./anims/hybrid');
const Strike = require('./anims/strike');
const Parry = require('./anims/parry');
const Purify = require('./anims/purify');
@ -117,7 +118,7 @@ function animations(props) {
case 'Triage': return <Triage />;
case 'TriageTick': return false;
case 'Scatter': return false;
case 'Hybrid': return false;
case 'Hybrid': return <Hybrid />;
case 'Taunt': return false;
// Debuff base

98
client/src/components/anims/hybrid.jsx Normal file
View File

@ -0,0 +1,98 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES, COLOURS } = require('../../constants');
class Hybrid extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
class='skill-animation'
id='hybrid'
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300">
<defs>
<filter id="hybridFilter">
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9"
result="cutoff"/>
<feComposite operator="atop" in="SourceGraphic" in2="cutoff"/>
</filter>
</defs>
<g filter="url(#hybridFilter)">
<circle
class="green"
cx='50'
cy='150'
r='10'
fill={COLOURS.GREEN}
stroke="none"
/>
<circle
class="bluewhite"
cx='150'
cy='50'
r='10'
fill={COLOURS.BLUE}
stroke="none"
/>
<circle
class="bluewhite"
cx='150'
cy='50'
r='7'
fill={COLOURS.WHITE}
stroke="none"
/>
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#hybrid'],
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 },
],
transform: {
value: ['rotate(0)', 'rotate(360)'],
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
direction: 'alternate',
},
easing: 'easeInOutSine',
}));
this.animations.push(anime({
targets: ['#hybrid circle.green'],
cx: [50, 250, 50, 250],
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
easing: 'easeInOutSine',
loop: true,
}));
this.animations.push(anime({
targets: ['#hybrid circle.bluewhite'],
cy: [50, 250, 50, 250],
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
easing: 'easeInOutSine',
loop: true,
}));
}
}
module.exports = Hybrid;