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

triagetick

Browse Source
This commit is contained in:
ntr 2019-07-02 23:42:06 +10:00
parent da80cac15c
commit dd3c6dc2a6
3 changed files with 74 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,6 +28,7 @@ const Chaos = require('./anims/chaos');
const Invert = require('./anims/invert');
const Slay = require('./anims/slay');
const Triage = require('./anims/triage');
const TriageTick = require('./anims/triage.tick');
const Siphon = require('./anims/siphon');
const SiphonTick = require('./anims/siphon.tick');
@ -116,7 +117,7 @@ function animations(props) {
case 'Amplify': return <Amplify/>;
case 'Haste': return <Haste />;
case 'Triage': return <Triage />;
case 'TriageTick': return false;
case 'TriageTick': return <TriageTick />;
case 'Scatter': return false;
case 'Hybrid': return <Hybrid />;
case 'Taunt': return false;

9
client/src/components/anims/triage.jsx
View File

@ -57,15 +57,6 @@ class Triage extends Component {
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
targets: ['#triage circle'],
cx: 150,
cy: 200,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
easing: 'easeInOutElastic',
}));
}
}

72
client/src/components/anims/triage.tick.jsx Normal file
View File

@ -0,0 +1,72 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES, COLOURS } = require('../../constants');
const { randomPoints } = require('../../utils');
function projectile(x, y, radius, colour) {
return (
<circle
cx={x}
cy={y}
r={radius}
fill={colour}
stroke="none"
/>
);
}
class TriageTick extends Component {
constructor(props) {
super();
this.team = props.team;
this.animations = [];
const points = randomPoints(15, 10, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => projectile(coord[0], coord[1], 15, COLOURS.GREEN));
}
render() {
return (
<svg
class='skill-animation'
id='triageTick'
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
<defs>
<filter id="triageTickFilter">
<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(#triageTickFilter)">
{this.charges}
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#triageTick'],
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: ['#triageTick circle'],
cx: 150,
cy: 200,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
easing: 'easeInOutElastic',
}));
}
}
module.exports = TriageTick;