WPF常用动画

Style:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


    <!--ImageButton动画 ScaleX 缩放x轴比例  先从1 to 1.5 后1.5 to 1-->
    <Storyboard x:Key="ImageButtonStoryboard"  >
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="{x:Null}">
            <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1.5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="{x:Null}">
            <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1.5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>


    <!--FlowDirection    获取或设置方向,元素在任何控制其布局的父元素中都按此方向流动。
    RenderTransformOrigin 变形中心点  范围0-1   0.5代表中心
    中间的 ScaleTransform 最重要，是缩放的意思，有这个才能缩放变形
    -->
    <Style  TargetType="{x:Type Image}" x:Key="ImageBigStyle">
        <Setter Property="FlowDirection" Value="LeftToRight"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <TransformGroup>
                    <ScaleTransform/>
                </TransformGroup>
            </Setter.Value>
        </Setter>
    </Style>



    <Storyboard x:Key="ImageButtonStoryboard1"  >
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="1" To="1.5" AutoReverse="True" Duration="0:0:0.1" Storyboard.TargetName="{x:Null}"/>
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="1" To="1.5" AutoReverse="True" Duration="0:0:0.1" Storyboard.TargetName="{x:Null}"/>
    </Storyboard>

    <Style TargetType="{x:Type Image}" x:Key="button1">

        <Setter Property="FlowDirection" Value="LeftToRight"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <TransformGroup>
                    <ScaleTransform/>
                </TransformGroup>
            </Setter.Value>
        </Setter>
        
        
        <Style.Triggers>
            <EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="1" To="1.5" AutoReverse="True" Duration="0:0:0.1" Storyboard.TargetName="{x:Null}"/>
                            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="1" To="1.5" AutoReverse="True" Duration="0:0:0.1" Storyboard.TargetName="{x:Null}"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>

        </Style.Triggers>
    </Style>

</ResourceDictionary>

前端：

<Window x:Class="AnimationDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="1000" Width="1000">
    <Grid Background="Black">
        <Image x:Name="img1" Width="150" Height="150" Source="DefaultButton.png" HorizontalAlignment="Center" MouseLeftButtonDown="img1_MouseLeftButtonDown" VerticalAlignment="Center" Margin="10" Style="{DynamicResource ImageBigStyle}" />

        <Button Content="放大效果-后台" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="126" Click="button1_Click" Margin="21,39,0,0" />

        <Button Content="平移-后台" Height="23" HorizontalAlignment="Left" Name="button2" VerticalAlignment="Top" Width="126" Click="button2_Click" Margin="175,39,0,0" />

        <Button Content="缩小透明度变低-后台" Height="23" HorizontalAlignment="Left" Name="button3" VerticalAlignment="Top" Width="126" Click="button3_Click" Margin="338,39,0,0" />

        <Button Content="拉伸-后台" Height="23" HorizontalAlignment="Left" Name="button4" VerticalAlignment="Top" Width="126" Click="button4_Click" Margin="486,39,0,0" />
        <Button Content="缓动动画，缩放-后台" Height="23" HorizontalAlignment="Left" Margin="21,90,0,0" Name="button5" VerticalAlignment="Top" Width="126" Click="button5_Click" />
        <Button Content="Canvas移动动画-后台" Height="23" HorizontalAlignment="Left" Margin="175,90,0,0" Name="button6" VerticalAlignment="Top" Width="126" Click="button6_Click" />
        <Canvas Height="231" HorizontalAlignment="Left" Margin="202,485,0,0" Name="canvas1" VerticalAlignment="Top" Width="436">
            <Image Height="150" Name="image1" Source="DefaultButton.png" Width="150" Canvas.Left="89" Canvas.Top="27" />
        </Canvas>
        <Button Content="透明度动画-后台" Height="23" HorizontalAlignment="Left" Margin="338,90,0,0" Name="button7" VerticalAlignment="Top" Width="126" Click="button7_Click" />
        <Button Content="放大效果-后台" Height="23" HorizontalAlignment="Left" Margin="486,90,0,0" Name="button8" VerticalAlignment="Top" Width="126" Click="button8_Click" />
        <Button Content="缓动动画，缩放-后台" Height="23" HorizontalAlignment="Left" Margin="21,148,0,0" Name="button9" VerticalAlignment="Top" Width="126" Click="button9_Click" />
        <Button Content="放大效果-前台" Height="23" HorizontalAlignment="Left" Margin="21,238,0,0" Name="button10" VerticalAlignment="Top" Width="126" Click="button10_Click"  />
        <Button Content="放大效果-前台" Height="23" HorizontalAlignment="Left" Margin="21,280,0,0" Name="button11" VerticalAlignment="Top" Width="126" Click="button11_Click" />

        <Image Height="150" Name="image2" Source="DefaultButton.png" Width="150" Canvas.Left="89" Canvas.Top="27" Margin="599,306,29,304"  Style="{DynamicResource ImageBigStyle}">

            <Image.Triggers>
                <EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="1" To="1.5" AutoReverse="True" Duration="0:0:0.1" Storyboard.TargetName="{x:Null}"/>
                                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From=