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

added siphon tick

Browse Source
This commit is contained in:
Mashy
2019-06-25 15:30:28 +10:00
parent 40a3b2d162
commit a53b55e7ab
5 changed files with 193 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/anims/chaos.jsx
+1 -1
View File
@@ -89,7 +89,7 @@ class AttackCharge extends Component {
translateY: 0,
translateX: 0,
loop: false,
duration: (duration * 2 / 3),
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({
client/src/components/anims/siphon.tick.jsx
+110
View File
@@ -0,0 +1,110 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
function projectile(x, y, radius, colour) {
return (
<circle
cx={x}
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="0.1"
stroke={colour}
id="projectile"
/>
);
}
class SiphonTick extends Component {
constructor(props) {
super();
this.team = props.team;
// this.colour = props.colour;
this.colour = '#3498db';
const points = new Array(15).fill(0);
this.charges = points.map(() => projectile(150, 150, 7, '#1FF01F'));
}
render() {
return (
<svg
class={'skill-anim'}
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<circle id="siphon" r="20" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#3498db;stop-opacity:0.4" />
<stop offset="100%" style={'stop-color:#1FF01F;stop-opacity:1'} />
</radialGradient>
</defs>
<filter id="explosion">
<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>
{this.charges}
</svg>
);
}
componentDidMount() {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 90,
});
} else {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 270,
});
}
anime.set('#projectile', {
cx: 150,
cy: 150,
});
anime.set('#siphon', {
r: '80',
stroke: '#3498db',
});
anime({
targets: '#siphon',
keyframes: [
{ r: '50', stroke: '#3498db' },
{ r: '20', stroke: '#3498db' },
{ r: '0', stroke: '#3498db' },
],
duration: duration * 2 / 3,
easing: 'easeInCubic',
});
const projectiles = document.querySelectorAll('#projectile');
projectiles.forEach(proj => {
anime({
targets: proj,
cx: Math.random() * 250 + 25,
cy: Math.random() * 200 - 100,
delay: (Math.random() * duration * 1 / 2),
duration,
easing: 'easeInQuad',
});
});
}
}
module.exports = SiphonTick;
client/src/components/anims/test.jsx
+41 -56
View File
@@ -15,27 +15,21 @@ function projectile(x, y, radius, colour) {
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="2"
stroke-width="0.1"
stroke={colour}
id="projectile"
/>
);
}
function arc() {
return (
<circle id="siphon" r="140" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>
);
}
class AttackCharge extends Component {
constructor(props) {
super();
this.team = props.team;
// this.colour = props.colour;
this.colour = '#c5a443';
const points = new Array(30).fill(0);
this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F'));
this.colour = '#3498db';
const points = new Array(15).fill(0);
this.charges = points.map(() => projectile(150, 150, 7, '#1FF01F'));
}
render() {
@@ -49,78 +43,69 @@ class AttackCharge extends Component {
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
{arc()}
<circle id="siphon" r="20" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#3498db;stop-opacity:0.4" />
<stop offset="100%" style={'stop-color:#1FF01F;stop-opacity:1'} />
</radialGradient>
</defs>
<filter id="explosion">
<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>
{this.charges}
</svg>
);
}
componentDidMount() {
/* if (!this.props.team) {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 90,
rotate: Math.random() * 45 + 90,
});
} else {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 270,
rotate: Math.random() * 45 + 270,
});
}
anime.set('.skill-anim', {
translateY: -400,
translateX: 0,
anime.set('#projectile', {
cx: 150,
cy: 150,
});
anime.set('#explosion feDisplacementMap', {
scale: 100,
anime.set('#siphon', {
r: '80',
stroke: '#3498db',
});
anime({
targets: '.skill-anim',
translateY: 0,
translateX: 0,
loop: false,
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({
targets: '#explosion feDisplacementMap',
scale: 10000,
loop: false,
delay: (duration * 1 / 2),
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({
targets: '#sword',
fill: '#1FF01F',
stroke: '#1FF01F',
delay: (duration * 3 / 4),
targets: '#siphon',
keyframes: [
{ r: '50', stroke: '#3498db' },
{ r: '20', stroke: '#3498db' },
{ r: '0', stroke: '#3498db' },
],
duration: duration * 2 / 3,
easing: 'easeInCubic',
});
const projectiles = document.querySelectorAll('#projectile');
projectiles.forEach(proj => {
anime({
targets: proj,
cx: Math.random() * 250 + 25,
cy: Math.random() * 200 - 100,
delay: (duration * 1 / 3),
duration: (duration * 2 / 3),
delay: (Math.random() * duration * 1 / 2),
duration,
easing: 'easeInQuad',
});
});
*/
const siphon = document.querySelectorAll('#siphon');
anime({
targets: siphon,
keyframes: [
{ r: '110', stroke: '#1FF01F' },
{ r: '80', stroke: '#1FF01F' },
{ r: '50', stroke: '#3498db' },
{ r: '20', stroke: '#3498db' },
],
duration,
easing: 'easeInCubic',
loop: true,
});
}
}