如何在动画期间改变图片

Question

我想使用StoryBoard动画移动一个图片，在移动到一半的位置，想改变显示的图片。比如扑克发牌，开始是背面，在发牌过程中旋转，到达时是正面，这种编程怎么实现？

请大牛指教。

Answer 1

用两个动画拼接就可以了。

---

专注于Windows Phone

Answer 2

你好，

以下代码实现了在图片移动过程中当过了一定时间后图片改变。作为参考：

MainPage.xaml

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.Resources>
                <Storyboard x:Name="myStoryBoard1"  Completed="myStoryBoard1_Completed" >           
                    <DoubleAnimation x:Name="goX1" Storyboard.TargetName="Image1"
Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:5" From="0" To="200"/>  
                </Storyboard>
                <Storyboard x:Name="myStoryBoard2">
                    <DoubleAnimation x:Name="goX2" Storyboard.TargetName="Image2"
Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:5"  From="200" To="400"/>
                </Storyboard>
            </Grid.Resources>
            <Canvas >
                <Image x:Name="Image1" Height="50" Width="50" Source="Images/1.jpg"  Canvas.Left="0"  Canvas.Top="100">
                </Image>
                <Image x:Name="Image2" Visibility="Collapsed" Height="50" Width="50" Source="Images/2.jpg"   Canvas.Left="200" Canvas.Top="100">
                </Image>
                <Button Canvas.Left="140" Canvas.Top="332" Content="Button" Height="71" Name="button1" Width="160" Click="button1_Click" />
            </Canvas>
        </Grid>

MaiPage.xaml.cs

 private void button1_Click(object sender, RoutedEventArgs e)
        {
            myStoryBoard1.Begin();
        }
        private void myStoryBoard1_Completed(object sender, EventArgs e)
        {
            Image1.Visibility = Visibility.Collapsed;
            myStoryBoard2.Begin();
            Image2.Visibility = Visibility.Visible;
        }