众所周知cocos自带Action系统,但是写法及其繁琐,而且不能支持指定片段循环,也不支持给自定义属性设置动画,比较麻烦。
所以仿照Tween.js写了一个轻量级的动画系统,可以用于创建一些简单的动画。
并且集成Cocos内部,如果是Cocos Creator环境,则自动挂载到Canvas节点下,由canvas进行刷新动画,从而进行帧同步以及方法调用同步。
如果不是Cocos环境,则默认使用requestAnimationFrame进行刷新。
有兴趣的可以用用看,刚写的不久,目前用着没什么问题,如果有Bug请告知。
- 下载地址:
https://github.com/wheatup/wheen
或者使用
npm install wheen
进行安装
-
用法
// 为this.node创建动画 let wheen = new Wheen(this.node) // 设置起始点(可选) .from({x: 0, y: 0, scaleX: 1, scaleY: 1}) // 在1秒内x轴移动到50像素,注意所有时间都以毫秒为单位 .to({x: 50}, 1000) // 设置一个标志,用于片段循环 .setFlag('START') // 压缩 .to({scaleX: 1.2, scaleY: 0.8}, 50, Wheen.Easing.Cubic.easeIn) // 伸展 .to({scaleX: 0.8, scaleY: 1.2}, 50, Wheen.Easing.Cubic.easeOut) // 跳到空中 .to({y: 500}, 1000, Wheen.Easing.Cubic.easeOut) // 调用一个方法 .callFunc(()=>{console.log("I'm on the air!")}) // 下落 .to({y: this.node.y}, 1000, Wheen.Easing.Cubic.easeIn) // 压缩 .to({scaleX: 1.2, scaleY: 0.8}, 50, Wheen.Easing.Cubic.easeIn) // 还原 .to({scaleX: 1, scaleY: 1}, 50, Wheen.Easing.Cubic.easeOut) // 从“START”位置开始循环到这里,一共循环两次(如果第一个参数不填或者小于等于0则无限循环) // 如果第二个参数不填,则默认从最开始循环到这里 .loop(2, 'START') // 带上下文的回调函数 .callFunc(function(){console.log(`Finished at ${this.x}!`)}, this.node); // 开始这个动画 wheen.start(); // 暂停这个动画 wheen.pause(); // 解除暂停这个对象身上的所有动画 Wheen.resume(this.node); // 停止这个对象身上的所有动画 Wheen.stop(this.node);
-
效果