Xamarin Forms：使用C#实现图片源切换的滑入动画效果

嘿，我刚好处理过一模一样的需求！在MVVM场景下实现图片源切换时的滑入动画，核心思路是用两个重叠的Image控件配合动画触发器，而不是直接给单个Image的Source变化加动画——毕竟单个Image换Source时很难做连贯的滑入效果。下面给你一步步拆解实现方案：

我们需要一个容器（比如Grid）来放两个完全重叠的Image：

• 一个作为「当前显示层」，展示当前的图片
• 另一个作为「过渡层」，平时隐藏，当新图片到来时从侧边滑入，覆盖当前层
  当ViewModel的图片源更新时，触发过渡层的滑入动画，动画完成后把过渡层的图片同步给当前层，再隐藏过渡层，等待下一次切换。

第一步：XAML布局与动画 #

<Grid>
    <!-- 当前显示的图片 -->
    <Image x:Name="CurrentImage" 
           Source="{Binding CurrentImageUrl}"
           Stretch="UniformToFill" />

    <!-- 过渡用的图片（滑入层） -->
    <Image x:Name="TransitionImage" 
           Source="{Binding NextImageUrl}"
           Stretch="UniformToFill"
           Opacity="0">
        <Image.RenderTransform>
            <TranslateTransform x:Name="TransitionTransform" X="-800" /> <!-- 初始位置在屏幕左侧外 -->
        </Image.RenderTransform>
        <Image.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard x:Name="SlideInStoryboard">
                        <!-- 滑入动画：从左侧移到0位置，同时淡入 -->
                        <DoubleAnimation Storyboard.TargetName="TransitionTransform"
                                         Storyboard.TargetProperty="X"
                                         From="-800" To="0"
                                         Duration="0:0:0.5" />
                        <DoubleAnimation Storyboard.TargetName="TransitionImage"
                                         Storyboard.TargetProperty="Opacity"
                                         From="0" To="1"
                                         Duration="0:0:0.5" />
                        <!-- 动画完成后触发ViewModel的命令，更新当前图片 -->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Tag">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="AnimationCompleted" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>
    </Image>
</Grid>

第二步：ViewModel逻辑 #

ViewModel里需要三个关键属性/命令：

• CurrentImageUrl：绑定当前显示的图片源
• NextImageUrl：绑定过渡层的图片源
• OnAnimationCompletedCommand：监听动画完成事件，用来同步图片状态

public class ImageViewModel : INotifyPropertyChanged
{
    private string _currentImageUrl;
    public string CurrentImageUrl
    {
        get => _currentImageUrl;
        set { _currentImageUrl = value; OnPropertyChanged(); }
    }

    private string _nextImageUrl;
    public string NextImageUrl
    {
        get => _nextImageUrl;
        set { _nextImageUrl = value; OnPropertyChanged(); }
    }

    public ICommand OnAnimationCompletedCommand { get; }

    public ImageViewModel()
    {
        OnAnimationCompletedCommand = new RelayCommand(HandleAnimationCompleted);
    }

    // 调用这个方法来切换图片
    public void SwitchImage(string newImageUrl)
    {
        // 先给过渡层赋值新图片
        NextImageUrl = newImageUrl;
        // 强制刷新过渡层的Loaded事件（如果之前已经加载过）
        TransitionImage.Visibility = Visibility.Collapsed;
        TransitionImage.Visibility = Visibility.Visible;
    }

    private void HandleAnimationCompleted()
    {
        // 动画完成后，把过渡层的图片同步给当前层
        CurrentImageUrl = NextImageUrl;
        // 重置过渡层的位置和透明度
        TransitionTransform.X = -800;
        TransitionImage.Opacity = 0;
    }

    // INotifyPropertyChanged实现（省略，你应该已经有了）
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

• 滑入方向：如果想要右滑入，把TranslateTransform的初始X设为800（屏幕右侧外），动画To设为0即可
• 动画时长：调整Duration的值可以控制滑入速度，比如0:0:0.3就是300毫秒完成
• MVVM绑定优化：如果不想在ViewModel里直接操作UI元素（比如TransitionImage），可以用EventToCommand类库工具来绑定动画完成事件，避免ViewModel依赖UI
• 适配不同屏幕：不要写死-800这种固定值，可以用ActualWidth来动态获取容器宽度，比如在代码里设置TransitionTransform.X = -Grid.ActualWidth

这样就能实现和轮播图一样的滑入切换效果，完全适配MVVM的图片源绑定场景啦！

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