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

trim slay anim

Browse Source
This commit is contained in:
ntr 2019-12-20 11:54:12 +10:00
parent 49bf35970b
commit 90a1e9577a
1 changed files with 25 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
client/src/components/anims/slay.jsx
View File

@ -1,34 +1,17 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const times = require('lodash/times');
const { TIMES } = require('../../constants');
function projectile(x, y, radius, colour) {
return (
<circle
cx={x}
cy={y}
stroke="none"
r={radius}
fill={colour}
/>
);
}
function sword(colour) {
return (
<polygon points='150,150 100,75, 150,300, 200,75' stroke="none" fill={colour} id="sword" filter="url(#slayFilter)"></polygon>
);
}
const GREEN = '#1FF01F';
const RED = '#a52a2a';
class Slay extends Component {
constructor() {
super();
this.animations = [];
this.colour = '#a52a2a';
const points = new Array(30).fill(0);
this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F'));
}
render() {
@ -39,13 +22,16 @@ class Slay extends Component {
id="slay"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300">
<filter id="slayFilter">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{sword(this.colour)}
{this.charges}
{times(10, () => (
<ellipse
cx={anime.random(100, 200)}
cy={anime.random(-50, -25)}
stroke="none"
rx={anime.random(3, 7)}
ry={7}
fill={RED}
/>
))}
</svg>
);
}
@ -67,58 +53,31 @@ class Slay extends Component {
rotate,
});
anime.set('#slay', {
translateY: -1 * (window.innerHeight) * 0.35,
translateX: 0,
});
anime.set('#slayFilter feDisplacementMap', {
scale: 0,
});
anime.set('#sword', {
fill: this.colour,
opacity: 1,
});
anime.set('#slay ellipse',{
fill: RED,
})
this.animations.push(anime({
targets: '#slay',
opacity: [
{ value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
],
translateY: 0,
translateX: 0,
loop: false,
easing: 'easeInQuad',
}));
this.animations.push(anime({
targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'],
baseFrequency: 10,
scale: 100,
delay: TIMES.TARGET_DURATION_MS * 0.6,
targets: ['#slay ellipse'],
cx: 150,
cy: 325,
delay: TIMES.TARGET_DURATION_MS * 0.2,
duration: TIMES.TARGET_DURATION_MS * 0.3,
easing: 'easeInQuad',
easing: 'easeOutQuad',
direction: 'alternate',
}));
this.animations.push(anime({
targets: '#sword',
opacity: 0,
delay: TIMES.TARGET_DURATION_MS * 0.9,
}));
const projectiles = document.querySelectorAll('#slay circle');
projectiles.forEach(proj => {
this.animations.push(anime({
targets: proj,
cx: Math.random() * 250 + 25,
cy: Math.random() * 200 - 100,
delay: TIMES.TARGET_DURATION_MS * 0.7,
duration: TIMES.TARGET_DURATION_MS * 0.3,
easing: 'easeInQuad',
}));
});
setTimeout(() => anime.set('#slay ellipse',{
fill: GREEN,
}), TIMES.TARGET_DURATION_MS * 0.5);
}
componentWillUnmount() {