原创文章，转载请注明出处。

点击观看上一篇《UE4 Slate三 SlateUI代码讲解》
点击观看下一篇《UE4 Slate五 SlateUI如何自定义样式(Custom Style)》

虚幻引擎 SlateUI介绍

1>前言
2>SlateAnimation代码
- 2.1>头文件
- 2.2 CPP实现
- 2.3 代码分析
- - 2.3.1 SLATE_DEFAULT_SLOT宏介绍
  - 2.3.2 构造中对上面的宏定义的变量进行赋值
  - 2.3.3外部SNew(SMyAnimationSlate)
3>下面来看看效果，和文章开始的图一样

1>前言

我们都知道在UMG里面如何创建一个UMG的动画，其实就是时间帧动画。那么在Slate纯手写的代码上如何做动画呢？

2>SlateAnimation代码

先看看做出来的效果

我们将会用到Engine里面的FCurveSequence，对我们新建的Slate做一个透明度渐变的动画。

对此我新建了一个Slate的类

2.1>头文件

//外部Slot里面的都是作为这个Slate里面的ChildSlot出现
SLATE_DEFAULT_SLOT(FArguments, OutSlots)

//Slate动画演示类
class SMyAnimationSlate : public SCompoundWidget /*public SUserWidget*/
{public://SLATE_BEGIN_ARGS+SLATE_END_ARGS 其实是一个结构体, 内部写的东西都相当于写在了一个结构体里面SLATE_BEGIN_ARGS(SMyAnimationSlate){_Visibility = EVisibility::SelfHitTestInvisible;}//外部Slot里面的都是作为这个Slate里面的ChildSlot出现SLATE_DEFAULT_SLOT(FArguments, OutSlots)SLATE_END_ARGS()//外部执行SNew或者SAssignNew时候会调用Construct()void Construct(const FArguments& InArgs);//鼠标进入virtual void OnMouseEnter(const FGeometry& MyGeometry, const FPointerEvent& MouseEvent) override;//鼠标离开virtual void OnMouseLeave(const FPointerEvent& MouseEvent) override;//颜色变化FLinearColor SlateColorChanged();
private://Slate动画对象FCurveSequence MySlateCurveSequence;
};

2.2 CPP实现

void SMyAnimationSlate::Construct(const FArguments& InArgs)
{MySlateCurveSequence = FCurveSequence(0.f, 1.f);ColorAndOpacity = TAttribute<FLinearColor>::Create(TAttribute<FLinearColor>::FGetter::CreateSP(this, &SMyAnimationSlate::SlateColorChanged));ChildSlot[InArgs._OutSlots.Widget];
}void SMyAnimationSlate::OnMouseEnter(const FGeometry& MyGeometry, const FPointerEvent& MouseEvent)
{if (!MySlateCurveSequence.IsAtEnd()){if (MySlateCurveSequence.IsInReverse() && MySlateCurveSequence.IsPlaying()){MySlateCurveSequence.Reverse();}else if (!MySlateCurveSequence.IsPlaying()){MySlateCurveSequence.Play(this->AsShared());}}
}void SMyAnimationSlate::OnMouseLeave(const FPointerEvent& MouseEvent)
{if (!MySlateCurveSequence.IsAtStart()){if (!MySlateCurveSequence.IsInReverse() && MySlateCurveSequence.IsPlaying()){MySlateCurveSequence.Reverse();}else if (!MySlateCurveSequence.IsPlaying()){MySlateCurveSequence.PlayReverse(this->AsShared());}}
}FLinearColor SMyAnimationSlate::SlateColorChanged()
{return FLinearColor(1, 1, 1, 1 - MySlateCurveSequence.GetLerp());
}

2.3 代码分析

2.3.1 SLATE_DEFAULT_SLOT宏介绍

SLATE_DEFAULT_SLOT这个宏是为了获取到外部的Slot，
比如外部
SNew(SMyAnimationSlate)
[
括号里面写的所有Slate都会作为一个整体传进来，我们就是想在外部SNew这个类，下面所有子节点都能应用我们的渐变动画。
]

//外部Slot里面的都是作为这个Slate里面的ChildSlot出现
SLATE_DEFAULT_SLOT(FArguments, OutSlots)

2.3.2 构造中对上面的宏定义的变量进行赋值

然后去Cpp构造里面实现一下, 没有为什么，按照下面写就是了。

void SMyAnimationSlate::Construct(const FArguments& InArgs)
{ChildSlot[InArgs._OutSlots.Widget];
}

那么外部是怎么SNew(SMyAnimationSlate) 这个渐变动画对象呢?

2.3.3外部SNew(SMyAnimationSlate)

SNew(SMyAnimationSlate)
[
这个里面的所有SNew的slot就是SLATE_DEFAULT_SLOT(FArguments, OutSlots)这个，目的是不用传值直接给过来。然后我们整体对其做动画。
]

//测试动画的
+ SConstraintCanvas::Slot()
.Anchors(0.f)
.Offset(FMargin(100, 600, 200, 200))    //这个可能会迷惑, 第一个参数在这是PositionX, 第二个参数在这是PositionY, 第三个参数在这是SizeX, 第四个参数在这是SizeY.找不到设置坐标的同学注意看这里
.Alignment(FVector2D(0.f, 0.f)) //同样的, 对应Alignment是个FVector2D
.AutoSize(false)            //对应AutoSize
.ZOrder(0)
[SNew(SMyAnimationSlate)[SNew(SButton).HAlign(HAlign_Center).VAlign(VAlign_Center).ContentPadding(0.f).OnClicked(this, &SMainSlate::OnFirstSButton_OnClicked)   //事件绑定的技巧, 转到定义, 看那边的代理是怎么定义的, 把参数和返回值拿过来定义一个函数即可.OnPressed(this, &SMainSlate::OnFirstSButton_OnPressed).OnReleased(this, &SMainSlate::OnFirstSButton_OnReleased).OnHovered(this, &SMainSlate::OnFirstSButton_OnHovered).OnUnhovered(this, &SMainSlate::OnFirstSButton_OnUnhovered)[SNew(STextBlock).Text(LOCTEXT("SMainSlate_ButtonSlateAnimation_Text3333", "测试Slate动画")).Font(FCoreStyle::GetDefaultFontStyle("Roboto", 24))]]
]

3>下面来看看效果，和文章开始的图一样

鼠标Hover上去之后会进行透明度减小，鼠标离开透明度再变回来