一、安装依赖:
npm install tween.js@16.3.4
npm install color-js@1.0.3
二、示例
<template>
<div >
<div id="animated-number-demo">
<input v-model.number="number" type="number" step="20">
<p>{{ animatedNumber }}</p>
</div>
<div id="example-7">
<input
v-model="colorQuery"
v-on:keyup.enter="updateColor"
placeholder="Enter a color"
>
<button v-on:click="updateColor">Update</button>
<p>Preview:</p>
<span
v-bind:style="{ backgroundColor: tweenedCSSColor }"
class="example-7-color-preview"
></span>
<p>{{ tweenedCSSColor }}</p>
</div>
</div>
</template>
<script>
//import Vue from 'vue'
import gsap from 'gsap'
import Color from 'color-js'
import TWEEN from 'tween.js'
export default{
components: {
},
data() {
return {
show: true,
number: 0,
tweenedNumber: 0,
colorQuery: '',
color: {
red: 0,
green: 0,
blue: 0,
alpha: 1
},
tweenedColor: {}
}
},
methods:{
updateColor: function () {
this.color = new Color(this.colorQuery).toRGB()
this.colorQuery = ''
}
},
created(){
this.tweenedColor = Object.assign({}, this.color)
},
computed: {
animatedNumber: function(){
return this.tweenedNumber.toFixed(0);
},
tweenedCSSColor: function () {
return new Color({
red: this.tweenedColor.red,
green: this.tweenedColor.green,
blue: this.tweenedColor.blue,
alpha: this.tweenedColor.alpha
}).toCSS()
}
},
watch: {
number: function(newValue) {
gsap.to(this.$data, { duration: 3.5, tweenedNumber: newValue });
},
color: function () {
function animate () {
if (TWEEN.update()) {
requestAnimationFrame(animate)
}
}
new TWEEN.Tween(this.tweenedColor)
.to(this.color, 750)
.start()
animate()
}
}
}
</script>
<style >
.example-7-color-preview {
display: inline-block;
width: 50px;
height: 50px;
}
</style>