在WPF中使用XAML实现动画

通过XAML的Storyboard来实现元素的动画

1.在Window节点下的<Window.Resources>节点中添加<Storyboard>节点，来创建一个动画行为

<Window.Resources>
    <Storyboard x:Key="Image1In">
        <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="200" To="0" Duration="0:0:0.2"></DoubleAnimation>
        <DoubleAnimation Storyboard.TargetProperty="(Canvas.Opacity)" From="0.1" To="1" Duration="0:0:0.2"></DoubleAnimation>
    </Storyboard>
    <!-- ...... -->
</Window.Resources>

2.在要执行此动画的元素上添加动画触发器，比如要在一个Image元素上添加动画的触发器

<Image Canvas.Top="0" Canvas.Left="0" Height="195" Width="150" Name="image1" Source="/WorkTool;component/Images/1.png" Stretch="Fill" VerticalAlignment="Top" MouseLeftButtonUp="ImageMouseUp">
    <Image.Effect>
        <!-- 图片阴影 -->
        <DropShadowEffect ShadowDepth="0" Color="Black" Opacity="0.3" BlurRadius="20"/>
    </Image.Effect>
    <Image.Triggers>
        <!-- 图片加载动画 -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Image1In}"></BeginStoryboard>
        </EventTrigger>
        <!--
        <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="image1">
            <BeginStoryboard Storyboard="{StaticResource MouseEnter}"></BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="image1">
            <BeginStoryboard Storyboard="{StaticResource MouseLeave}"></BeginStoryboard>
        </EventTrigger>
        -->
    </Image.Triggers>
</Image>