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
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/anims/amplify.jsx
+5 -5
View File
@@ -34,11 +34,11 @@ class Amplify extends Component {
this.animations.push(anime({
targets: ['#amplify'],
opacity: 1,
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
{ value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
client/src/components/anims/banish.jsx
+4 -2
View File
@@ -9,8 +9,10 @@ function banish(id) {
targets: [document.getElementById(id)],
scaleY: 0,
fill: '#fff',
easing: 'easeInOutElastic',
duration: TIMES.START_SKILL,
easing: 'easeOutElastic',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
});
}
client/src/components/anims/bash.jsx
+8 -7
View File
@@ -38,10 +38,12 @@ class Bash extends Component {
componentDidMount() {
this.animations.push(anime({
targets: ['#bash'],
opacity: 1,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
// this is badly behaved, nfi why
{ value: 0, delay: TIMES.FADE_DELAY_MS / 2, duration: TIMES.FADE_DURATION_MS },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
@@ -49,8 +51,7 @@ class Bash extends Component {
scale: {
value: 1,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS * 0.1,
endDelay: TIMES.TARGET_DURATION_MS * 0.9,
duration: TIMES.TARGET_DURATION_MS * 0.2,
easing: 'easeInExpo',
},
@@ -79,7 +80,7 @@ class Bash extends Component {
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
duration: TIMES.RESOLUTION_TOTAL_MS,
}));
}
client/src/components/anims/block.jsx
+5 -4
View File
@@ -35,10 +35,11 @@ class Block extends Component {
componentDidMount() {
this.animations.push(anime({
targets: ['#block'],
opacity: 1,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
{ value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
],
easing: 'easeInOutSine',
}));
}
client/src/components/anims/buff.jsx
+5 -5
View File
@@ -30,11 +30,11 @@ class Buff extends Component {
componentDidMount() {
this.animations.push(anime({
targets: ['#buff'],
opacity: 1,
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
{ value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
client/src/components/anims/curse.jsx
+5 -5
View File
@@ -42,11 +42,11 @@ class Curse extends Component {
componentDidMount() {
this.animations.push(anime({
targets: ['#curse'],
opacity: 1,
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
{ value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
client/src/components/anims/debuff.jsx
+5 -5
View File
@@ -31,11 +31,11 @@ class Debuff extends Component {
componentDidMount() {
this.animations.push(anime({
targets: ['#debuff'],
opacity: 1,
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
{ value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
client/src/components/anims/decay.jsx
+5 -5
View File
@@ -41,11 +41,11 @@ class Decay extends Component {
componentDidMount() {
this.animations.push(anime({
targets: ['#decay'],
opacity: 1,
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
{ value: 0, delay: TIMES.TARGET_DURATION_MS - TIMES.FADE_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
client/src/components/anims/haste.jsx
+6 -6
View File
@@ -42,11 +42,11 @@ class Haste extends Component {
componentDidMount() {
this.animations.push(anime({
targets: ['#haste'],
opacity: 1,
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
{ value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
@@ -65,7 +65,7 @@ class Haste extends Component {
easing: 'easeInOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
duration: TIMES.RESOLUTION_TOTAL_MS,
}));
}
client/src/components/anims/hex.jsx
+5 -4
View File
@@ -47,10 +47,11 @@ class Hex extends Component {
componentDidMount() {
this.animations.push(anime({
targets: ['#hex'],
opacity: 1,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
{ value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
client/src/components/anims/invert.jsx
+19
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;
client/src/components/anims/red.block.jsx
+5 -4
View File
@@ -42,10 +42,11 @@ class Block extends Component {
componentDidMount() {
this.animations.push(anime({
targets: ['#block'],
opacity: 1,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
{ value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
client/src/components/anims/stun.jsx
+7 -15
View File
@@ -45,30 +45,22 @@ class Stun extends Component {
componentDidMount() {
this.animations.push(anime({
targets: ['#stun'],
opacity: 1,
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS },
{ value: 0, delay: TIMES.TARGET_DURATION_MS, duration: TIMES.FADE_DURATION_MS },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
targets: ['#stun'],
rotate: 180,
easing: 'linear',
loop: true,
duration: TIMES.TARGET_DURATION_MS,
duration: TIMES.RESOLUTION_TOTAL_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