laser anim for attack and strike
This commit is contained in:
Mashy
parent
bd750be110
commit
d9184dea0a
@ -44,9 +44,9 @@ function animations(props) {
|
||||
} else if (stage === 'END_SKILL') {
|
||||
const skill = removeTier(text);
|
||||
switch (skill) {
|
||||
case 'Attack': return <Attack id={construct.id} stage={stage} team={player}/>;
|
||||
case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
|
||||
case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
|
||||
case 'StrikeI': return <Strike id={construct.id} stage={stage} team={player}/>;
|
||||
case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;
|
||||
default: return text;
|
||||
}
|
||||
}
|
||||
@ -60,13 +60,11 @@ function animations(props) {
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
||||
/* return (
|
||||
/*return (
|
||||
<div class={combatTextClass}>
|
||||
<Test id={construct.id} stage={stage} team={player}/>
|
||||
</div>
|
||||
);
|
||||
*/
|
||||
);*/
|
||||
return (<div> </div>);
|
||||
}
|
||||
|
||||
|
||||
@ -6,17 +6,37 @@ const { TIMES } = require('../../constants');
|
||||
|
||||
const duration = TIMES.START_SKILL;
|
||||
|
||||
|
||||
function laser(dimensions, colour) {
|
||||
const { x, y, length } = dimensions;
|
||||
return (
|
||||
<rect
|
||||
width="18"
|
||||
height={length}
|
||||
x={x}
|
||||
y={y}
|
||||
fill="url(#grad1)"
|
||||
stroke-width="2"
|
||||
stroke={colour}
|
||||
filter="url(#explosion)"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
class Strike extends Component {
|
||||
constructor(props) {
|
||||
super();
|
||||
this.props = props;
|
||||
const points = [];
|
||||
for (let i = 0; i <= 70; i += 1) {
|
||||
const x = Math.floor(300 * Math.random());
|
||||
const y = Math.floor(400 * Math.random());
|
||||
points.push([x, y]);
|
||||
this.circles = points.map((coord, j) => <circle key={j} cx={coord[0]} cy={coord[1]} r="7" stroke="#a52a2a" fill="#a52a2a" />);
|
||||
}
|
||||
this.team = props.team;
|
||||
// this.colour = props.colour;
|
||||
this.colour = props.colour;
|
||||
|
||||
const coord = [0, 100, 200];
|
||||
const points = coord.map(pos => ({
|
||||
x: pos + Math.random() * 80,
|
||||
y: 50 + Math.random() * 100,
|
||||
length: 150 + Math.random() * 100,
|
||||
}));
|
||||
this.charges = points.map(pos => laser(pos, this.colour));
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -27,42 +47,57 @@ class Strike extends Component {
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 300 400">
|
||||
{this.circles}
|
||||
// {this.charges}
|
||||
<defs>
|
||||
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
|
||||
<stop offset="0%" style="stop-color:#dba9a9;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.01" numOctaves="3" result="turbulence"/>
|
||||
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
|
||||
|
||||
</filter>
|
||||
{this.charges}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let y = -100;
|
||||
const daggers = document.querySelectorAll('.skill-anim circle');
|
||||
if (this.props.stage === 'START_SKILL') {
|
||||
if (!this.props.team) {
|
||||
anime.set('.skill-anim', {
|
||||
rotate: 180,
|
||||
rotate: Math.random() * 180 + 90,
|
||||
});
|
||||
} else {
|
||||
anime.set('.skill-anim', {
|
||||
rotate: 0,
|
||||
rotate: Math.random() * 180 + 270,
|
||||
});
|
||||
}
|
||||
}
|
||||
anime.set('.skill-anim', {
|
||||
translateY: -200,
|
||||
translateX: 0,
|
||||
});
|
||||
anime.set('#explosion feDisplacementMap', {
|
||||
scale: 1,
|
||||
});
|
||||
|
||||
|
||||
if (this.props.stage === 'END_SKILL') {
|
||||
if (!this.props.team) {
|
||||
anime.set('.skill-anim', {
|
||||
rotate: 0,
|
||||
});
|
||||
} else {
|
||||
anime.set('.skill-anim', {
|
||||
rotate: 180,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
anime({
|
||||
targets: daggers,
|
||||
cx: 150,
|
||||
cy: y,
|
||||
targets: '.skill-anim',
|
||||
translateY: 0,
|
||||
translateX: 0,
|
||||
loop: false,
|
||||
duration: (duration * 1 / 2),
|
||||
easing: 'easeInQuad',
|
||||
});
|
||||
anime({
|
||||
targets: '#explosion feDisplacementMap',
|
||||
scale: 200,
|
||||
loop: false,
|
||||
delay: (duration * 1 / 4),
|
||||
duration,
|
||||
easing: 'easeInQuad',
|
||||
});
|
||||
|
||||
@ -3,21 +3,21 @@ 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) {
|
||||
function laser(dimensions, colour) {
|
||||
const { x, y, length } = dimensions;
|
||||
return (
|
||||
<circle
|
||||
cx={x}
|
||||
cy={y}
|
||||
r={radius}
|
||||
<rect
|
||||
width="18"
|
||||
height={length}
|
||||
x={x}
|
||||
y={y}
|
||||
fill="url(#grad1)"
|
||||
stroke-width="2"
|
||||
stroke={colour}
|
||||
id="projectile"
|
||||
filter="url(#explosion)"
|
||||
/>
|
||||
);
|
||||
@ -28,9 +28,15 @@ class AttackCharge extends Component {
|
||||
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));
|
||||
this.colour = '#a52a2a';
|
||||
|
||||
const coord = [0, 100, 200];
|
||||
const points = coord.map(pos => ({
|
||||
x: pos + Math.random() * 80,
|
||||
y: 50 + Math.random() * 100,
|
||||
length: 150 + Math.random() * 100,
|
||||
}));
|
||||
this.charges = points.map(pos => laser(pos, this.colour));
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -43,14 +49,14 @@ class AttackCharge extends Component {
|
||||
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" />
|
||||
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
|
||||
<stop offset="0%" style="stop-color:#dba9a9;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"/>
|
||||
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
|
||||
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
|
||||
|
||||
</filter>
|
||||
@ -60,20 +66,14 @@ class AttackCharge extends Component {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
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,
|
||||
anime.set('#explosion feDisplacementMap', {
|
||||
scale: 1,
|
||||
});
|
||||
}
|
||||
|
||||
anime({
|
||||
targets: '.skill-anim',
|
||||
@ -85,8 +85,9 @@ class AttackCharge extends Component {
|
||||
});
|
||||
anime({
|
||||
targets: '#explosion feDisplacementMap',
|
||||
scale: 100,
|
||||
scale: 200,
|
||||
loop: false,
|
||||
delay: (duration * 1 / 4),
|
||||
duration,
|
||||
easing: 'easeInQuad',
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user