Cocos Creator implements two methods for nodes to fade in and fade out and fade in and out, and how to make DIY animation to achieve the special animation effect you want

Node fade in and fade out effect

For realizing fade-in and fade-out effects, creator has already implemented 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);//修改透明度到指定值

Custom DIY animation

Tween provides a simple and flexible way to create actions. Compared with the traditional cc.Action of Cocos, cc.Tween is much more flexible in creating animations:

• Supports creating an animation sequence in a chained structure.
• It supports easing of any attribute of any object, no longer limited to attributes on nodes, and cc.Action needs to add a new action type when adding support for an attribute.
• Support for mixing with cc.Action
• Support setting easing or progress function

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'));

For example, the implementation of the fading effect:

node.opacity = 0;
cc.tween(node)
  .to(1, {opacity: 255})
  .start();

The above code realizes the animation
cc.tween whose transparency changes from 0 to 255 within one second API link: Click me to jump