Table of Contents
URL: https://www.progressiverobot.com/vuejs-vue-easy-tweening/
So if you've read our previous article on tweening properites in Vue.js, you probably noticed that, well, there's a lot of code in there. It's not a super simple thing to rip out and scatter throughout your own projects. So what if there was a way to abstract it so you'd hardly have to write any more code than with CSS transitions? Well, Luke Chinworth was thinking the same thing, and came up with vue-mixin-tween. It uses tween.js and distills the complicated tweening code into a simple mixin which can be included in any component.
Installation
# Yarn
$ yarn vue-mixin-tween
# NPM
$ npm install vue-mixin-tween --save
Usage
Go ahead and throw it right into any old component with a numeric property somewhere. The mixin will create a new reactive property based on the property name you passed in. For example: myProp becomes myPropTween and will update whenever myProp updates.
<template>
<div>
<button @click="addAlligators">Add Some Alligators</button>
<h2>Number of Alligators: {{ numberOfAlligators }}</h2>
<!-- You may want to Math.floor() the value first as it is a float. -->
<h2>Number of Alligators: (Tweened) {{ numberOfAlligatorsTween }}</h2>
</div>
</template>
<script>
import VueMixinTween from 'vue-mixin-tween';
export default {
data() {
return {
numberOfAlligators: 0
}
},
mixins: [
// The only required argument is the name of the property to tween.
// The default duration is 500 milliseconds.
// The default timing function is TWEEN.Easing.Quadratic.Out
// We're using a "custom" linear timing function here.
VueMixinTween('numberOfAlligators', 5000, (pos) => pos)
],
methods: {
addAlligators() {
this.numberOfAlligators = 500;
}
}
}
</script>
And there you have it. It's dead-simple to customize the duration or even the timing function with far less code-per-component than doing it manually. Awesome!
