为Cocos Creator写的Tween动画插件,有兴趣可以看看

众所周知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);
    
  • 效果

9赞

支持支持!

mark

Creator 已经内部支持了 cc.Tween 了哦: https://github.com/cocos-creator/engine/pull/3660

额,看了下这个不就是cc.Action吗…… :sweat_smile:

官方的tween也是可以对任何属性做动画的,应该和你这个一样。

tweenlite 不行么?

这个怎么没有写在官方文档,害的我一番好找。

mark

2019-05-07 更新版本1.1.1

  • 新增支持嵌套对象的tween

  • 新增基础事件回调系统

楼主白忙活了,自带啦
可以考虑去Cocos上班呗

没白忙活:joy:

这个插件脱离cocos creator也可以用,结合我写的dom包装器

https://www.npmjs.com/package/doper

可以像操纵ccc的node一样操纵dom元素,还可以做纯HTML动画

1赞

mark一下

给劲~

进行帧同步以及方法调用同步 有例子吗?谢谢

针眼点赞!

点赞一下

点个赞 举高高

mackmack

最新的库在2.4.2版本中无法正常使用