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

blast anim, improved random point util

Browse Source
This commit is contained in:
Mashy
2019-06-20 16:25:03 +10:00
parent d232402c49
commit bd750be110
5 changed files with 168 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/anims/attack.charge.jsx
+1 -1
View File
@@ -11,7 +11,7 @@ class AttackCharge extends Component {
super();
this.team = props.team;
this.colour = props.colour;
const points = randomPoints(7, 50, 300, 400);
const points = randomPoints(7, 50, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => charge(coord[0], coord[1], 6, this.colour));
}
client/src/components/anims/blast.jsx
+90
View File
@@ -0,0 +1,90 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
function projectile(x, y, radius, colour) {
return (
<circle
cx={x}
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="2"
stroke={colour}
id="projectile"
filter="url(#explosion)"
/>
);
}
class AttackCharge extends Component {
constructor(props) {
super();
this.team = props.team;
// this.colour = props.colour;
this.colour = '#00aabb';
const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => projectile(coord[0], coord[1], 20, this.colour));
}
render() {
return (
<svg
class={'skill-anim'}
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
// {this.charges}
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.6" />
<stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
</radialGradient>
</defs>
<filter id="explosion">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{this.charges}
</svg>
);
}
componentDidMount() {
anime.set('.skill-anim', {
rotate: 90,
translateY: -200,
translateX: 0,
});
anime.set('#explosion feDisplacementMap', {
scale: 1,
});
anime({
targets: '.skill-anim',
translateY: 0,
translateX: 0,
loop: false,
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({
targets: '#explosion feDisplacementMap',
scale: 100,
loop: false,
duration,
easing: 'easeInQuad',
});
}
}
module.exports = AttackCharge;
client/src/components/anims/test.jsx
+60 -33
View File
@@ -2,19 +2,35 @@ const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const charge = require('../svgs/charge');
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
class Attack extends Component {
function projectile(x, y, radius, colour) {
return (
<circle
cx={x}
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="2"
stroke={colour}
id="projectile"
filter="url(#explosion)"
/>
);
}
class AttackCharge extends Component {
constructor(props) {
super();
this.props = props;
const points = randomPoints(7, 50, 300, 400);
const length = 6;
this.charges = points.map(coord => charge(coord[0], coord[1], length, '#a52a2a'));
this.team = props.team;
// this.colour = props.colour;
this.colour = '#00aabb';
const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => projectile(coord[0], coord[1], 20, this.colour));
}
render() {
@@ -25,45 +41,56 @@ class Attack extends Component {
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
// {this.charges}
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.6" />
<stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
</radialGradient>
</defs>
<filter id="explosion">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{this.charges}
</svg>
);
}
componentDidMount() {
if (this.props.stage === 'START_SKILL') {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: 180,
});
} else {
anime.set('.skill-anim', {
rotate: 0,
});
}
const charges = document.querySelectorAll('#projectile');
if (!this.team) {
anime.set('.skill-anim', {
rotate: 90,
translateY: -200,
translateX: 0,
});
} else {
anime.set('.skill-anim', {
rotate: 90,
translateY: -200,
translateX: 0,
});
}
if (this.props.stage === 'END_SKILL') {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: 0,
});
} else {
anime.set('.skill-anim', {
rotate: 180,
});
}
}
const stageone = document.querySelectorAll('#charge');
anime({
targets: stageone,
fill: '#a52a2a',
delay: anime.stagger(2),
loop: true,
targets: '.skill-anim',
translateY: 0,
translateX: 0,
loop: false,
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({
targets: '#explosion feDisplacementMap',
scale: 100,
loop: false,
duration,
easing: 'easeInQuad',
});
}
}
module.exports = Attack;
module.exports = AttackCharge;