UE4 Slate四 SlateUI如何做动画「建议收藏」

UE4 Slate四 SlateUI如何做动画「建议收藏」原创文章,转载请注明出处。点击观看上一篇《UE4Slate三SlateUI代码讲解》点击观看下一篇《UE4Slate五开篇》虚幻引擎SlateUI介绍1>前言2>SlateAnimation代码1>前言我们都知道在UMG里面如何创建一个UMG的动画,其实就是时间帧动画。那么在Slate纯手写的代码上如何做动画呢?2>SlateAnimation代码…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

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

点击观看上一篇《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)》

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185981.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号