节点淡入淡出效果
对于实现淡入淡出效果,creator有已经实现的API
var action = cc.fadeIn(1.0);//渐显
var action = cc.fadeOut(1.0);//渐隐效果
var action = cc.tintTo(2, 255, 0, 255);//修改颜色到指定值
var action = cc.fadeTo(1.0, 0);//修改透明度到指定值
定制DIY动画
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'})
.run(cc.find('Canvas/cocos'));
例如渐显效果的实现:
node.opacity = 0;
cc.tween(node)
.to(1, {opacity: 255})
.start();
上述代码实现了在一秒内,透明度从0变为255的动画
cc.tween的API链接:点我跳转