1 .数字过渡
//自己写的
change(){
this.changeFunction=setInterval(()=>{
//判断是大还是小，实现增加，减少的过渡
if(this.changes[1]<this.value){
this.start+=this.minUnit;
}
if(this.changes[1]==this.value){
return
}
if(this.changes[1]>this.value){
this.start-=this.minUnit
}
if(this.start==this.value){
this.changes.push(this.start)
this.changes.shift()
//这里的changes是把每次变换的数据单独放到一个栈，所以可以很方便的比较两次的大小，也和对这个的优化。
clearInterval(this.changeFunction)
//关键代码是这一行，一定要结束循环
}
},this.interval*1000)
}
//使用animtejs
this.a1=anime({
targets:this.obj,
// 这里是需要变化的数组
// 输入想要变化的值
charged:90,
easeing:'linear',
round:1,
//变化的精度。但是目前就是没发现官网上的api文档。好多都是需要自己猜。
})
//发现的bug，charged是90,也就是我要实现的渐变是要从0-90，但是实际效果是会变得超过100，然后在往下将。
2 .发现一个bug，就是同时使用v-model="value",然后把这个值传到一个子组件里面，子组件要求的数据格式是number，因为这个值是绑定的，所以会把最后一个空值都传过去。如何检测到空值，然后进行检测兼容
3 .那就是不直接传这个值，做一个兼容，传那个兼容值。typeof(this.value),当他为空的时候是个字符串。
组件的实时更新和异步需求的妥协
1 .由于是使用的bind绑定，然后props传到子组件中，所以父组件输入框的每一次细微变化都将会实时的传到子组件下面，导致数据的变化，而且这个变化非常的快，甚至有的时候我们想要输入一个两位数，刚输入一位的时候，他就认为改改变了，让我们进行变化。
2 .但是我们做这个过渡的目的就是为了让玩家的体验变得非常好，所以需要很缓慢的展示出数据的变化状况，这就需要不是那么敏捷国家的感应到数据的变化，所以可以在改变数据的时候加一个延迟函数。
3 .或者在watch的时候，判断前一个数和后一个数的前几位是不是一样的，如果前几位是一样的，那就证明还没有输入完毕，这个时候不开始进行状态过渡
优化
1 .如果是多位数的话，分位数进行变化，比如先变个位，个位到10了，开始变分位，等分位到了9，开始变百位。。。一层层的进行下去.现在就是这样，但是速度太慢了，又会影响输入的效率。用户会不会等的很急。先通过改变setInterval函数的第二个参数来简单模拟这个需求，可以满足，但是会有上面的问题。
2 .多提炼配置函数，让过渡更加的自然。
BUG
问题：如果现在设置的时间渐变比较大的话，再一次没变好的时候在进行第二次输入的话，或者是不停的快速变化数字的话，会停止循环。
思路：最后的时候进行一次检查，发现不一样的时候，在进行一次之前的变化,在做这个之前关键是要清掉上一次的循环
代码
<template>
<span>{{start}}</span>
</template>
<script>
export default {
props:{
value:{
type:Number,
require:true,
default:0,
},
interval:{
type:Number,
default:0.01
},
time:{
type:Number,
default:1
}
},
data:function(){
return {
diff:0,
changeFunction:null,
start:0,
changes:[0,0],
myObject:{
start:0,
}
}
},
watch:{
value(o,l){
this.change()
let _this=this;
if(this.value!==this.start){
_this.changeEnd()
}
}
},
methods:{
change(){
this.changeFunction=setInterval(()=>{
//判断是大还是小
if(this.changes[1]<this.value){
this.start+=this.minUnit;
}
if(this.changes[1]==this.value){
return
}
if(this.changes[1]>this.value){
this.start-=this.minUnit
}
if(this.start==this.value){
this.changes.push(this.start)
this.changes.shift()
console.log('diyiciok')
clearInterval(this.changeFunction)
}
},this.interval*10000)
},
changeEnd(){
console.log(this.changeFunction)
clearInterval(this.changeFunction)
this.changeE=setInterval(()=>{
//判断是大还是小
if(this.start<this.value){
this.start+=this.minUnit;
}
if(this.start==this.value){
return
}
if(this.start>this.value){
this.start-=this.minUnit
}
if(this.start==this.value){
this.changes.push(this.start)
this.changes.shift()
console.log('diyiciok')
clearInterval(this.changeE)
}
},this.interval*10000)
}
},
computed:{
minUnit(){
// 定义最小单位
// 整数是1
// 小数是0.1变化
// return this
if(Number.isInteger(this.value)){
return 1
}else{
return 0.1
}
}
},
mounted(){
console.log(this.value)
}
}
</script>
