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

invert and fix timings

Browse Source
This commit is contained in:
ntr 2019-07-01 20:04:18 +10:00
parent 870f9680fa
commit c548d466e2
15 changed files with 103 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/animations.jsx
View File

@ -18,6 +18,7 @@ const Heal = require('./anims/heal');
const Hex = require('./anims/hex'); const Hex = require('./anims/hex');
const Strike = require('./anims/strike'); const Strike = require('./anims/strike');
const Chaos = require('./anims/chaos'); const Chaos = require('./anims/chaos');
const invert = require('./anims/invert');
const Slay = require('./anims/slay'); const Slay = require('./anims/slay');
const Siphon = require('./anims/siphon'); const Siphon = require('./anims/siphon');
const SiphonTick = require('./anims/siphon.tick'); const SiphonTick = require('./anims/siphon.tick');
@ -115,6 +116,7 @@ function animations(props) {
case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>; case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Hex': return <Hex />; case 'Hex': return <Hex />;
case 'Haste': return <Haste />; case 'Haste': return <Haste />;
case 'Invert': return invert(construct.id);
case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>; case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>; case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Stun': return <Stun />; case 'Stun': return <Stun />;

10
client/src/components/anims/amplify.jsx
View File

@ -34,11 +34,11 @@ class Amplify extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#amplify'], targets: ['#amplify'],
opacity: 1, opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
easing: 'easeOutExpo', { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
delay: TIMES.TARGET_DELAY_MS, ],
duration: TIMES.TARGET_DELAY_MS, easing: 'easeInOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({

6
client/src/components/anims/banish.jsx
View File

@ -9,8 +9,10 @@ function banish(id) {
targets: [document.getElementById(id)], targets: [document.getElementById(id)],
scaleY: 0, scaleY: 0,
fill: '#fff', fill: '#fff',
easing: 'easeInOutElastic',
duration: TIMES.START_SKILL, easing: 'easeOutElastic',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}); });
} }

15
client/src/components/anims/bash.jsx
View File

@ -38,10 +38,12 @@ class Bash extends Component {
componentDidMount() { componentDidMount() {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#bash'], targets: ['#bash'],
opacity: 1, opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
delay: TIMES.TARGET_DELAY_MS, // this is badly behaved, nfi why
duration: TIMES.TARGET_DELAY_MS, { value: 0, delay: TIMES.FADE_DELAY_MS / 2, duration: TIMES.FADE_DURATION_MS },
],
easing: 'easeInOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({
@ -49,8 +51,7 @@ class Bash extends Component {
scale: { scale: {
value: 1, value: 1,
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS * 0.1, duration: TIMES.TARGET_DURATION_MS * 0.2,
endDelay: TIMES.TARGET_DURATION_MS * 0.9,
easing: 'easeInExpo', easing: 'easeInExpo',
}, },
@ -79,7 +80,7 @@ class Bash extends Component {
easing: 'easeOutSine', easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.RESOLUTION_TOTAL_MS,
})); }));
} }

9
client/src/components/anims/block.jsx
View File

@ -35,10 +35,11 @@ class Block extends Component {
componentDidMount() { componentDidMount() {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#block'], targets: ['#block'],
opacity: 1, opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
delay: TIMES.TARGET_DELAY_MS, { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
duration: TIMES.TARGET_DELAY_MS, ],
easing: 'easeInOutSine',
})); }));
} }

10
client/src/components/anims/buff.jsx
View File

