fix hex
This commit is contained in:
ntr
parent
3eb55463e6
commit
189cbea0bf
@ -24,6 +24,7 @@ const Reflect = require('./anims/reflect');
|
||||
const Chaos = require('./anims/chaos');
|
||||
const Invert = require('./anims/invert');
|
||||
const Slay = require('./anims/slay');
|
||||
const Triage = require('./anims/triage');
|
||||
const Siphon = require('./anims/siphon');
|
||||
const SiphonTick = require('./anims/siphon.tick');
|
||||
|
||||
@ -118,6 +119,7 @@ function animations(props) {
|
||||
case 'Parry': return <Parry team={player} />;
|
||||
case 'Recharge': return <Recharge team={player} />;
|
||||
case 'Reflect': return <Reflect team={player} />;
|
||||
case 'Triage': return <Triage />;
|
||||
case 'Invert': return <Invert id={construct.id} />;
|
||||
case 'Siphon': return <Siphon id={construct.id} team={player} />;
|
||||
case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />;
|
||||
|
||||
@ -2,23 +2,17 @@ const preact = require('preact');
|
||||
const { Component } = require('preact');
|
||||
const anime = require('animejs').default;
|
||||
|
||||
const { TIMES } = require('../../constants');
|
||||
const { TIMES, COLOURS } = require('../../constants');
|
||||
const { randomPoints } = require('../../utils');
|
||||
|
||||
const duration = TIMES.TARGET_DURATION_MS;
|
||||
|
||||
|
||||
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)"
|
||||
fill={colour}
|
||||
stroke="none"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -28,75 +22,60 @@ class Heal extends Component {
|
||||
super();
|
||||
this.team = props.team;
|
||||
this.animations = [];
|
||||
const points = randomPoints(15, 30, { x: 0, y: 0, width: 300, height: 400 });
|
||||
this.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#1FF01F'));
|
||||
const points = randomPoints(30, 10, { x: 0, y: 0, width: 300, height: 400 });
|
||||
this.charges = points.map(coord => projectile(coord[0], coord[1], 12, COLOURS.GREEN));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<svg
|
||||
class={'skill-anim'}
|
||||
class='skill-animation'
|
||||
id='heal'
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 300 400">
|
||||
<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:#1FF01F;stop-opacity:1'} />
|
||||
</radialGradient>
|
||||
<filter id="healFilter">
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<feColorMatrix mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="cutoff"/>
|
||||
<feComposite operator="atop" in="SourceGraphic" in2="cutoff"/>
|
||||
</filter>
|
||||
</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}
|
||||
<g filter="url(#healFilter)">
|
||||
{this.charges}
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
anime.set('#explosion feDisplacementMap', {
|
||||
scale: 100,
|
||||
});
|
||||
anime.set('.skill-anim', {
|
||||
opacity: 0,
|
||||
});
|
||||
|
||||
this.animations.push(anime({
|
||||
targets: '.skill-anim',
|
||||
targets: ['#heal'],
|
||||
opacity: [
|
||||
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
|
||||
{ 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',
|
||||
}));
|
||||
|
||||
// this.animations.push(anime({
|
||||
// targets: '.skill-anim',
|
||||
// translateY: 0,
|
||||
// translateX: 0,
|
||||
// loop: false,
|
||||
// delay: TIMES.TARGET_DELAY_MS,
|
||||
// duration: (duration * 1 / 2),
|
||||
// easing: 'easeInQuad',
|
||||
// }));
|
||||
|
||||
this.animations.push(anime({
|
||||
targets: '.skill-anim',
|
||||
translateY: 0,
|
||||
translateX: 0,
|
||||
loop: false,
|
||||
delay: TIMES.TARGET_DELAY_MS,
|
||||
duration: (duration * 1 / 2),
|
||||
easing: 'easeInQuad',
|
||||
}));
|
||||
this.animations.push(anime({
|
||||
targets: '#explosion feDisplacementMap',
|
||||
scale: 1,
|
||||
loop: false,
|
||||
delay: TIMES.TARGET_DELAY_MS,
|
||||
duration: (duration * 1 / 2),
|
||||
easing: 'easeInQuad',
|
||||
}));
|
||||
this.animations.push(anime({
|
||||
targets: '#projectile',
|
||||
targets: ['#heal circle'],
|
||||
cx: 150,
|
||||
cy: 200,
|
||||
delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
|
||||
duration: (duration * 1 / 2),
|
||||
easing: 'easeInQuad',
|
||||
delay: TIMES.TARGET_DELAY_MS,
|
||||
duration: TIMES.TARGET_DURATION_MS * 1.5,
|
||||
easing: 'easeInOutSine',
|
||||
direction: 'reverse',
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,8 +59,8 @@ class Hex extends Component {
|
||||
points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788',
|
||||
easing: 'easeOutExpo',
|
||||
|
||||
delay: TIMES.TARGET_MAIN_DELAY,
|
||||
duration: TIMES.TARGET_MAIN_DURATION,
|
||||
delay: TIMES.TARGET_DELAY_MS,
|
||||
duration: TIMES.TARGET_DURATION_MS,
|
||||
}));
|
||||
|
||||
this.animations.push(anime({
|
||||
@ -69,8 +69,8 @@ class Hex extends Component {
|
||||
easing: 'easeInOutSine',
|
||||
direction: 'alternate',
|
||||
|
||||
delay: TIMES.TARGET_MAIN_DELAY,
|
||||
duration: TIMES.TARGET_MAIN_DURATION,
|
||||
delay: TIMES.TARGET_DELAY_MS,
|
||||
duration: TIMES.TARGET_DURATION_MS,
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user