diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index 205a661f..a482967e 100644 --- a/client/src/components/anims/chaos.jsx +++ b/client/src/components/anims/chaos.jsx @@ -8,8 +8,8 @@ const { randomPoints } = require('../../utils'); function projectile(x, y, radius, colour) { return ( { const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8'; return projectile(coord[0], coord[1], '0.5em', colour); @@ -58,37 +58,12 @@ class Chaos extends Component { componentDidMount() { const projectiles = document.querySelectorAll('.skill-anim circle'); - anime.set('.skill-anim', { - translateY: -(window.innerHeight) * 0.35 * this.props.direction.y, - translateX: -(window.innerWidth) * 0.15 * this.props.direction.x, - opacity: 0, - }); - - this.animations.push(anime({ - targets: '.skill-anim', - opacity: [ - { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.3 }, - { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS }, - ], - })); - - - this.animations.push(anime({ - targets: '.skill-anim', - translateY: 0, - translateX: 0, - loop: false, - duration: (TIMES.TARGET_DURATION_MS * 1 / 2), - easing: 'easeInQuad', - })); - this.animations.push(anime({ targets: ['#chaosRedFilter feTurbulence', '#chaosRedFilter feDisplacementMap'], baseFrequency: 2, scale: 5, numOctaves: 3, easing: 'easeOutSine', - duration: TIMES.TARGET_DURATION_MS, })); @@ -96,11 +71,9 @@ class Chaos extends Component { targets: proj, cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)), cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)), - // cx: 150, - // cy: 200, - // opacity: 0, - duration: (TIMES.TARGET_DURATION_MS * 2 / 3), - easing: 'easeInQuad', + duration: anime.random(TIMES.TARGET_DURATION_MS * 2 / 3, TIMES.TARGET_DURATION_MS), + opacity: 0, + easing: 'easeInExpo', }))); } diff --git a/client/src/components/anims/heal.jsx b/client/src/components/anims/heal.jsx index 2e0da4f9..88b61266 100644 --- a/client/src/components/anims/heal.jsx +++ b/client/src/components/anims/heal.jsx @@ -62,7 +62,7 @@ class Heal extends Component { targets: ['#heal circle'], cx: 150, cy: 200, - duration: TIMES.TARGET_DURATION_MS * 0.9, + duration: TIMES.TARGET_DURATION_MS * 0.6, easing: 'easeOutCirc', direction: 'reverse', })); diff --git a/client/src/components/anims/sustain.jsx b/client/src/components/anims/sustain.jsx index c670bec5..ce174b2a 100644 --- a/client/src/components/anims/sustain.jsx +++ b/client/src/components/anims/sustain.jsx @@ -25,17 +25,17 @@ class Sustain extends Component { @@ -54,13 +54,12 @@ class Sustain extends Component { this.animations.push(anime({ targets: ['#stageOne'], - points: '128,168 80,240 176,240 128,168', keyframes: [ { stroke: [COLOURS.GREEN, COLOURS.RED], fill: [null, COLOURS.RED], delay: TIMES.TARGET_DURATION_MS * 0.2, - duration: TIMES.TARGET_DURATION_MS * 0.6, + duration: TIMES.TARGET_DURATION_MS * 0.15, easing: 'easeInOutSine', }, ], @@ -73,12 +72,11 @@ class Sustain extends Component { { stroke: [COLOURS.GREEN, COLOURS.RED], fill: [null, COLOURS.RED], - delay: TIMES.TARGET_DURATION_MS * 0.5, - duration: TIMES.TARGET_DURATION_MS * 0.6, + delay: TIMES.TARGET_DURATION_MS * 0.35, + duration: TIMES.TARGET_DURATION_MS * 0.15, easing: 'easeInOutSine', }, ], - points: '176,240 212,216 128,96 44,216 80,240', duration: TIMES.TARGET_DURATION_MS, })); @@ -88,12 +86,11 @@ class Sustain extends Component { { stroke: [COLOURS.GREEN, COLOURS.RED], fill: [null, COLOURS.RED], - delay: TIMES.TARGET_DURATION_MS * 0.8, - duration: TIMES.TARGET_DURATION_MS * 0.4, + delay: TIMES.TARGET_DURATION_MS * 0.5, + duration: TIMES.TARGET_DURATION_MS * 0.15, easing: 'easeInOutSine', }, ], - points: '212,216 248,192 128,24 8,192 44,216', duration: TIMES.TARGET_DURATION_MS, })); @@ -103,7 +100,7 @@ class Sustain extends Component { scale: 10, numOctaves: 5, easing: 'easeOutSine', - delay: TIMES.TARGET_DURATION_MS * 0.4, + delay: TIMES.TARGET_DURATION_MS * 0.55, duration: TIMES.TARGET_DURATION_MS * 0.3 + TIMES.POST_SKILL_DURATION_MS, })); }