Cocos 3.x 菜鸟一起玩:UI的透明度动画

UI的动画可以通过播放来增强视觉上的体验。

UI的动画需要什么来制作？

Tween是一个比较常用的动画库。用于改变节点动画。

下面看看如何快速制作？当前使用版本为3.8.4版本

1. 新建一个场景

新建一个场景名为home ，打开项目设置窗口，设置宽度和高度为750x1624尺寸。添加一个节点Sprite 精灵节点，一会需要将图片添加到场景中

2.加入Sprite的图片

任意选择一张图片导入到资源管理器，创建一个固定名字的叫resources文件夹，这个文件夹下创建images的图片。在第一次拖进的素材当中，要选择观察的图片类型。

当第一次见到类型为texture 需要修改sprite-frame的类型。这样sprite 可以将图片展示到场景当中了。完成后，将logo素材拖到Sprite组件当中的Sprite Frame 中去。

3.添加透明组件

cocos 在3.x后 想改变透明度的时候，需要添加名为cc.UIOpacity 组件,此组件可以修改0 - 255的透明度，让节点产生变化。

奇怪的是Color 的选项当中提供了透明度的调整是否也可以改变Sprite的透明度呢？答案是可以的。打开Color的面板选择A的拖动条就可以设置透明度变化了。

4.尝试修改变化

当我们修改Logo的透明度组件值为100的时候，透明度会立即反馈在场景当中。然而要控制让其产生变化动画。还需要添加一段小代码，将其绑定在节点当中去执行相应的代码逻辑。

5.添加代码产生动画效果

新建一个代码，名为Logo，将代码拖到组件进行节点绑定。添加引入tween作为代码。这个代码对一个节点组件产生变化。让其产生有一些呼吸灯的效果。其思路是从255 到0 再到255 反复来回，不让其停止。

import { _decorator, Component, easing, Node, tween, UIOpacity } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Logo')
export class Logo extends Component {
    start() {
          //让动画重复播放
        tween(this.getComponent(UIOpacity))
          .to(0.5,{opacity:0})
          .delay(0.2)
          .to(0.5,{opacity:255})
          .union()               //联合2个动画过程
          .repeatForever()  // 重复执行
          .start()
    }
}

6.运行结果

点击运行 ，选择当前的场景。让其运行。观察运行的效果。Cocos 3.x提供了内置和浏览器场景提供开发者选择。观察下图可以看到呼吸的变化。

7.封装一个呼吸效果函数

每次如果手动添加透明度组件会比较繁琐，当组件不存在的时候，这样动态添加一下组件，并把两段动画串联在一起播放。这样就可以对随意的节点进行呼吸效果了。产生的透明度变化。

     private fadeInOut(node: Node, duration: number=0.5) {
         const uIOpacity = node.getComponent(UIOpacity) ? node.getComponent(UIOpacity) : node.addComponent(UIOpacity);
         if (uIOpacity) {
              uIOpacity.opacity = 10;
              const seq = tween(uIOpacity).sequence(
              tween(uIOpacity).to(duration, { opacity: 255 }),
              tween(uIOpacity).to(duration, { opacity: 10})
             )
              seq.repeatForever().start();
          }
    }

8.小结

让一个节点产生透明度变化，如果单纯想控制颜色变化。也可以使用tween 组合颜色值，在Update函数进行变化。这个地方就不进行展开。有了以上透明度变化，在日常开发当中可以封装在一些场景中，如走路，卡片发光呼吸等场变化。