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

remove fade constants

Browse Source
This commit is contained in:
Mashy 2019-07-02 15:14:46 +10:00
parent 662f3b00ca
commit c646c76e91
14 changed files with 50 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,8 +11,8 @@ function banish(id) {
fill: '#fff', fill: '#fff',
easing: 'easeOutElastic', easing: 'easeOutElastic',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS,
}); });
} }

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

@ -39,9 +39,8 @@ class Bash extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#bash'], targets: ['#bash'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
// this is badly behaved, nfi why { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.FADE_DELAY_MS / 2, duration: TIMES.FADE_OUT_DURATION },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -50,7 +49,7 @@ class Bash extends Component {
targets: ['#bash'], targets: ['#bash'],
scale: { scale: {
value: 1, value: 1,
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS * 0.2, duration: TIMES.TARGET_DURATION_MS * 0.2,
easing: 'easeInExpo', easing: 'easeInExpo',
}, },
@ -67,7 +66,7 @@ class Bash extends Component {
{ translateX: 0, translateY: 2 }, { translateX: 0, translateY: 2 },
], ],
delay: TIMES.TARGET_FADE_IN_DELAY + TIMES.TARGET_DURATION_MS * 0.1, delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1,
duration: TIMES.TARGET_DURATION_MS * 0.2, duration: TIMES.TARGET_DURATION_MS * 0.2,
easing: 'easeOutSine', easing: 'easeOutSine',
})); }));
@ -79,8 +78,8 @@ class Bash extends Component {
numOctaves: 5, numOctaves: 5,
easing: 'easeOutSine', easing: 'easeOutSine',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.RESOLUTION_TOTAL_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

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

@ -36,8 +36,8 @@ class Block extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#block'], targets: ['#block'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));

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

@ -31,8 +31,8 @@ class Buff extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#buff'], targets: ['#buff'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -42,7 +42,7 @@ class Buff extends Component {
points: '0,190 100,10 190,190', points: '0,190 100,10 190,190',
easing: 'easeOutExpo', easing: 'easeOutExpo',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
@ -51,7 +51,7 @@ class Buff extends Component {
points: '40,170 100,50 160,170', points: '40,170 100,50 160,170',
easing: 'easeOutExpo', easing: 'easeOutExpo',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
@ -60,7 +60,7 @@ class Buff extends Component {
points: '70,150 100,90 130,150', points: '70,150 100,90 130,150',
easing: 'easeOutExpo', easing: 'easeOutExpo',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

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

@ -43,8 +43,8 @@ class Curse extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#curse'], targets: ['#curse'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -56,7 +56,7 @@ class Curse extends Component {
strokeWidth: [8, 0], strokeWidth: [8, 0],
filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`], filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`],
easing: 'easeOutSine', easing: 'easeOutSine',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

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

@ -32,8 +32,8 @@ class Debuff extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#debuff'], targets: ['#debuff'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));

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

@ -42,8 +42,8 @@ class Decay extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#decay'], targets: ['#decay'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY - TIMES.FADE_DURATION_MS, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -57,7 +57,7 @@ class Decay extends Component {
transform: () => `rotate(${anime.random(-15, 15)})`, transform: () => `rotate(${anime.random(-15, 15)})`,
filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`], filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`],
easing: 'easeOutSine', easing: 'easeOutSine',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

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

@ -1,6 +1,6 @@
const preact = require('preact'); const preact = require('preact');
const { Component } = require('preact'); const { Component } = require('preact');
const times = require('lodash/times') const times = require('lodash/times');
const anime = require('animejs').default; const anime = require('animejs').default;
@ -52,8 +52,8 @@ class Electrify extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#electrify'], targets: ['#electrify'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -83,7 +83,7 @@ class Electrify extends Component {
d: times(10, path), d: times(10, path),
easing: 'easeInOutSine', easing: 'easeInOutSine',
loop: true, loop: true,
duration: TIMES.TARGET_MAIN_DURATION / 5, duration: TIMES.TARGET_DURATION_MS / 5,
})); }));
this.animations.push(anime({ this.animations.push(anime({
@ -92,7 +92,7 @@ class Electrify extends Component {
easing: 'easeInOutSine', easing: 'easeInOutSine',
direction: 'alternate', direction: 'alternate',
loop: true, loop: true,
duration: TIMES.TARGET_MAIN_DURATION, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

8
client/src/components/anims/electrocute.jsx
View File

@ -50,8 +50,8 @@ class Electrify extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#electrify'], targets: ['#electrify'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -75,7 +75,7 @@ class Electrify extends Component {
d: times(10, path), d: times(10, path),
easing: 'easeInOutSine', easing: 'easeInOutSine',
loop: true, loop: true,
duration: TIMES.TARGET_MAIN_DURATION / 5, duration: TIMES.TARGET_DURATION_MS / 5,
})); }));
this.animations.push(anime({ this.animations.push(anime({
@ -84,7 +84,7 @@ class Electrify extends Component {
easing: 'easeInOutSine', easing: 'easeInOutSine',
direction: 'alternate', direction: 'alternate',
loop: true, loop: true,
duration: TIMES.TARGET_MAIN_DURATION, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

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

@ -43,8 +43,8 @@ class Haste extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#haste'], targets: ['#haste'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -53,8 +53,8 @@ class Haste extends Component {
targets: ['#haste g'], targets: ['#haste g'],
stroke: [COLOURS.GREEN, COLOURS.RED], stroke: [COLOURS.GREEN, COLOURS.RED],
easing: 'easeInOutSine', easing: 'easeInOutSine',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS * 0.75,
})); }));
this.animations.push(anime({ this.animations.push(anime({
@ -64,8 +64,8 @@ class Haste extends Component {
numOctaves: 5, numOctaves: 5,
easing: 'easeInOutSine', easing: 'easeInOutSine',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.RESOLUTION_TOTAL_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

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

@ -48,8 +48,8 @@ class Hex extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#hex'], targets: ['#hex'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));

8
client/src/components/anims/invert.jsx
View File

@ -7,12 +7,12 @@ const { TIMES } = require('../../constants');
function invert(id) { function invert(id) {
anime({ anime({
targets: [document.getElementById(id)], targets: [document.getElementById(id)],
rotate: 180, rotate: [
{ value: 180, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.6 },
{ value: 0, duration: TIMES.POST_SKILL_DURATION_MS * 0.4 },
],
easing: 'easeInOutElastic', easing: 'easeInOutElastic',
direction: 'alternate', direction: 'alternate',
delay: TIMES.TARGET_FADE_IN_DELAY,
duration: TIMES.TARGET_DURATION_MS,
}); });
} }

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

@ -46,8 +46,8 @@ class Stun extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#stun'], targets: ['#stun'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -57,9 +57,8 @@ class Stun extends Component {
rotate: 180, rotate: 180,
easing: 'linear', easing: 'linear',
loop: true, loop: true,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.RESOLUTION_TOTAL_MS, duration: TIMES.TARGET_DURATION_MS,
delay: TIMES.TARGET_FADE_IN_DELAY,
})); }));
} }

45
client/src/constants.jsx
View File

@ -1,57 +1,16 @@
const SOURCE_DURATION_MS = 1000; const SOURCE_DURATION_MS = 1000;
const TARGET_DELAY_MS = 500; const TARGET_DELAY_MS = 500;
const TARGET_DURATION_MS = 1500; 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;
// first the source does an activation animation
const SOURCE_ANIMATION_DURATION = 850;
// the target fades in
const TARGET_FADE_IN_DELAY = 500;
const TARGET_FADE_IN_DURATION = 500;
// begins its main animation effect
const TARGET_MAIN_DELAY = 500;
const TARGET_MAIN_DURATION = 1500;
// then fades out
const TARGET_FADE_OUT_DURATION = 500;
const TARGET_FADE_OUT_DELAY = TARGET_MAIN_DELAY + TARGET_MAIN_DURATION;
const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_FADE_OUT_DELAY + TARGET_FADE_OUT_DURATION;
// combat text shows
const POST_SKILL_DURATION_MS = 1000; const POST_SKILL_DURATION_MS = 1000;
const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS;
module.exports = { module.exports = {
TIMES: { TIMES: {
SOURCE_DURATION_MS, SOURCE_DURATION_MS,
TARGET_DELAY_MS, TARGET_DELAY_MS,
TARGET_DURATION_MS, TARGET_DURATION_MS,
FADE_DELAY_MS,
FADE_DURATION_MS,
RESOLUTION_TOTAL_MS,
POST_SKILL_DURATION_MS, POST_SKILL_DURATION_MS,
SOURCE_ANIMATION_DURATION,
TARGET_FADE_IN_DELAY,
TARGET_FADE_IN_DURATION,
TARGET_MAIN_DELAY,
TARGET_MAIN_DURATION,
TARGET_FADE_OUT_DELAY,
TARGET_FADE_OUT_DURATION,
SOURCE_AND_TARGET_TOTAL_DURATION, SOURCE_AND_TARGET_TOTAL_DURATION,
}, },