连续性关键频动画

《连续性关键频动画》

一、 说明

关键频动画主要是让动画看起来更连续！以达到美观的效果。

二、代码

<Window x:Class="关键频动画.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:高级动画和模板"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="MainWindow" Height="350" Width="525">
    <!--窗口触发器-->
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <!--椭圆焦点 (GradientOrigin)-->
                    <Storyboard Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Fill.GradientOrigin">
                        <!--PointAnimationUsingKeyFrames：使用关键帧的点动画-->
                        <PointAnimationUsingKeyFrames>
                            <!--LinearPointKeyFrame:使用线性插值点关键帧对象，从上一个关键帧的点值动画到当前关键帧的值。-->
                            <!--关键帧动画：包含一个保存目标值的 Value 属性和一个指示帧何时到达目标值的 KeyTime 属性-->
                            <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:0"/>
                            <LinearPointKeyFrame Value="0.3,0.7" KeyTime="0:0:3"/>
                            <LinearPointKeyFrame Value="0.5,0.2" KeyTime="0:0:5"/>
                            <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:7"/>
                        </PointAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>
    <!--网格布局-->
    <Grid>
        <!--椭圆绘图-->
        <Ellipse Width="200" Height="200" Name="ellipse1">
            <!--填充色径向渐变-->
            <Ellipse.Fill>
                <RadialGradientBrush>
                    <RadialGradientBrush.GradientStops>
                        <GradientStop Offset="0.3" Color="Red"/>
                        <GradientStop Offset="0.6" Color="Yellow"/>
                        <GradientStop Offset="0.9" Color="Green"/>
                    </RadialGradientBrush.GradientStops>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
</Window>

三、 效果图
该变化过程是渐变过程，效果为以下各图片渐渐变化图1到图2到图3

图一

图二

图三

四、 总结

学了关键频动画后，发现原来渐变动画是这样弄出来的