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

reflect

Browse Source
This commit is contained in:
ntr
2019-07-02 19:27:32 +10:00
parent 8afc760eb3
commit 8263f274bc
4 changed files with 112 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/animations.jsx
+3 -1
View File
@@ -20,6 +20,7 @@ const Hex = require('./anims/hex');
const Strike = require('./anims/strike');
const Parry = require('./anims/parry');
const Recharge = require('./anims/recharge');
const Reflect = require('./anims/reflect');
const Chaos = require('./anims/chaos');
const Invert = require('./anims/invert');
const Slay = require('./anims/slay');
@@ -116,7 +117,8 @@ function animations(props) {
case 'Haste': return <Haste />;
case 'Parry': return <Parry team={player} />;
case 'Recharge': return <Recharge team={player} />;
case 'Invert': return <Invert id={construct.id} />
case 'Reflect': return <Reflect team={player} />;
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} />;
case 'Stun': return <Stun />;
client/src/components/anims/recharge.jsx
+7 -7
View File
@@ -51,8 +51,8 @@ class Recharge extends Component {
this.animations.push(anime({
targets: ['#recharge'],
opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION },
{ 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',
}));
@@ -63,8 +63,8 @@ class Recharge 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,
}));
this.animations.push(anime({
@@ -72,10 +72,10 @@ class Recharge extends Component {
baseFrequency: 2,
scale: 10,
numOctaves: 5,
easing: 'easeOutSine',
delay: TIMES.TARGET_FADE_IN_DELAY,
duration: TIMES.RESOLUTION_TOTAL_MS,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
}
client/src/components/anims/reflect.jsx
+82
View File
@@ -0,0 +1,82 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES, COLOURS } = require('../../constants');
class Reflect extends Component {
constructor() {
super();
this.animations = [];
}
render({ team }) {
let redX = anime.random(32, 128);
let blueX = anime.random(128, 224);
return (
<svg
class='skill-animation'
version="1.1"
id="reflect"
xmlns="http://www.w3.org/2000/svg"
style={{ transform: team ? '' : 'rotate3d(1, 0, 0, 180deg)' }}
viewBox="0 0 256 256">
<defs>
<filter id="reflectFilterGreen">
<feGaussianBlur stdDeviation="2"/>
<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>
<g filter="url(#reflectFilterGreen)">
<rect class="green" fill={COLOURS.GREEN} x="32" y="64" width="192" height="4" />
<path class="red" d={`M${redX},20 L${redX * 1.5},64 L${redX * 2},20`} style={{ 'stroke-dasharray': anime.random(48, 64) }} />
<path class="blue" d={`M${blueX},20 L${blueX * 0.75},64 L${blueX * 0.5},20`} style={{ 'stroke-dasharray': anime.random(48, 64) }} />
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#reflect'],
opacity: [
{ 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: ['#reflect path'],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'linear',
loop: true,
duration: TIMES.TARGET_DURATION_MS / 5,
}));
// this.animations.push(anime({
// targets: ['#reflectFilter feTurbulence', ' #reflectFilter feDisplacementMap'],
// baseFrequency: 2,
// scale: 10,
// numOctaves: 5,
// easing: 'easeOutSine',
// delay: TIMES.TARGET_FADE_IN_DELAY,
// duration: TIMES.RESOLUTION_TOTAL_MS,
// }));
}
// this is necessary because
// skipping / timing / unmounting race conditions
// can cause the animations to cut short, this will ensure the values are reset
// because preact will recycle all these components
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
}
module.exports = Reflect;