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

fix sketchy idle animation

Browse Source
This commit is contained in:
ntr 2020-02-04 20:56:03 +10:00
parent 0a0db9e57f
commit c3a8463ea9
5 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/components/account.box.jsx
View File

@ -59,8 +59,13 @@ class AccountAvatar extends Component {
} }
componentDidMount() { componentDidMount() {
const startIdle = () => {
this.idle = idleAnimation(this.props.account.id); this.idle = idleAnimation(this.props.account.id);
return this.animations.push(this.idle); this.animations.push(this.idle);
this.idle.finished.then(startIdle);
};
startIdle();
} }
resetAnimations() { resetAnimations() {

6
client/src/components/anims/idle.jsx
View File

@ -1,8 +1,9 @@
const anime = require('animejs').default; const anime = require('animejs').default;
function idle(id) { function idle(id) {
const duration = anime.random(2000, 18000); const duration = anime.random(2000, 4000);
const target = document.getElementById(id); const target = document.getElementById(id);
return anime({ return anime({
targets: target, targets: target,
translateX: () => anime.random(-20, 20), translateX: () => anime.random(-20, 20),
@ -10,8 +11,7 @@ function idle(id) {
rotate: () => anime.random(-15, 15), rotate: () => anime.random(-15, 15),
duration, duration,
direction: 'alternate', direction: 'alternate',
easing: 'linear', easing: 'easeInOutSine',
loop: true,
}); });
} }

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

@ -48,8 +48,13 @@ class ConstructAvatar extends Component {
} }
componentDidMount() { componentDidMount() {
const startIdle = () => {
this.idle = idleAnimation(this.props.construct.id); this.idle = idleAnimation(this.props.construct.id);
return this.animations.push(this.idle); this.animations.push(this.idle);
this.idle.finished.then(startIdle);
};
startIdle();
} }
resetAnimations() { resetAnimations() {

7
client/src/components/mnni.jsx
View File

@ -34,8 +34,13 @@ class MnniAvatatr extends Component {
} }
componentDidMount() { componentDidMount() {
const startIdle = () => {
this.idle = idleAnimation('mnni'); this.idle = idleAnimation('mnni');
return this.animations.push(this.idle); this.animations.push(this.idle);
this.idle.finished.then(startIdle);
};
startIdle();
} }
resetAnimations() { resetAnimations() {

7
client/src/components/player.box.jsx
View File

@ -37,8 +37,13 @@ class Img extends Component {
} }
componentDidMount() { componentDidMount() {
const startIdle = () => {
this.idle = idleAnimation(this.props.id); this.idle = idleAnimation(this.props.id);
return this.animations.push(this.idle); this.animations.push(this.idle);
this.idle.finished.then(startIdle);
};
startIdle();
} }
resetAnimations() { resetAnimations() {