WPF动画应用-几何图形扩散动画

原文:WPF动画应用-几何图形扩散动画

最终效果图：

本实例中用到了DoubleAnimation和Storyboard两个类。

如果想系统学习的话可以直接点击链接看官方文档。

源码：

首先，在页面上画一个大饼，要用黄灿灿的颜色，然后给他起个名字。

<UserControl x:Class="MyStyle.MapPolygon"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:MyStyle"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid Name="MainGrid" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Ellipse Name="CenterEllipse"
                 Width="180"
                 Height="180"
                 Stroke="Yellow"
                 StrokeThickness="1">
        </Ellipse>
    </Grid>
</UserControl>

后台代码一共五步：
第一步：新建一个故事板(可以设置是否循环播放，播放速度，开始时间等)

第二步：新建你想要的动作(某一个值，从多少到多少)

第三步：新建一个控件(新建一个你喜欢的东西)

第四步：把动作赋值给控件(把你写的动作赋值给你写的控件，然后你写的动作就可以改你写的控件的某个值了)

第五步：Action(动画启动，WPF按照你写的一堆动作按你设置的速度修改你写的控件的某些值)

    public partial class MapPolygon : UserControl
    {
        /// <summary>
        /// 总圆环数量
        /// </summary>
        public int EllipseNum { get; set; }
        /// <summary>
        /// 不同圆之间的时间间隔
        /// </summary>
        public double EllipseInterval { get; set; }
        /// <summary>
        /// 动画启动等待时间
        /// </summary>
        private double StoryBeginTime { get; set; }
        /// <summary>
        /// 动画持续时间
        /// </summary>
        public double AnimationDuration { get; set; }
        /// <summary>
        /// 圆的最大尺寸
        /// </summary>
        public double MaxSize { get; set; }

        public MapPolygon()
        {
            InitializeComponent();
            EllipseNum = ;
            MaxSize = ;
            EllipseInterval = ;
            AnimationDuration = ;
            InitAnimation1();
        }

        private void InitAnimation1()
        {
            for (int i = ; i <= EllipseNum; i++)
            {
                //5-故事板-可以理解为动画集合，就是用来存放各种动作的
                Storyboard story = new Storyboard()
                {
                    //是否循环
                    RepeatBehavior = RepeatBehavior.Forever,
                    //动画刷新速度
                    SpeedRatio =
                };
                //4-透明度调整动作
                DoubleAnimation myOpacityAnimation = new DoubleAnimation
                {
                    From = ,
                    To = ,
                    Duration = new Duration(TimeSpan.FromSeconds(AnimationDuration))
                };
                story.Children.Add(myOpacityAnimation);
                //宽度调整动作
                DoubleAnimation myWidthSizeChangeAnimation = new DoubleAnimation
                {
                    From = CenterEllipse.Width,
                    To = MaxSize,
                    Duration = new Duration(TimeSpan.FromSeconds(AnimationDuration))
                };
                story.Children.Add(myWidthSizeChangeAnimation);
                //高度调整动作
                DoubleAnimation myHeightSizeChangeAnimation = new DoubleAnimation
                {
                    From = CenterEllipse.Width,
                    To = MaxSize,
                    Duration = new Duration(TimeSpan.FromSeconds(AnimationDuration))
                };
                story.Children.Add(myHeightSizeChangeAnimation);
                //3-生成一个几何形状
                Ellipse tempE = new Ellipse()
                {
                    HorizontalAlignment = HorizontalAlignment.Center,
                    VerticalAlignment = VerticalAlignment.Center,
                    Width = CenterEllipse.Width,
                    Height = CenterEllipse.Width,
                    Stroke = CenterEllipse.Stroke,
                };
                //2-将之前写的动画赋值给几何图形
                Storyboard.SetTarget(myOpacityAnimation, tempE);
                Storyboard.SetTargetProperty(myOpacityAnimation, new PropertyPath(Ellipse.OpacityProperty));

                Storyboard.SetTarget(myWidthSizeChangeAnimation, tempE);
                Storyboard.SetTarget(myHeightSizeChangeAnimation, tempE);
                Storyboard.SetTargetProperty(myWidthSizeChangeAnimation, new PropertyPath(Ellipse.WidthProperty));
                Storyboard.SetTargetProperty(myHeightSizeChangeAnimation, new PropertyPath(Ellipse.HeightProperty));
                //几何图形放到页面上
                MainGrid.Children.Add(tempE);
                //1-每一个故事板之间的时间间隔
                StoryBeginTime += EllipseInterval;
                story.BeginTime = TimeSpan.FromMilliseconds(StoryBeginTime);
                //Action
                story.Begin();
            }
        }
    }

以上是该控件的全部代码，直接复制就好，不懂的看注释，然后自己改体会下，然后你就学会了