探索.NET MAUI中的基本动画

目录

介绍

使用动画扩展方法

1.淡入淡出(FadeTo)

2.转化为(TranslateTo)

3. 缩放到(ScaleTo)

4. 旋转到(RotateTo)

如何取消动画？

结论

引用

---

介绍

了解如何使用扩展方法在.NET MAUI应用中创建动画。

向用户界面添加动画是增强设计并为用户创造更愉快和直观体验的宝贵方法。.NET MAUI提供了一组基本动画，这些动画逐渐将属性从一个值更改为另一个值一段时间，允许您在应用的视觉元素中感知动画。

若要创建这些动画，可以使用ViewExtensions类提供的扩展方法。在本文中，我将指导您快速实现主要属性：

• FadeTo
• TranslateTo
• ScaleTo
• RotateTo

使用动画扩展方法

使用ViewExtensions类中的动画扩展方法时，将返回一个Task<bool>对象。这些方法是异步的，完成后返回false，而true在失败时返回。现在，让我们探讨一些主要的扩展方法。

1.淡入淡出(FadeTo)

FadeTo的职责是通过以渐进方式更改视觉元素的Opacity属性来创建淡入淡出的动画效果。接收以下参数：

• Opacity[必填]：指示要淡化到的不透明度值。类型：double。
• Length：过渡动画应发生的时间段，以毫秒为单位。类型：uint。其默认值为250。
• Easing：指定将在淡入淡出动画中使用的缓动功能。类型：easing。其默认值为 null。

让我们看一个代码示例：

async void animation()
{
  heart.Opacity = 0;
  await heart.FadeTo(1, 6000);
}

2.转化为(TranslateTo)

TranslateTo负责生成渐进影响视觉元素的X和Y属性的翻译动画效果。接收以下参数：

• X [必填]：最终平移向量的X分量。类型：double。
• Y [必填]：最终平移向量的Y分量。类型：double。
• Length：翻译动画应发生的时间段，以毫秒为单位。类型：uint。其默认值为250。
• Easing：指定将在平移动画中使用的缓动功能。类型：easing。其默认值为null。

让我们看一个代码示例：

async void animation()
{
  await heart.TranslateTo(40, 90, 1000);
}

3. 缩放到(ScaleTo)

它负责通过更改Scale属性来逐步创建视觉元素的动画比例。接收以下参数：

• Scale [必填]：最终的绝对比例。类型：double。
• Length：过渡动画应发生的时间段，以毫秒为单位。类型：uint。其默认值为250。
• Easing：指定将在缩放动画中使用的缓动函数。类型：easing。其默认值为 null。

让我们看一个代码示例：

async void animation()
{
  await heart.ScaleTo(2, 4000);
}

4. 旋转到(RotateTo)

生成一个连续旋转的动画，该动画直接影响可视元素的Rotation属性。接收以下参数：

• Rotation [必填]：最终旋转值。类型：double。
• Length：过渡动画应发生的时间段，以毫秒为单位。类型：uint。其默认值为250。
• Easing：指定将在旋转动画中使用的缓动功能。类型：easing。其默认值为 null。

让我们看一个代码示例：

async void animation()
{ 
  await heart.RotateTo(360, 3000); 
}

⚠ 还可以使用RotateXTo和RotateYTo方法分别对RotationX和RotationY属性进行动画处理。

如何取消动画？

应用程序还可以取消正在进行的动画。您只需要调用CancelAnimations扩展方法，如下所示：

async void animation()
{
  heart.CancelAnimations(); 
}

结论

我希望.NET MAUI中有用的基本动画列表对您有所帮助！我鼓励你把它们应用到你的日常生活中，并继续探索其他东西！

引用

本文基于官方文档：

• Basic animation - .NET MAUI | Microsoft Learn

https://www.telerik.com/blogs/exploring-basic-animations-net-maui