fix sketchy idle animation

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
+6 -1
View File
@@ -59,8 +59,13 @@ class AccountAvatar extends Component {
}
componentDidMount() {
const startIdle = () => {
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() {
+3 -3
View File
@@ -1,8 +1,9 @@
const anime = require('animejs').default;
function idle(id) {
const duration = anime.random(2000, 18000);
const duration = anime.random(2000, 4000);
const target = document.getElementById(id);
return anime({
targets: target,
translateX: () => anime.random(-20, 20),
@@ -10,8 +11,7 @@ function idle(id) {
rotate: () => anime.random(-15, 15),
duration,
direction: 'alternate',
easing: 'linear',
loop: true,
easing: 'easeInOutSine',
});
}
+6 -1
View File
@@ -48,8 +48,13 @@ class ConstructAvatar extends Component {
}
componentDidMount() {
const startIdle = () => {
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() {
+6 -1
View File
@@ -34,8 +34,13 @@ class MnniAvatatr extends Component {
}
componentDidMount() {
const startIdle = () => {
this.idle = idleAnimation('mnni');
return this.animations.push(this.idle);
this.animations.push(this.idle);
this.idle.finished.then(startIdle);
};
startIdle();
}
resetAnimations() {
+6 -1
View File
@@ -37,8 +37,13 @@ class Img extends Component {
}
componentDidMount() {
const startIdle = () => {
this.idle = idleAnimation(this.props.id);
return this.animations.push(this.idle);
this.animations.push(this.idle);
this.idle.finished.then(startIdle);
};
startIdle();
}
resetAnimations() {