今天刚来的一个小需求,要实现文本的逐渐变化。
第一时间就是想到论坛白嫖一个,但是貌似没有白嫖到
。既然没有,那就只能手撸了。
1. 如何下手开撸了
分析了下需求,实际上就是一个数值由0-100,那么要做的是补全0到100的过程,例如0 1 2 3、、、100这样的变化过程,然后由文本来显示出来即可。既然这个需求实现是要完成这个"补间"的效果,那么首先就是打开文档搜索Tween了。
2. 开撸前的准备,搜索文档查看Tween
发现文档有这样的一个描写 “支持缓动任意对象的任意属性”,此处甚合我意。

而且也给出了实例,那么就来开始小撸一把。“ctrl cv”大法就是好啊。
“ctrl cv”过来一看,不行啊。“console.log”不知道该怎么插???

出现了问题不要慌,让我们略略思索下,既然本身不给插入的地方,那么就换个地方插不也行。好,那我们就换个地方。


嘿嘿,预期的数值变化是得到了 。那么我们把这个数值赋值给文本来使用就好了的。
打完收工了???怎么裤子都还没脱,就完事了?

3. 是不是太快了
为了强行加点时间,还是得再卖卖力。那么我们接着看下tween文档的。
哦豁,又有新的发现。"可以自定义peogress"啥意思了?就是可以控制 缓动的过程,快快慢慢慢,慢慢快快快…是不是有点意思?

有意思的话,那我们就在尝试尝试了?

上来就是一套操作猛如虎,一看战绩零杠五。打印日志看一看。

分析下几个参数,tart就是起始数值,end是结束数值,current是当前数值为undefined,ratio就是一个变化的速率了。那么就很好搞了嘛。

再打印看看数值的变化,

非常的nice,最后把这个数值赋值给文本就ok了。最后预览看看效果。

不行尺寸有点太长了,稍微处理下,

再来看看效果。

到此ok ,效果非常的nice.
4. 打完收工,声明下正经帖子哈。 手动狗头保命。
支持下 tween 是可以 tween 任意对象的
