跳到主内容
Documentation

2.添加动画效果悬停并隐藏.md

2025/12/16预计阅读 3 分钟

示例

感觉有点复杂,刚接触也有点懵(´・_・`)

在关键帧上面加上一些透明度变化,和平移变化

img.png

fade.gif

代码实现

使用BindWidgetAnimTransient标记动画变量


UPROPERTY(meta=(BindWidgetAnim),Transient)
UWidgetAnimation* FadeAndLinearHiding;


/**
 * 伤害数字 UI
 */
UCLASS()
class DEMO2_API UUDamageTextWidget : public UMyUserHealthWidget
{
	GENERATED_BODY()

public:

	virtual void NativeConstruct() override;

	UPROPERTY(meta=(BindWidget))
	UTextBlock* DamageTextBlock;

	//向上逐渐消失隐藏效果动画
	UPROPERTY(meta=(BindWidgetAnim),Transient)
	UWidgetAnimation* FadeAndLinearHiding;

	//初始化
	UFUNCTION(BlueprintCallable)
	void InitializeDamageText(const float DamageAmount);

	UFUNCTION()
	void OnFadeAnimationFinished();
};

播放动画

使用PlayAnimation函数播放动画, 使用BindToAnimationFinished绑定动画结束事件,播放完毕后移除UI



void UUDamageTextWidget::NativeConstruct()
{
	Super::NativeConstruct();
	if (FadeAndLinearHiding)
	{
		FWidgetAnimationDynamicEvent EndDelegate;
		EndDelegate.BindDynamic(this, &UUDamageTextWidget::OnFadeAnimationFinished);
		BindToAnimationFinished(FadeAndLinearHiding, EndDelegate);
	}
}

void UUDamageTextWidget::InitializeDamageText(const float DamageAmount)
{
	if (DamageTextBlock)
	{
		const auto DamageText = UKismetTextLibrary::Conv_DoubleToText(-DamageAmount, HalfToEven, false, true, 1, 324);
		DamageTextBlock->SetText(DamageText);
	}
	if (FadeAndLinearHiding)
	{
		PlayAnimation(FadeAndLinearHiding);
	}
}



void UUDamageTextWidget::OnFadeAnimationFinished()
{
	UMyLogTool::Debug("销毁伤害数字 UI");
	RemoveFromParent();
}

返回顶部