Cocos_Creator Tween 动作动画

Tween 提供了一个简单灵活的方法来创建 action。
相对于 Cocos 传统的 cc.Action,cc.Tween 在创建动画上要灵活非常多:

  • 支持以链式结构的方式创建一个动画序列。
  • 支持对任意对象的任意属性进行缓动,不再局限于节点上的属性,而 cc.Action 添加一个属性的支持时还需要添加一个新的 action 类型。
  • 支持与 cc.Action 混用
  • 支持设置 Easing 或者 progress 函数

示例

cc.tween(node)
  .to(1, {scale: 2, position: cc.v3(100, 100, 100)})
  .call(() => { console.log('This is a callback'); })
  .by(1, {scale: 3, position: cc.v3(200, 200, 200)}, {easing: 'sineOutIn'})
  .start(cc.find('Canvas/cocos'));

停止并且移除节点所有正在运行的动作列表。

node.stopAllActions()

缓动效果 Easing 展示

https://easings.net/

常用方法(慢慢加)

  • 开始播放动画 .start()
  • 重复前一个动作 .repeat()
  • 无限重复前一个动作 .repeatForever()
  • 绝对变化 .to(持续时间, [变动属性], [缓动效果])
  • 相对变化 .by(持续时间, [变动属性], [缓动效果])
  • 调用方法 .call(() => {})
  • 闪烁 .blink(持续时间,闪烁次数)
  • 延迟 .delay(延迟时间)

效果例子(慢慢加)

等待2秒后,用1秒的时间横移100像素
cc.tween(node)
  .delay(2)
  .by(1, {position: cc.v2(100, 0)})
  .start()
以每3秒5次的频率,不停闪烁。
cc.tween(node)
  .blink(3, 5)
  .repeatForever()
  .start()
使用缓动横移,模拟冲刺效果。
cc.tween(node)
  .by(1, {position: cc.v2(100, 0)}, {easing: 'quintOut'})
  .start()
posted @ 2020-07-17 10:31  太晓  阅读(7818)  评论(0编辑  收藏  举报