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

Bertha 。 2021-11-05 11:24 363阅读 0赞

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

原文: [WPF动画应用-几何图形扩散动画][WPF_- 1]

### 最终效果图： ###

![852399-20190218162534182-1962665324.png][]

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

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

## 源码： ##

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

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

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

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

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

第五步：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 = 3;
                MaxSize = 300;
                EllipseInterval = 800;
                AnimationDuration = 5;
                InitAnimation1();
            }
    
            private void InitAnimation1()
            {
                for (int i = 1; i <= EllipseNum; i++)
                {
                    //5-故事板-可以理解为动画集合，就是用来存放各种动作的
                    Storyboard story = new Storyboard()
                    {
                        //是否循环
                        RepeatBehavior = RepeatBehavior.Forever,
                        //动画刷新速度
                        SpeedRatio = 2
                    };
                    //4-透明度调整动作
                    DoubleAnimation myOpacityAnimation = new DoubleAnimation
                    {
                        From = 1,
                        To = 0,
                        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();
                }
            }
        }

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

posted on 2019-05-01 09:31 [NET未来之路][NET] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/10799166.html

[WPF_-]: https://www.cnblogs.com/lonelyxmas/p/10799166.html
[WPF_- 1]: https://www.cnblogs.com/yanxh/p/10396482.html
[852399-20190218162534182-1962665324.png]: /images/20211105/8f17e479316f490dba35a306a38ac41e.png
[DoubleAnimation]: https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.media.animation.doubleanimation?view=netframework-4.7.2
[Storyboard]: https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.media.animation.storyboard?view=netframework-4.7.2
[NET]: https://www.cnblogs.com/lonelyxmas/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=10799166