WPF动画基础小实例

动画效果如下：

源码如下：

<UniformGrid Columns="2">
        <!--  DropShadowEffect阴影效果  -->
        <Grid>
            <Ellipse
                x:Name="el"
                Width="100"
                Height="100"
                Fill="#5c6bff">
                <Ellipse.Effect>
                    <DropShadowEffect
                        x:Name="dse"
                        BlurRadius="5"
                        Direction="0"
                        ShadowDepth="5" />
                </Ellipse.Effect>
            </Ellipse>
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="ShadowDepth:" />
                    <TextBox Text="{Binding ElementName=dse, Path=ShadowDepth}" />
                    <TextBlock Text="默认值：5" />
                    <CheckBox Name="cbShadowDepth" IsChecked="True">
                        <CheckBox.Triggers>
                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                <BeginStoryboard x:Name="daShadowDepth">
                                    <Storyboard>
                                        <DoubleAnimation
                                            AutoReverse="False"
                                            RepeatBehavior="Forever"
                                            Storyboard.TargetName="dse"
                                            Storyboard.TargetProperty="(DropShadowEffect.ShadowDepth)"
                                            From="5"
                                            To="50"
                                            Duration="0:0:15" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="CheckBox.Unchecked">
                                <PauseStoryboard BeginStoryboardName="daShadowDepth" />
                            </EventTrigger>
                            <EventTrigger RoutedEvent="CheckBox.Checked">
                                <ResumeStoryboard BeginStoryboardName="daShadowDepth" />
                            </EventTrigger>
                        </CheckBox.Triggers>
                    </CheckBox>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="BlurRadius:" />
                    <TextBox Text="{Binding ElementName=dse, Path=BlurRadius}" />
                    <TextBlock Text="默认值：5" />
                    <CheckBox Name="cbBlurRadius" IsChecked="True">
                        <CheckBox.Triggers>
                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                <BeginStoryboard x:Name="daBlurRadius">
                                    <Storyboard>
                                        <DoubleAnimation
                                            AutoReverse="False"
                                            RepeatBehavior="Forever"
                                            Storyboard.TargetName="dse"
                                            Storyboard.TargetProperty="(DropShadowEffect.BlurRadius)"
                                            From="5"
                                            To="50"
                                            Duration="0:0:15" />

                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="CheckBox.Unchecked">
                                <PauseStoryboard BeginStoryboardName="daBlurRadius" />
                            </EventTrigger>
                            <EventTrigger RoutedEvent="CheckBox.Checked">
                                <ResumeStoryboard BeginStoryboardName="daBlurRadius" />
                            </EventTrigger>
                        </CheckBox.Triggers>
                    </CheckBox>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Direction:" />
                    <TextBox Text="{Binding ElementName=dse, Path=Direction}" />
                    <TextBlock Width="150" Text="默认值：0，取值范围0-360" />
                    <CheckBox Name="cbDirection" IsChecked="True">
                        <CheckBox.Triggers>
                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                <BeginStoryboard x:Name="daDirection">
                                    <Storyboard>
                                        <DoubleAnimation
                                            AutoReverse="False"
                                            RepeatBehavior="Forever"
                                            Storyboard.TargetName="dse"
                                            Storyboard.TargetProperty="(DropShadowEffect.Direction)"
                                            From="0"
                                            To="360"
                                            Duration="0:0:15" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="CheckBox.Unchecked">
                                <PauseStoryboard BeginStoryboardName="daDirection" />
                            </EventTrigger>
                            <EventTrigger RoutedEvent="CheckBox.Checked">
                                <ResumeStoryboard BeginStoryboardName="daDirection" />
                            </EventTrigger>
                        </CheckBox.Triggers>
                    </CheckBox>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Color:" />
                    <TextBox Text="{Binding ElementName=dse, Path=Color}" />
                    <TextBlock Text="默认值：黑色" />
                </StackPanel>
            </StackPanel>
        </Grid>
        <!--  BlurEffect模糊效果  -->
        <Grid>
            <Ellipse
                x:Name="el2"
                Width="100"
                Height="100"
                Fill="#5c6bff">
                <Ellipse.Effect>
                    <BlurEffect x:Name="dse2" Radius="5" />
                </Ellipse.Effect>
            </Ellipse>
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Radius:" />
                    <TextBox Text="{Binding ElementName=dse2, Path=Radius}" />
                    <TextBlock Text="默认值：5" />
                </StackPanel>
            </StackPanel>
        </Grid>
    </UniformGrid>