WPF学习笔记--图片点击旋转切换到另一张图片

最新推荐文章于 2021-11-11 08:58:53 发布

原创最新推荐文章于 2021-11-11 08:58:53 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

WPF 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用WPF实现的图片翻转动画效果。通过两个重叠的图片和ScaleTransform结合Storyboard来实现从一张图片翻转到另一张图片的动画效果。当用户点击任一图片时，图片会触发翻转动画。

看效果图:

前台代码:

<Window.Resources>
        <Storyboard x:Key="sb" >
            <DoubleAnimation Storyboard.TargetName="imageScale1" Storyboard.TargetProperty="ScaleX" From="1" To="0" Duration="0:0:1"></DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="imageScale2" Storyboard.TargetProperty="ScaleX" From="0" To="-1" Duration="0:0:1" BeginTime="0:0:1"></DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="sb1" >
          
            <DoubleAnimation Storyboard.TargetName="imageScale2" Storyboard.TargetProperty="ScaleX" From="-1" To="0" Duration="0:0:1" ></DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="imageScale1" Storyboard.TargetProperty="ScaleX" From="0" To="1" Duration="0:0:1" BeginTime="0:0:1"></DoubleAnimation>
        </Storyboard>
    </Window.Resources>
    <Grid>
        <Image Source="4.jpg" Height="100" Width="100" MouseLeftButtonDown="Image_MouseLeftButtonDown" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <ScaleTransform x:Name="imageScale1"></ScaleTransform>
            </Image.RenderTransform>
        </Image>
        <Image Source="5.jpg" Height="100" Width="100" MouseLeftButtonDown="Image_MouseLeftButtonDown_1" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <ScaleTransform x:Name="imageScale2" ScaleX="0"></ScaleTransform>
            </Image.RenderTransform>
        </Image>
    </Grid>

后台代码:

 private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            ((Storyboard)(FindResource("sb"))).Begin();
        }

        private void Image_MouseLeftButtonDown_1(object sender, MouseButtonEventArgs e)
        {
            ((Storyboard)(FindResource("sb1"))).Begin();
        }