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 展示
常用方法(慢慢加)
- 开始播放动画 .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()