最近编写剧情，用到了Gtween动画，用于改变透明度、位置、缩放、颜色，还有对Gtween动画的加速和销毁
1.改变组件透明度

fgui.GTween.to(0, 1, time)
    .setTarget(this.ui, `alpha`)
    .setEase(fgui.EaseType.CubicOut).onComplete(() => {
        //透明度改变完成
    }, this);

2.改变位置

fgui.GTween.to2(this.ui.x, this.ui.y, this.ui.x + variationX, this.ui.y + variationY, time)
    .setTarget(this.ui, this.ui.setPosition)
    .setEase(fgui.EaseType.CubicOut).onComplete(() => {
        //位置改变完成
    }, this);

3.改变缩放

 fgui.GTween.to2(this.ui.scaleX, this.ui.scaleY, endScaleX, endScaleY, time)
     .setTarget(this.ui, this.ui.setScale)
     .setEase(fgui.EaseType.CubicOut).onComplete(() => {
         //缩放完成
     }, this);

4.改变颜色（这里只改变bgr,改变abgr同理使用to4）

const b = this.ui.color.getB();
const g = this.ui.color.getG();
const r = this.ui.color.getR();
fgui.GTween.to3(b, g, r, 255, 255, 255, time).onUpdate((tweenValue: any) => {
   this.ui.color = new cc.Color(tweenValue.value.z, tweenValue.value.y, tweenValue.value.x, 255);
}, this.ui).setEase(fgui.EaseType.CubicOut).onComplete(() => {
   //颜色改变完成
}, this);

5.对Gtween动画进行加速或销毁

const activeTweensLens = fgui.TweenManager["_totalActiveTweens"];//全局活动的Gtween数组
for (let i = 0; i < activeTweensLens; i++) {
   let tweener = fgui.TweenManager["_activeTweens"][i];
   tweener.setTimeScale(200);//加速Gtween动画完成
   tweener.kill();//销毁Gtween
}

6.列表动画的使用
效果：

原则：过程自己控制，动画完成刷新一次列表

//列表渲染函数
private renderListItem(index: number, item: UI_LwHomeStagePad): void {
   item.data = index;
   //面板展开折叠状态处理(SmallPad为折叠面板，BigPad展开面板)
   const { stageIndex } = this.returnCurDiffData();//获得当前展开的index
   if (index === stageIndex) {//直接设置成展开状态
       item.width = item.m_BigPad.sourceWidth;//初始width
       item.m_BigPad.visible = true;
       item.m_SmallPad.visible = false;
       item.m_SmallPad.x = item.width - item.m_SmallPad.width;
   } else {//直接设置成折叠状态
       item.width = item.m_SmallPad.initWidth;
       item.m_BigPad.visible = false;
       item.m_SmallPad.visible = true;
       item.m_SmallPad.x = 0;
   }
   item.m_SmallPad.onClick(this.chooseBtn, this);//注册折叠面板回调
}
//选择回调
private chooseBtn(event: fgui.Event): void {
   const curIndex = event.initiator.parent.data;
   /*
       展开折叠动效处理
       1.只对视口内的item操作，视口外的item由renderListItem刷新折叠展开状态
       2.动画过程需要屏蔽玩家操作，自行添加
   */
   const numChildren = this.ui.m_List.numChildren;
   for (let i = 0; i < numChildren; i++) {
       const item = <UI_LwHomeStagePad>this.ui.m_List.getChildAt(i);
       if (item.data === this.preIndex) {//已经展开的item进行折叠
           //Fold为折叠动画,tweenUpdate为动画刷新回调需要修改源码，修改方式在下方给出
           item.m_Fold.tweenUpdate = () => {
               //动画播放过程中，需要时刻刷新列表item位置
               const columnGap = this.ui.m_List.columnGap;//列间距
               let from = this.ui.m_List.getChildAt(0).x;
               for (let i = 0; i < numChildren; i++) {
                   const item = this.ui.m_List.getChildAt(i);
                   item.x = from;
                   from += item.width + columnGap;
               }
           }
           item.m_Fold.play(() => {
               //动画播放完成刷新一遍列表（效果应该无变化）
               this.ui.m_List.refreshVirtualList();
           });
       } else if (item.data === curIndex) {//选中的item展开
           //Unfold为展开动画
           item.m_Unfold.tweenUpdate = () => {
               //动画播放过程中，需要时刻刷新列表item位置
               const columnGap = this.ui.m_List.columnGap;//列间距
               let from = this.ui.m_List.getChildAt(0).x;
               for (let i = 0; i < numChildren; i++) {
                   const item = this.ui.m_List.getChildAt(i);
                   item.x = from;
                   from += item.width + columnGap;
               }
           }
           item.m_Unfold.play(() => {
               this.ui.m_List.refreshVirtualList();
           });
       }
   }
}

源码动效添加tweenUpdate函数

注意：
item的动效设置了自动循环播放，勾选“容器组件不可见时自动停止，”，动效所属item，visible设置为false，动效不会停止