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>