神奇的动态改变画刷

神奇的动态改变画刷

---

开发工具与关键技术：Visual Studio + WPF
撰写时间：2019年5月22日

---

1、 动画是WPF中的一个亮点，现在跟大家分享一个好看的动画——动态改变画刷，在这个Ellipse圆形动画中使用ColorAnimation属性标签改变颜色，使用PointAnimatin属性标签改变横纵坐标。

<Window x:Class="Wpf2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="动态改变画刷" Height="350" Width="525">
    <Window.Triggers>
        <!--BeginStoryboard：要在EventTrigger中触发调用，RoutedEvent是响应的事件-->
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <!--PointAnimation属性：使用线性内插对两个目标值之间的 System.Windows.Point属性值进行动画处理。设置Fill.GradientOrigin属性： 获取或设置定义渐变开始的二维焦点的位置。-->
                        <PointAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Fill.GradientOrigin" From="1,1" To="0,0" Duration="0:0:10" />
                        <!--ColorAnimation属性：使用线性内插对两个目标值之间的 System.Windows.Media.Color属性值进行动画处理。设置Fill.GradientStops[0].Color属性：获取或设置渐变停止点的颜色。-->
                        <ColorAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Fill.GradientStops[0].Color" To="Pink" Duration="0:0:5"/>
                        <ColorAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Fill.GradientStops[1].Color" To="Gold" Duration="0:0:5" />
                        <ColorAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Fill.GradientStops[2].Color" To="Gray" Duration="0:0:5" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>
    <!--Grid:网格布局-->
    <Grid>
        <Ellipse Name="ellipse1" Width="200" Height="200">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.1,0.1">
                    <RadialGradientBrush.GradientStops>
                        <GradientStop Offset="0.17" Color="Red" />
                        <GradientStop Offset="0.25" Color="Green" />
                        <GradientStop Offset="0.5" Color="Yellow" />
                        <GradientStop Offset="0.65" Color="Red" />
                        <GradientStop Offset="0.7" Color="Green" />
                        <GradientStop Offset="0.82" Color="Yellow" />
                    </RadialGradientBrush.GradientStops>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
</Window>

2、效果图：