MAUI中为加载时的DataTemplate项添加动画的实现方法

一、CollectionView 项加载动画实现 #

CollectionView自带ItemAppearing事件，可在每个项即将显示时触发动画，是最直接的实现方式。

步骤1：为CollectionView绑定事件 #

修改你的CollectionView代码，添加ItemAppearing事件：

<CollectionView Grid.Row="1" ItemsSource="{Binding List}"
                ItemTemplate="{StaticResource ItemTemplate}"
                ItemAppearing="OnCollectionViewItemAppearing">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" ItemSpacing="10"/>
    </CollectionView.ItemsLayout>
</CollectionView>

步骤2：实现动画逻辑（页面后台代码） #

在页面的.xaml.cs文件中添加事件处理方法，以下是淡入+从下方滑入的基础动画示例：

private async void OnCollectionViewItemAppearing(object sender, ItemVisibilityEventArgs e)
{
    var itemLayout = e.Item as VerticalStackLayout;
    if (itemLayout == null) return;

    // 设置初始状态：完全透明+向下偏移20px
    itemLayout.Opacity = 0;
    itemLayout.TranslationY = 20;

    // 同步执行淡入和平移动画，时长300ms
    await Task.WhenAll(
        itemLayout.FadeTo(1, 300),
        itemLayout.TranslateTo(0, 0, 300, Easing.SpringIn)
    );
}

二、BindableLayout 项加载动画实现 #

BindableLayout没有自带的项出现事件，需要给数据模板内的根控件绑定Loaded事件来触发动画。

步骤1：修改DataTemplate添加Loaded事件 #

更新你的数据模板，为根布局添加Loaded事件：

<DataTemplate x:Key="ItemTemplate">
    <VerticalStackLayout Loaded="OnBindableLayoutItemLoaded">
        <Label Text="{Binding Name}" />
        <Image Source="{Binding Path}" WidthRequest="50" HeightRequest="50"/>
    </VerticalStackLayout>
</DataTemplate>

步骤2：实现动画逻辑（页面后台代码） #

在页面后台添加事件处理方法，这里适配水平布局做淡入+从左侧滑入的动画：

private async void OnBindableLayoutItemLoaded(object sender, EventArgs e)
{
    var itemLayout = sender as VerticalStackLayout;
    if (itemLayout == null) return;

    // 避免控件复用时重复触发动画
    if (itemLayout.Opacity == 1) return;

    // 设置初始状态：完全透明+向左偏移20px
    itemLayout.Opacity = 0;
    itemLayout.TranslationX = -20;

    // 执行动画
    await Task.WhenAll(
        itemLayout.FadeTo(1, 300),
        itemLayout.TranslateTo(0, 0, 300, Easing.CubicInOut)
    );
}

三、自定义动画效果参考 #

你可以根据需求调整动画参数，实现不同效果：

• 调整时长：修改FadeTo/TranslateTo的第二个参数（如500代表500毫秒）
• 更换动画类型：除了淡入、平移，还可使用ScaleTo（缩放）、RotateTo（旋转）等MAUI内置动画
• 缓动函数：MAUI提供Easing.SpringIn、Easing.CubicOut等多种缓动效果，让动画更自然
• 初始状态：垂直布局用TranslationY偏移，水平布局用TranslationX偏移，按需调整偏移量

四、注意事项 #

• 若CollectionView开启了项复用机制，可在ItemDisappearing事件中重置控件状态，避免复用导致动画异常
• 避免使用过于复杂的动画，防止影响列表加载性能
• 若遵循MVVM模式，可将动画逻辑封装为Behavior，实现后台代码解耦

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