MVVM 中的动画图像答案

【问题标题】：Animating Image in MVVMMVVM 中的动画图像
【发布时间】：2016-05-09 04:32:11
【问题描述】：

我有如下定义的视图模型的视图

<DataTemplate DataType="{x:Type local:TestViewModel}">
    <Grid>                
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
            <Button Name="btnStart" Command="{Binding Start}" Margin="5,0,5,0" />
            <Button Name="btnCancel" Command="{Binding Cancel}" Margin="5,0,5,0" />
        </StackPanel>
    </Grid>
</DataTemplate>

因此，当我单击 startButton 时，我想开始动画，即我想将箭头图像从屏幕顶部移动到底部。我尝试在网格中定义图像，在样式中定义故事板并将 datatrigger 附加到属性。但这会导致整个 ui 扩展而不是动画在屏幕上移动。

我希望动画在我的 stackPanel 上移动。我该怎么做？

【问题讨论】：

您能否提供完整代码以及ArrowImage 以及您在其上定义DataTemplate 的控件

标签： wpf animation mvvm

【解决方案1】：

请尝试下一个动画示例（它使用了图像的 TranslateTransform）：

<Grid x:Name="AnimationAreaRootGrid">
        <Image x:Name="Image" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Res/Koala.jpg" Width="50" Height="50" RenderTransformOrigin="1.0,1.0">
            <Image.RenderTransform>
                <TranslateTransform />
            </Image.RenderTransform>
        </Image>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom" >
            <Button Name="btnStart" Content="Animate Down" Margin="5,0,5,0">
                <Button.Resources>
                    <Storyboard x:Key="DownMovingStoryBoardKey" Storyboard.TargetName="Image">
                        <!--From - the animation start point-->
                        <!--From - the animation end point-->
                        <DoubleAnimation Storyboard.TargetProperty="(Control.RenderTransform).(TranslateTransform.Y)"
                                     From="0"
                                     To="250"
                                     Duration="0:0:1" />
                    </Storyboard>
                </Button.Resources>
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource DownMovingStoryBoardKey}"/> 
                    </EventTrigger>
                </Button.Triggers>
            </Button>
            <Button Name="btnCancel"  Margin="5,0,5,0" Content="Animate Up">
                <Button.Resources>
                    <Storyboard x:Key="UpMovingStoryBoardKey" Storyboard.TargetName="Image">
                        <!--From - the animation start point-->
                        <!--From - the animation end point-->
                        <DoubleAnimation Storyboard.TargetProperty="(Control.RenderTransform).(TranslateTransform.Y)"
                                     From="250"
                                     To="0"
                                     Duration="0:0:1" />
                    </Storyboard>
                </Button.Resources>
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource UpMovingStoryBoardKey}"/>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </StackPanel>
    </Grid>

说明

单击 btnStart 将触发向下移动动画，因此图像将向下移动。
单击 btnCancel 将触发向上移动动画，因此图像将向上移动。

问候。

【讨论】：

【解决方案2】：

我会使用 Canvas 并通过更改 Canvas.Left/Canvas.Top -values 来为您的 Image 设置动画。

Canvas 与StackPanel 不同，在进行自己的布局时不受其子项的影响。缺点是你必须找到StackPanel 的坐标，如果StackPanel 坐标的动画是必需的。

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
    <Canvas>
        <Image ... />
    </Canvas>
    <Button  Name="btnStart" Command="{Binding Start}"  Margin="5,0,5,0" ></Button>
    <Button Name="btnCancel" Command="{Binding Cancel}" Margin="5,0,5,0"></Button>
</StackPanel>

【讨论】：

添加画布不会影响其他控件。将对此进行更多探索，谢谢:)

【解决方案3】：

使用TranslateTransform 为您的Image 设置动画效果如何？将它与UIElement.RenderTransform 属性一起使用，您不会影响视图其余部分的布局。

有关 WPF 转换的更多信息： https://msdn.microsoft.com/en-us/library/ms750596(v=vs.100).aspx

WPF 动画的概述： https://msdn.microsoft.com/en-us/library/ms752312(v=vs.100).aspx

【讨论】：