V7投稿 | 使用Tween实现数值滚动

今天刚来的一个小需求,要实现文本的逐渐变化。
第一时间就是想到论坛白嫖一个,但是貌似没有白嫖到 :joy:。既然没有,那就只能手撸了。

1. 如何下手开撸了
分析了下需求,实际上就是一个数值由0-100,那么要做的是补全0到100的过程,例如0 1 2 3、、、100这样的变化过程,然后由文本来显示出来即可。既然这个需求实现是要完成这个"补间"的效果,那么首先就是打开文档搜索Tween了。

2. 开撸前的准备,搜索文档查看Tween
发现文档有这样的一个描写 “支持缓动任意对象的任意属性”,此处甚合我意。
image
而且也给出了实例,那么就来开始小撸一把。“ctrl cv”大法就是好啊。
“ctrl cv”过来一看,不行啊。“console.log”不知道该怎么插???
image
出现了问题不要慌,让我们略略思索下,既然本身不给插入的地方,那么就换个地方插不也行。好,那我们就换个地方。
image
image
嘿嘿,预期的数值变化是得到了 。那么我们把这个数值赋值给文本来使用就好了的。
打完收工了???怎么裤子都还没脱,就完事了? :joy: :joy: :joy:

3. 是不是太快了
为了强行加点时间,还是得再卖卖力。那么我们接着看下tween文档的。
哦豁,又有新的发现。"可以自定义peogress"啥意思了?就是可以控制 缓动的过程,快快慢慢慢,慢慢快快快…是不是有点意思?
image
有意思的话,那我们就在尝试尝试了?
image
上来就是一套操作猛如虎,一看战绩零杠五。打印日志看一看。
image
分析下几个参数,tart就是起始数值,end是结束数值,current是当前数值为undefined,ratio就是一个变化的速率了。那么就很好搞了嘛。
image
再打印看看数值的变化,
image
非常的nice,最后把这个数值赋值给文本就ok了。最后预览看看效果。
20240321205134_rec_-convert
不行尺寸有点太长了,稍微处理下,
image
再来看看效果。
20240321205333_rec_
到此ok ,效果非常的nice.

4. 打完收工,声明下正经帖子哈。 手动狗头保命。

2赞

:smiley: 支持下 tween 是可以 tween 任意对象的

支持一下!!
话说可以直接在tween的onUpdate回调里直接用obj.a的值,不用自定义progress方法。也可以直接在脚本的update方法里,直接每帧+1,直接赋值给string,感觉更方便。 :sweat_smile:

哈哈,试了下onUpdatede,确实可以实现的。
image

但是很好奇,这个onUpdate是哪里找到的啊

重载a的set函数就行了,tween都不需要改。
当a发生变化他的set函数自然会修改label的string

好想法,哈哈

就文档里,https://docs.cocos.com/creator/manual/zh/tween/tween-function.html, ITweenOption 接口说明

第一次使用ccc的tween就注意到了,以前的action是特写了各种动作,tween则是一个通用的任意对象任意数据缓动变化的工具。

这种变化我以前写过。不过我没有用tween,而是用update去自己实现。通过百分比变化+最小变化值限制来实现,这样在数值变化很大时能够高速变化,然后逐渐变慢。

1赞

good!!