UE4 Slate四 SlateUI如何做动画

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

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

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上去之后会进行透明度减小，鼠标离开透明度再变回来

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

谢谢，创作不易，大侠请留步… 动起可爱的双手，来个赞再走呗 <(￣︶￣)>