none
如何在动画期间改变图片 RRS feed

  • 问题

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

    请大牛指教。

    2012年5月31日 7:10

答案

  • 你好,

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

    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;
            }
    2012年6月1日 3:30
    版主

全部回复

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

    专注于Windows Phone

    2012年5月31日 8:15
    版主
  • 你好,

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

    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;
            }
    2012年6月1日 3:30
    版主