Skip to content

Instantly share code, notes, and snippets.

@AlwxSin
Created November 13, 2017 08:54
Show Gist options
  • Save AlwxSin/60423bc8caa9427f652a3acee62f5bba to your computer and use it in GitHub Desktop.
Save AlwxSin/60423bc8caa9427f652a3acee62f5bba to your computer and use it in GitHub Desktop.
Vue Animated integer/float component
<template>
<span>{{ tweeningValue }}</span>
</template>
<script>
import TWEEN from 'tween.js';
export default {
name: 'animated-integer',
props: {
value: {
required: true,
},
},
data() {
return {
tweeningValue: 0,
};
},
watch: {
value(newValue, oldValue) {
this.tween(oldValue, newValue);
},
},
mounted() {
this.tween(0, this.value);
},
methods: {
tween(startValue, endValue) {
const vm = this;
let animationFrame;
function animate(time) {
animationFrame = requestAnimationFrame(animate);
TWEEN.update(time);
}
const t = new TWEEN.Tween({ x: startValue })
.to({ x: endValue }, 100)
.onUpdate(function _() {
vm.tweeningValue = parseFloat(this.x.toFixed(2));
})
.onComplete(() => {
cancelAnimationFrame(animationFrame);
});
t.start();
animationFrame = requestAnimationFrame(animate);
},
},
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment