动画是游戏内必必不可少的功能,在AS3时代强大的类库TweenMax,在H5页游时代,各大引擎都有了自己的相对于TweenMax的部分功能的实现,Cocos Creator 还结合了Action 做了很多拓展,但是有时候我们需要一些常见的功能比如对于数字变化的效果,此时如果自己写就要控制好很多参数,那么网上有没有轮子呢,答案是:有

介绍

CountUp.js 是一个零依赖的轻量a级 JavaScript 库,可用于快速创建以更有趣的方式显示数字的动画。虽然这个是个H5页面的类库,但是不影响把他迁移到Cocos Creator 项目里。这个库有Typescript和JavaScript版本,还有演示的官网。可以说对于游戏开发者和想省事的开发者确实是个福音。

说干就干,接下来先放上两个链接:

演示地址样式:

image-20200305155218350

可以看出 有很多可以配置的参数和选项:

参数:
  • target = html元素的id,input,svg text元素,或者计数发生时先前选择的元素/输入的var
  • startVal = 你要开始的值
  • endVal = 你想要达到的价值
  • decimals = (可选)数字中的小数位数,默认为0
  • duration = (可选)持续时间(以秒为单位),默认为2
  • options = (可选,请参阅demo)格式化/easing选项对象

可以省略小数,持续时间和选项以使用默认值。

比如:

1
2
var numAnim = new CountUp("SomeElementYouWantToAnimate", 24.02, 99.99);
numAnim.start();

或者:

1
2
3
4
5
6
numAnim.start(someMethodToCallOnComplete);

// or an anonymous function
numAnim.start(function() {
// do something
})

接下来说说如何修改 其实 就是修改 :targetprintValue() 这个方法:

target赋值 原代码:

1
this.el = (typeof target === 'string') ? document.getElementById(target) : target;

修改为:

1
this.el = target;

printValue() 方法 原代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
CountUp.prototype.printValue = function (val) {
var result = this.formattingFn(val);
if (this.el.tagName === 'INPUT') {
var input = this.el;
input.value = result;
}
else if (this.el.tagName === 'text' || this.el.tagName === 'tspan') {
this.el.textContent = result;
}
else {
this.el.innerHTML = result;
}
};

修改为:

1
2
3
4
CountUp.prototype.printValue = function (val) {
var result = this.formattingFn(val);
this.el.string = result;
};

此时我们应该这样调用:

1
2
3
4
5
6
7
8
9
10
11
12
13
const options = {
startVal: 50,//开始的值
  decimalPlaces: 2,//小数点后几位
duration: 2.0,//多久时间
  useGrouping: false,
};
let myTargetElement = XXXXX(类型为cc.Label类型)
let demo = new CountUp(myTargetElement, 94.62, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

number

以上就是这个数字动画的用法。

参考