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

anim simplified and fixed hopefully

Browse Source
This commit is contained in:
Mashy 2019-09-15 13:21:04 +10:00
parent de088b73c5
commit dbe38a8815
4 changed files with 19 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants'); const { TIMES } = require('../../constants');
function Banish(id) { function Banish(id, idle) {
return anime({ return anime({
targets: [document.getElementById(id)], targets: [document.getElementById(id)],
scaleY: 0, scaleY: 0,
@ -11,6 +11,8 @@ function Banish(id) {
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS * 0.45, duration: TIMES.TARGET_DURATION_MS * 0.45,
direction: 'alternate', direction: 'alternate',
begin: idle.pause,
complete: idle.play,
}); });
} }

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

@ -2,7 +2,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants'); const { TIMES } = require('../../constants');
function Invert(id) { function Invert(id, idle) {
return anime({ return anime({
targets: [document.getElementById(id)], targets: [document.getElementById(id)],
rotate: 180, rotate: 180,
@ -10,6 +10,8 @@ function Invert(id) {
duration: TIMES.TARGET_DURATION_MS * 0.45, duration: TIMES.TARGET_DURATION_MS * 0.45,
easing: 'easeInOutElastic', easing: 'easeInOutElastic',
direction: 'alternate', direction: 'alternate',
begin: idle.pause,
complete: idle.play,
}); });
} }

8
client/src/components/anims/source.cast.jsx
View File

@ -2,15 +2,17 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants'); const { TIMES } = require('../../constants');
function sourceCast(id, direction) { function sourceCast(id, direction, idle) {
const { x, y } = direction; const { x, y } = direction;
return anime({ return anime({
targets: [document.getElementById(id)], targets: [document.getElementById(id)],
translateX: [0, x * 200], translateX: x * 200,
translateY: [0, y * 200], translateY: y * 200,
easing: 'easeInOutElastic', easing: 'easeInOutElastic',
direction: 'alternate', direction: 'alternate',
duration: TIMES.SOURCE_DURATION_MS, duration: TIMES.SOURCE_DURATION_MS,
begin: idle.pause,
complete: idle.play,
}); });
} }

82
client/src/components/construct.jsx
View File

@ -37,75 +37,10 @@ class ConstructAvatar extends Component {
} }
componentDidMount() { componentDidMount() {
const { animSource, animTarget, construct } = this.props;
// back to idle
if (!animTarget && !animSource) {
if (!this.idle) {
this.idle = idleAnimation(this.props.construct.id); this.idle = idleAnimation(this.props.construct.id);
return this.animations.push(this.idle); 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;
}
resetAnimations() { resetAnimations() {
for (let i = this.animations.length - 1; i >= 0; i--) { for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset(); this.animations[i].reset();
@ -132,23 +67,18 @@ class ConstructAvatar extends Component {
// this is the source // this is the source
if (animSource && animSource.constructId === construct.id) { if (animSource && animSource.constructId === construct.id) {
// console.warn(construct.name, 'should update') // console.warn(construct.name, 'should update')
return true; return sourceCast(animSource.constructId, animSource.direction, this.idle);
} }
// this is the target // this is the target
if (animTarget && animTarget.constructId.includes(construct.id)) { if (animTarget && animTarget.constructId.includes(construct.id)) {
// console.warn(construct.name, 'should update') // 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; return false;
} }