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

strike fixes

Browse Source
This commit is contained in:
Mashy 2019-07-05 18:21:44 +10:00
parent bd104b65b2
commit 47c1cffc7f
2 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/anims/reflect.jsx
View File

@ -4,7 +4,7 @@ const anime = require('animejs').default;
const { TIMES, COLOURS } = require('../../constants'); const { TIMES, COLOURS } = require('../../constants');
class Reflect extends Component { class Refl extends Component {
constructor() { constructor() {
super(); super();
this.animations = []; this.animations = [];
@ -72,4 +72,4 @@ class Reflect extends Component {
} }
} }
module.exports = Reflect; module.exports = Refl;

54
client/src/components/anims/strike.jsx
View File

@ -4,21 +4,18 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants'); const { TIMES } = require('../../constants');
const duration = TIMES.TARGET_DURATION_MS;
function laser(dimensions, colour) { function laser(dimensions, colour) {
const { x, y, length } = dimensions; const { x, y, length } = dimensions;
return ( return (
<rect <rect
width="18" width="14"
height={length} height={length}
x={x} x={x}
y={y} y={y}
fill="url(#grad1)" fill="url(#grad1)"
stroke-width="2" stroke-width="2"
stroke={colour} stroke={colour}
filter="url(#explosion)" filter="url(#strikeFilter)"
/> />
); );
} }
@ -27,14 +24,14 @@ class Strike extends Component {
constructor(props) { constructor(props) {
super(); super();
this.team = props.team; this.team = props.team;
// this.colour = props.colour; this.animations = [];
this.colour = props.colour; this.colour = props.colour;
const coord = [0, 100, 200]; const coord = [0, 50, 100, 150, 200];
const points = coord.map(pos => ({ const points = coord.map(pos => ({
x: pos + Math.random() * 80, x: pos + Math.random() * 40,
y: 50 + Math.random() * 100, y: 50 + Math.random() * 100,
length: 150 + Math.random() * 100, length: 150 + Math.random() * 150,
})); }));
this.charges = points.map(pos => laser(pos, this.colour)); this.charges = points.map(pos => laser(pos, this.colour));
} }
@ -42,9 +39,9 @@ class Strike extends Component {
render() { render() {
return ( return (
<svg <svg
class={'skill-anim'} class={'skill-animation'}
version="1.1" version="1.1"
id="Layer_1" id="strike"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400"> viewBox="0 0 300 400">
// {this.charges} // {this.charges}
@ -54,7 +51,7 @@ class Strike extends Component {
<stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} /> <stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
</radialGradient> </radialGradient>
</defs> </defs>
<filter id="explosion"> <filter id="strikeFilter">
<feGaussianBlur stdDeviation="4"/> <feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/> <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
@ -66,40 +63,55 @@ class Strike extends Component {
} }
componentDidMount() { componentDidMount() {
this.animations.push(anime({
targets: ['#strike'],
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',
}));
if (!this.props.team) { if (!this.props.team) {
anime.set('.skill-anim', { anime.set('#strike', {
rotate: Math.random() * 180 + 90, rotate: Math.random() * 180 + 90,
}); });
} else { } else {
anime.set('.skill-anim', { anime.set('#strike', {
rotate: Math.random() * 180 + 270, rotate: Math.random() * 180 + 270,
}); });
} }
anime.set('.skill-anim', { anime.set('#strike', {
translateY: -200, translateY: -200,
translateX: 0, translateX: 0,
}); });
anime.set('#explosion feDisplacementMap', { anime.set('#strikeFilter feDisplacementMap', {
scale: 1, scale: 1,
}); });
anime({ anime({
targets: '.skill-anim', targets: '#strike',
translateY: 0, translateY: 0,
translateX: 0, translateX: 0,
loop: false, loop: false,
duration: (duration * 1 / 2), delay: TIMES.TARGET_DELAY_MS,
duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
easing: 'easeInQuad', easing: 'easeInQuad',
}); });
anime({ anime({
targets: '#explosion feDisplacementMap', targets: '#strikeFilter feDisplacementMap',
scale: 200, scale: 200,
loop: false, loop: false,
delay: (duration * 1 / 4), delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 4),
duration,
easing: 'easeInQuad', easing: 'easeInQuad',
}); });
} }
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
} }
module.exports = Strike; module.exports = Strike;