From dbe38a8815356dd956d05cc5f08092865c1ebf86 Mon Sep 17 00:00:00 2001 From: Mashy Date: Sun, 15 Sep 2019 13:21:04 +1000 Subject: [PATCH 1/2] anim simplified and fixed hopefully --- client/src/components/anims/banish.jsx | 4 +- client/src/components/anims/invert.jsx | 4 +- client/src/components/anims/source.cast.jsx | 8 +- client/src/components/construct.jsx | 86 ++------------------- 4 files changed, 19 insertions(+), 83 deletions(-) diff --git a/client/src/components/anims/banish.jsx b/client/src/components/anims/banish.jsx index 62d3096a..12ae365a 100644 --- a/client/src/components/anims/banish.jsx +++ b/client/src/components/anims/banish.jsx @@ -2,7 +2,7 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); -function Banish(id) { +function Banish(id, idle) { return anime({ targets: [document.getElementById(id)], scaleY: 0, @@ -11,6 +11,8 @@ function Banish(id) { delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.45, direction: 'alternate', + begin: idle.pause, + complete: idle.play, }); } diff --git a/client/src/components/anims/invert.jsx b/client/src/components/anims/invert.jsx index 57a787d8..ac083bea 100644 --- a/client/src/components/anims/invert.jsx +++ b/client/src/components/anims/invert.jsx @@ -2,7 +2,7 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); -function Invert(id) { +function Invert(id, idle) { return anime({ targets: [document.getElementById(id)], rotate: 180, @@ -10,6 +10,8 @@ function Invert(id) { duration: TIMES.TARGET_DURATION_MS * 0.45, easing: 'easeInOutElastic', direction: 'alternate', + begin: idle.pause, + complete: idle.play, }); } diff --git a/client/src/components/anims/source.cast.jsx b/client/src/components/anims/source.cast.jsx index 25cb8ae8..2ca2f6c3 100644 --- a/client/src/components/anims/source.cast.jsx +++ b/client/src/components/anims/source.cast.jsx @@ -2,15 +2,17 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); -function sourceCast(id, direction) { +function sourceCast(id, direction, idle) { const { x, y } = direction; return anime({ targets: [document.getElementById(id)], - translateX: [0, x * 200], - translateY: [0, y * 200], + translateX: x * 200, + translateY: y * 200, easing: 'easeInOutElastic', direction: 'alternate', duration: TIMES.SOURCE_DURATION_MS, + begin: idle.pause, + complete: idle.play, }); } diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx index 17e97349..964da49c 100644 --- a/client/src/components/construct.jsx +++ b/client/src/components/construct.jsx @@ -37,73 +37,8 @@ class ConstructAvatar extends Component { } componentDidMount() { - const { animSource, animTarget, construct } = this.props; - - // back to idle - if (!animTarget && !animSource) { - if (!this.idle) { - this.idle = idleAnimation(this.props.construct.id); - return this.animations.push(this.idle); - } - - return this.idle.play(); - } - - const isSource = animSource && animSource.constructId === construct.id; - - const selectAnim = () => { - if (isSource) { - console.warn(construct.name, animSource); - return sourceCast(animSource.constructId, animSource.direction); - } - - switch (animTarget.skill) { - case 'banish': return banish(construct.id); - case 'invert': return invert(construct.id); - default: return null; - } - }; - - const anim = selectAnim(); - if (!anim) return false; - - this.idle.pause(); - this.animations.push(anim); - return true; - } - - componentDidUpdate(prevProps) { - const { animSource, animTarget, construct } = this.props; - - // back to idle - if (!animTarget && !animSource) { - if (!this.idle) { - this.idle = idleAnimation(this.props.construct.id); - return this.animations.push(this.idle); - } - return this.idle.play(); - } - - const isSource = animSource && animSource.constructId === construct.id; - - const selectAnim = () => { - if (isSource) { - return sourceCast(animSource.constructId, animSource.direction); - } - - switch (animTarget.skill) { - case 'Banish': return banish(construct.id); - case 'Invert': return invert(construct.id); - default: return null; - } - }; - - const anim = selectAnim(); - if (!anim) return false; - - this.idle.pause(); - this.animations.push(anim); - return true; + this.idle = idleAnimation(this.props.construct.id); + return this.animations.push(this.idle); } resetAnimations() { @@ -132,24 +67,19 @@ class ConstructAvatar extends Component { // this is the source if (animSource && animSource.constructId === construct.id) { // console.warn(construct.name, 'should update') - return true; + return sourceCast(animSource.constructId, animSource.direction, this.idle); } // this is the target if (animTarget && animTarget.constructId.includes(construct.id)) { // console.warn(construct.name, 'should update') - return true; + switch (animTarget.skill) { + case 'Banish': return banish(construct.id, this.idle); + case 'Invert': return invert(construct.id, this.idle); + default: return null; + } } - // we were previously doing src anim - const prevSrc = this.props.animSource && this.props.animSource.constructId === construct.id; - if (prevSrc && !animSource) return true; - - const prevTarget = this.props.animTarget && this.props.animTarget.constructId.includes(construct.id); - if (prevTarget && !animTarget) return true; - - // console.warn(construct.name, 'not updating'); - return false; } } From 21203ee06a5860f6337e5d9a30e4926faccdb476 Mon Sep 17 00:00:00 2001 From: Mashy Date: Sun, 15 Sep 2019 14:15:03 +1000 Subject: [PATCH 2/2] screen based translate for cast --- client/src/components/anims/source.cast.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/anims/source.cast.jsx b/client/src/components/anims/source.cast.jsx index 2ca2f6c3..74a17184 100644 --- a/client/src/components/anims/source.cast.jsx +++ b/client/src/components/anims/source.cast.jsx @@ -6,8 +6,8 @@ function sourceCast(id, direction, idle) { const { x, y } = direction; return anime({ targets: [document.getElementById(id)], - translateX: x * 200, - translateY: y * 200, + translateX: x * window.screen.width * 0.15, + translateY: y * window.screen.height * 0.15, easing: 'easeInOutElastic', direction: 'alternate', duration: TIMES.SOURCE_DURATION_MS,