如何在.NET MAUI内容页中使用WPF风格的Storyboard动画

.NET MAUI提供了和WPF Storyboard功能等效的动画系统，你可以通过XAML或C#代码两种方式创建时序动画，核心是用Storyboard（XAML）或者Animation类（代码）来控制多个动画的时序和目标元素。

XAML 实现示例 #

下面是一个类WPF Storyboard的XAML动画示例，实现Label的淡入和水平移动效果：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAnimations.MainPage">

    <ContentPage.Resources>
        <!-- 定义组合Storyboard动画 -->
        <Storyboard x:Key="LabelAnimation">
            <!-- 淡入动画：控制Opacity属性从0到1，持续1.5秒 -->
            <DoubleAnimation
                Storyboard.TargetProperty="Opacity"
                From="0"
                To="1"
                Duration="1500" />
            
            <!-- 水平移动动画：控制TranslationX属性从-100到0，与淡入动画并行执行 -->
            <DoubleAnimation
                Storyboard.TargetProperty="TranslationX"
                From="-100"
                To="0"
                Duration="1500" />
        </Storyboard>
    </ContentPage.Resources>

    <StackLayout Padding="20" VerticalOptions="Center">
        <Label x:Name="AnimatedLabel" 
               Text="MAUI Storyboard动画示例" 
               FontSize="Large"
               Opacity="0" />
        
        <Button Text="启动动画" 
                Clicked="OnStartAnimationClicked"
                Margin="0,20,0,0" />
    </StackLayout>
</ContentPage>

后台代码触发动画：

private void OnStartAnimationClicked(object sender, EventArgs e)
{
    var storyboard = (Storyboard)Resources["LabelAnimation"];
    // 绑定动画目标元素
    storyboard.SetValue(Storyboard.TargetProperty, AnimatedLabel);
    storyboard.Begin();
}

XAML动画关键要点 #

• Storyboard.TargetProperty：指定要动画的元素属性，支持大多数可绑定数值属性（如Opacity、TranslationX/Y、Scale等）
• Duration：动画持续时间，单位为毫秒
• 多动画默认并行执行，若需串行，可给后续动画设置BeginTime属性（例如BeginTime="1500"表示延迟1.5秒启动）

C# 代码实现示例 #

如果偏好代码控制，MAUI的Animation类可组合多个动画，实现与Storyboard一致的效果：

private void OnStartAnimationClicked(object sender, EventArgs e)
{
    // 淡入动画：从0到1修改Opacity
    var fadeAnim = new Animation(
        callback: value => AnimatedLabel.Opacity = value,
        start: 0,
        end: 1,
        length: 1500);
    
    // 水平移动动画：从-100到0修改TranslationX
    var translateAnim = new Animation(
        callback: value => AnimatedLabel.TranslationX = value,
        start: -100,
        end: 0,
        length: 1500);
    
    // 组合两个动画
    var combinedAnim = new Animation();
    combinedAnim.Add(0, 1, fadeAnim);
    combinedAnim.Add(0, 1, translateAnim);
    
    // 启动动画，设置完成回调
    combinedAnim.Commit(
        owner: AnimatedLabel,
        name: "LabelCombinedAnimation",
        rate: 16, // 近似60帧/秒
        length: 1500,
        finished: (completedValue, wasCancelled) => 
        {
            // 动画完成后重置状态（可选）
            AnimatedLabel.TranslationX = 0;
        });
}

额外注意事项 #

• 若需更复杂的分段动画，可使用KeyFrameAnimation定义多阶段属性值
• 优先使用Translation、Scale、Opacity这类视觉属性做动画，布局类属性（如WidthRequest）的动画效果可能受布局系统限制
• 动画启动后可通过AnimationExtensions.AbortAnimation()方法终止

内容的提问来源于stack exchange，提问作者JPA