其他分享
首页 > 其他分享> > WPF动画应用-几何图形扩散动画

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

作者:互联网

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

最终效果图:

本实例中用到了DoubleAnimationStoryboard两个类。

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

源码:

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

<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 = 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();
            }
        }
    }

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

 

标签:动画,set,几何图形,get,double,控件,WPF,public
来源: https://www.cnblogs.com/lonelyxmas/p/10799166.html