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 = 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