From 6070df8bd0294c6224ad0157d45cc40443596f08 Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 2 Jul 2019 22:26:02 +1000 Subject: [PATCH 1/3] parry fixes and curse change --- client/src/components/anims/curse.jsx | 27 +++++++++++++++------------ client/src/components/anims/heal.jsx | 10 ---------- client/src/components/anims/parry.jsx | 12 ++++++------ 3 files changed, 21 insertions(+), 28 deletions(-) diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx index 8926bfae..186bc94f 100644 --- a/client/src/components/anims/curse.jsx +++ b/client/src/components/anims/curse.jsx @@ -17,7 +17,7 @@ class Curse extends Component { return ( @@ -30,10 +30,16 @@ class Curse extends Component { - - - - + + + + + + + + + + ); @@ -50,13 +56,10 @@ class Curse extends Component { })); this.animations.push(anime({ - targets: ['#curse'], - scale: [0.5, 1], - stroke: [COLOURS.WHITE, COLOURS.BLUE], - strokeWidth: [8, 0], - filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`], - easing: 'easeOutSine', - delay: TIMES.TARGET_DELAY_MS, + targets: ['#curse circle'], + r: 0, + easing: 'easeInSine', + delay: TIMES.TARGET_DURATION_MS * 0.4, duration: TIMES.TARGET_DURATION_MS, })); } diff --git a/client/src/components/anims/heal.jsx b/client/src/components/anims/heal.jsx index 052c2512..5ac0e755 100644 --- a/client/src/components/anims/heal.jsx +++ b/client/src/components/anims/heal.jsx @@ -58,16 +58,6 @@ class Heal extends Component { 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: ['#heal circle'], cx: 150, diff --git a/client/src/components/anims/parry.jsx b/client/src/components/anims/parry.jsx index 1ea1f29e..0619b956 100644 --- a/client/src/components/anims/parry.jsx +++ b/client/src/components/anims/parry.jsx @@ -43,8 +43,8 @@ class Parry extends Component { this.animations.push(anime({ targets: ['#parry'], 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', })); @@ -52,20 +52,20 @@ class Parry extends Component { this.animations.push(anime({ targets: ['#parry'], rotateX: 180, - delay: TIMES.TARGET_FADE_IN_DELAY * 3, + delay: TIMES.TARGET_DELAY_MS * 2, duration: TIMES.TARGET_DURATION_MS / 2, easing: 'easeOutSine', })); this.animations.push(anime({ - targets: ['#parryFilter feTurbulence', ' #parryFilter feDisplacementMap'], + targets: ['#parryFilter feTurbulence', '#parryFilter feDisplacementMap'], baseFrequency: 2, scale: 10, numOctaves: 5, easing: 'easeOutSine', - delay: TIMES.TARGET_FADE_IN_DELAY, - duration: TIMES.RESOLUTION_TOTAL_MS, + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS, })); } From ccdfe22854f781cabe2c299bb407258c7f2d784f Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 2 Jul 2019 22:39:00 +1000 Subject: [PATCH 2/3] curse and decay changes" ; --- client/src/components/anims/curse.jsx | 5 ++-- client/src/components/anims/decay.jsx | 39 +++++++++++---------------- 2 files changed, 18 insertions(+), 26 deletions(-) diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx index 186bc94f..376658b9 100644 --- a/client/src/components/anims/curse.jsx +++ b/client/src/components/anims/curse.jsx @@ -58,9 +58,10 @@ class Curse extends Component { this.animations.push(anime({ targets: ['#curse circle'], r: 0, - easing: 'easeInSine', - delay: TIMES.TARGET_DURATION_MS * 0.4, + easing: 'easeInOutSine', + delay: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS, + direction: 'reverse', })); } diff --git a/client/src/components/anims/decay.jsx b/client/src/components/anims/decay.jsx index 9fe63ed3..fa4e3aee 100644 --- a/client/src/components/anims/decay.jsx +++ b/client/src/components/anims/decay.jsx @@ -1,6 +1,7 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const times = require('lodash/times'); const { TIMES, COLOURS } = require('../../constants'); @@ -14,25 +15,17 @@ class Decay extends Component { return ( - - - - - - - - - - - - - - + {times(15, () => ( + + + + + ))} ); @@ -42,20 +35,18 @@ class Decay extends Component { this.animations.push(anime({ targets: ['#decay'], opacity: [ - { value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, - { value: 0, delay: TIMES.TARGET_DURATION_MS - 1000, 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', })); this.animations.push(anime({ - targets: ['#decay rect'], - x: () => anime.random(50, 250), - y: () => anime.random(50, 250), - stroke: [COLOURS.WHITE, COLOURS.BLUE], - strokeWidth: [4, 2], - transform: () => `rotate(${anime.random(-15, 15)})`, - filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`], + targets: ['#decay .box'], + transform: () => ` + translate(${anime.random(-120, 120)} ${anime.random(-120, 120)}) + rotate(${anime.random(-15, 15)}) + `, easing: 'easeOutSine', delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS, From c1d56899c2524238d31e271bdde24a9b550b882d Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 2 Jul 2019 22:40:31 +1000 Subject: [PATCH 3/3] fuk curse --- client/src/components/anims/curse.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/anims/curse.jsx b/client/src/components/anims/curse.jsx index 376658b9..ec043bdd 100644 --- a/client/src/components/anims/curse.jsx +++ b/client/src/components/anims/curse.jsx @@ -59,7 +59,7 @@ class Curse extends Component { targets: ['#curse circle'], r: 0, easing: 'easeInOutSine', - delay: TIMES.TARGET_DURATION_MS, + delay: TIMES.TARGET_DURATION_MS / 2, duration: TIMES.TARGET_DURATION_MS, direction: 'reverse', }));