Cocos Creator 实现节点淡入淡出渐显渐隐的两种方法和如何制作DIY动画实现自己想要的特殊动画效果

节点淡入淡出效果

对于实现淡入淡出效果，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链接：点我跳转