@ -30,11 +30,11 @@ class Buff extends Component {
componentDidMount() { componentDidMount() {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#buff'], targets: ['#buff'],
opacity: 1, opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
easing: 'easeOutExpo', { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
delay: TIMES.TARGET_DELAY_MS, ],
duration: TIMES.TARGET_DELAY_MS, easing: 'easeInOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({

10
client/src/components/anims/curse.jsx
View File

@ -42,11 +42,11 @@ class Curse extends Component {
componentDidMount() { componentDidMount() {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#curse'], targets: ['#curse'],
opacity: 1, opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
easing: 'easeOutExpo', { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
delay: TIMES.TARGET_DELAY_MS, ],
duration: TIMES.TARGET_DELAY_MS, easing: 'easeInOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({

10
client/src/components/anims/debuff.jsx
View File

@ -31,11 +31,11 @@ class Debuff extends Component {
componentDidMount() { componentDidMount() {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#debuff'], targets: ['#debuff'],
opacity: 1, opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
easing: 'easeOutExpo', { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
delay: TIMES.TARGET_DELAY_MS, ],
duration: TIMES.TARGET_DELAY_MS, easing: 'easeInOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({

10
client/src/components/anims/decay.jsx
View File

@ -41,11 +41,11 @@ class Decay extends Component {
componentDidMount() { componentDidMount() {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#decay'], targets: ['#decay'],
opacity: 1, opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
easing: 'easeOutExpo', { value: 0, delay: TIMES.TARGET_DURATION_MS - TIMES.FADE_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
delay: TIMES.TARGET_DELAY_MS, ],
duration: TIMES.TARGET_DELAY_MS, easing: 'easeInOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({

12
client/src/components/anims/haste.jsx
View File

@ -42,11 +42,11 @@ class Haste extends Component {
componentDidMount() { componentDidMount() {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#haste'], targets: ['#haste'],
opacity: 1, opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
easing: 'easeOutExpo', { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
delay: TIMES.TARGET_DELAY_MS, ],
duration: TIMES.TARGET_DELAY_MS, easing: 'easeInOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({
@ -65,7 +65,7 @@ class Haste extends Component {
easing: 'easeInOutSine', easing: 'easeInOutSine',
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.RESOLUTION_TOTAL_MS,
})); }));
} }

9
client/src/components/anims/hex.jsx
View File

@ -47,10 +47,11 @@ class Hex extends Component {
componentDidMount() { componentDidMount() {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#hex'], targets: ['#hex'],
opacity: 1, opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
delay: TIMES.TARGET_DELAY_MS, { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
duration: TIMES.TARGET_DELAY_MS, ],
easing: 'easeInOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({

19
client/src/components/anims/invert.jsx Normal file
View File

@ -0,0 +1,19 @@
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
// shamelessly lifted from teh anime docs
// https://animejs.com/documentation/#svgAttr
function invert(id) {
anime({
targets: [document.getElementById(id)],
rotate: 180,
easing: 'easeInOutElastic',
direction: 'alternate',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
});
}
module.exports = invert;

9
client/src/components/anims/red.block.jsx
View File

@ -42,10 +42,11 @@ class Block extends Component {
componentDidMount() { componentDidMount() {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#block'], targets: ['#block'],
opacity: 1, opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
delay: TIMES.TARGET_DELAY_MS, { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
duration: TIMES.TARGET_DELAY_MS, ],
easing: 'easeInOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({

22
client/src/components/anims/stun.jsx
View File

@ -45,30 +45,22 @@ class Stun extends Component {
componentDidMount() { componentDidMount() {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#stun'], targets: ['#stun'],
opacity: 1, opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
easing: 'easeOutExpo', { value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
delay: TIMES.TARGET_DELAY_MS, ],
duration: TIMES.TARGET_DELAY_MS, easing: 'easeInOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#stun'], targets: ['#stun'],
rotate: 180, rotate: 180,
easing: 'linear', easing: 'linear',
loop: true,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.RESOLUTION_TOTAL_MS,
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
})); }));
this.animations.push(anime({
targets: ['#stun'],
scale: [1, 0.8],
strokeWidth: 0,
easing: 'easeInOutSine',
direction: 'alternate',
duration: TIMES.START_SKILL,
}));
} }
// this is necessary because // this is necessary because

22
client/src/constants.jsx
View File

@ -1,11 +1,23 @@
const SOURCE_DURATION_MS = 1000;
const TARGET_DELAY_MS = 500;
const TARGET_DURATION_MS = 1500;
const FADE_DURATION_MS = 500;
const RESOLUTION_TOTAL_MS = SOURCE_DURATION_MS + TARGET_DURATION_MS + FADE_DURATION_MS;
const FADE_DELAY_MS = RESOLUTION_TOTAL_MS - FADE_DURATION_MS;
// const RESOLUTION_TOTAL_MS = 20000;
module.exports = { module.exports = {
TIMES: { TIMES: {
RESOLUTION_TOTAL_MS: 2000, SOURCE_DURATION_MS,
// RESOLUTION_TOTAL_MS: 200000, TARGET_DELAY_MS,
TARGET_DURATION_MS,
SOURCE_DURATION_MS: 1000, FADE_DELAY_MS,
TARGET_DELAY_MS: 500, FADE_DURATION_MS,
TARGET_DURATION_MS: 1500,
RESOLUTION_TOTAL_MS,
START_SKILL: 2000, START_SKILL: 2000,
END_SKILL: 2000, END_SKILL: 2000,