网站开发方案报价,dedecms大气金融企业网站模板,湖南做网站 就问磐石网络专业,开发官网多少钱本文经原作者授权以原创方式二次分享#xff0c;欢迎转载、分享。原文作者#xff1a;普通的地球人原文地址#xff1a;https://www.cnblogs.com/tsliwei/p/6282183.htmlGithub地址#xff1a;https://github.com/WPFDevelopersOrg/WPFDevelopers效果前阵子看到ay的蜘蛛网效… 本文经原作者授权以原创方式二次分享欢迎转载、分享。原文作者普通的地球人原文地址https://www.cnblogs.com/tsliwei/p/6282183.htmlGithub地址https://github.com/WPFDevelopersOrg/WPFDevelopers效果前阵子看到ay的蜘蛛网效果和知乎的登录页背景,觉得效果很酷.自己也想写一个.于是写着写着就变成这样了.少女梦幻的赶脚有木有.我这有着一颗少女心的抠脚大汉实现思路分为两个部分:1星星无休止的漫游2星星之间的连线星星和连线非别放到两个容器里,以便分开操作星星把星星的运动分解为X轴和Y轴两个不相干的运动,分别操作.操作就是随机生成一个速度,随机生成一个时间.运动完之后再随机生成一个速度,随机生成一个时间......无限循环星星的旋转也是同样的道理连线首先解释下连线的规则.两个星星之间连线,每个星星都有一个连线的势力范围,就是宽度乘以连线倍率,这个连线倍率可以在窗体设置.当两个势力范围有交集的时候,就连线;例:星1宽度5,星2宽度10,连线倍率是3,那么这两个星星的距离小于5*310*345时就连线,大于45时断开.如果连线倍率设置为4,则两个星星减的距离小于5*410*460时连线,大于60时断开;实现与资源占有率星星运动的实现有两种:1基于Grid和TranslateTransform用DoubleAnimation动画控制星星的位移.2基于Canvas通过帧动画控制Canvas的X,Y.连线的实现也有两种:1简单粗暴.在每一帧都清空连线容器.然后双层循环星星,重新连接所有星星(符合连线规则的).2在每一帧循环连线,判断连线规则.符合就改变此连线的X1,Y1,X2,Y2而不去重新new连线.不符合规则的就移除.然后依然是双层循环星星,看符合规则的两个星星间有没有连线,没有的就new一个.众所周知,WPF做这种动画资源占有率还是比较高的,写了这么多实现,也是因为这个.大体上还是基于Canvas的实现占用资源稍低.但也有个问题,如果给星星再加一个模糊效果的话,基于Canvas实现的资源占有率不会飙升,而是帧数明显降低.(也可能是我电脑环境的原因)并不能说那种实现好与坏,可能具体运行环境不一样,参数设置不一样,每种实现都有不同的表现.然后关于资源占有率问题,以我目前的水平,就只能到这了.博友们自己取舍吧.源码如下1StarrySky.cs代码如下using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;namespace WPFDevelopers.Controls
{[TemplatePart(Name GridTemplateName, Type typeof(Grid))][TemplatePart(Name CanvasTemplateName, Type typeof(Canvas))]public class StarrySky : Control{private const string GridTemplateName PART_GridLineContainer;private const string CanvasTemplateName PART_CanvasStarContainer;private Grid _grid;private Canvas _canvas;public static readonly DependencyProperty StarCountProperty DependencyProperty.Register(StarCount, typeof(int), typeof(StarrySky), new UIPropertyMetadata(10));public static readonly DependencyProperty StarSizeMinProperty DependencyProperty.Register(StarSizeMin, typeof(int), typeof(StarrySky), new UIPropertyMetadata(5));public static readonly DependencyProperty StarSizeMaxProperty DependencyProperty.Register(StarSizeMax, typeof(int), typeof(StarrySky), new UIPropertyMetadata(20));public static readonly DependencyProperty StarVMinProperty DependencyProperty.Register(StarVMin, typeof(int), typeof(StarrySky), new UIPropertyMetadata(10));public static readonly DependencyProperty StarVMaxProperty DependencyProperty.Register(StarVMax, typeof(int), typeof(StarrySky), new UIPropertyMetadata(20));public static readonly DependencyProperty StarRVMinProperty DependencyProperty.Register(StarRVMin, typeof(int), typeof(StarrySky), new UIPropertyMetadata(90));public static readonly DependencyProperty StarRVMaxProperty DependencyProperty.Register(StarRVMax, typeof(int), typeof(StarrySky), new UIPropertyMetadata(360));public static readonly DependencyProperty LineRateProperty DependencyProperty.Register(LineRate, typeof(int), typeof(StarrySky), new UIPropertyMetadata(3));private readonly Random _random new Random();private StarInfo[] _stars;static StarrySky(){DefaultStyleKeyProperty.OverrideMetadata(typeof(StarrySky),new FrameworkPropertyMetadata(typeof(StarrySky)));}public StarrySky(){Loaded delegate{CompositionTarget.Rendering delegate{StarRoamAnimation();AddOrRemoveStarLine();MoveStarLine();};};}public override void OnApplyTemplate(){base.OnApplyTemplate();_grid GetTemplateChild(GridTemplateName) as Grid;_canvas GetTemplateChild(CanvasTemplateName) as Canvas;}public int StarCount{get (int)GetValue(StarCountProperty);set SetValue(StarCountProperty, value);}public int StarSizeMin{get (int)GetValue(StarSizeMinProperty);set SetValue(StarSizeMinProperty, value);}public int StarSizeMax{get (int)GetValue(StarSizeMaxProperty);set SetValue(StarSizeMaxProperty, value);}public int StarVMin{get (int)GetValue(StarVMinProperty);set SetValue(StarVMinProperty, value);}public int StarVMax{get (int)GetValue(StarVMaxProperty);set SetValue(StarVMaxProperty, value);}public int StarRVMin{get (int)GetValue(StarRVMinProperty);set SetValue(StarRVMinProperty, value);}public int StarRVMax{get (int)GetValue(StarRVMaxProperty);set SetValue(StarRVMaxProperty, value);}public int LineRate{get (int)GetValue(LineRateProperty);set SetValue(LineRateProperty, value);}public void InitStar(){//清空星星容器_stars new StarInfo[StarCount];_canvas.Children.Clear();_grid.Children.Clear();//生成星星for (var i 0; i StarCount; i){double size _random.Next(StarSizeMin, StarSizeMax 1); //星星尺寸var starInfo new StarInfo{X _random.Next(0, (int)_canvas.ActualWidth),XV (double)_random.Next(-StarVMax, StarVMax) / 60,XT _random.Next(6, 301), //帧Y _random.Next(0, (int)_canvas.ActualHeight),YV (double)_random.Next(-StarVMax, StarVMax) / 60,YT _random.Next(6, 301), //帧StarLines new DictionaryStarInfo, Line()};var star new Path{Data Application.Current.Resources[PathStarrySky] as Geometry,Width size,Height size,Stretch Stretch.Fill,Fill GetRandomColorBursh(),RenderTransformOrigin new Point(0.5, 0.5),RenderTransform new RotateTransform { Angle 0 }};Canvas.SetLeft(star, starInfo.X);Canvas.SetTop(star, starInfo.Y);starInfo.StarRef star;//设置星星旋转动画SetStarRotateAnimation(star);//添加到容器_stars[i] starInfo;_canvas.Children.Add(star);}}private void SetStarRotateAnimation(Path star){double v _random.Next(StarRVMin, StarRVMax 1); //速度double a _random.Next(0, 360 * 5); //角度var t a / v; //时间var dur new Duration(new TimeSpan(0, 0, 0, 0, (int)(t * 1000)));var sb new Storyboard{Duration dur};//动画完成事件 再次设置此动画sb.Completed (S, E) { SetStarRotateAnimation(star); };var da new DoubleAnimation{To a,Duration dur};Storyboard.SetTarget(da, star);Storyboard.SetTargetProperty(da, new PropertyPath((UIElement.RenderTransform).(RotateTransform.Angle)));sb.Children.Add(da);sb.Begin(this);}private SolidColorBrush GetRandomColorBursh(){var r (byte)_random.Next(128, 256);var g (byte)_random.Next(128, 256);var b (byte)_random.Next(128, 256);return new SolidColorBrush(Color.FromRgb(r, g, b));}/// summary/// 星星漫游动画/// /summaryprivate void StarRoamAnimation(){if (_stars null)return;foreach (var starInfo in _stars){//X轴运动if (starInfo.XT 0){//运动时间大于0,继续运动if (starInfo.X _canvas.ActualWidth || starInfo.X 0)//碰到边缘,速度取反向starInfo.XV -starInfo.XV;//位移加,时间减starInfo.X starInfo.XV;starInfo.XT--;Canvas.SetLeft(starInfo.StarRef, starInfo.X);}else{//运动时间小于0,重新设置速度和时间starInfo.XV (double)_random.Next(-StarVMax, StarVMax) / 60;starInfo.XT _random.Next(100, 1001);}//Y轴运动if (starInfo.YT 0){//运动时间大于0,继续运动if (starInfo.Y _canvas.ActualHeight || starInfo.Y 0)//碰到边缘,速度取反向starInfo.YV -starInfo.YV;//位移加,时间减starInfo.Y starInfo.YV;starInfo.YT--;Canvas.SetTop(starInfo.StarRef, starInfo.Y);}else{//运动时间小于0,重新设置速度和时间starInfo.YV (double)_random.Next(-StarVMax, StarVMax) / 60;starInfo.YT _random.Next(100, 1001);}}}/// summary/// 添加或者移除星星之间的连线/// /summaryprivate void AddOrRemoveStarLine(){//没有星星 直接返回if (_stars null || StarCount ! _stars.Length)return;//生成星星间的连线for (var i 0; i StarCount - 1; i)for (var j i 1; j StarCount; j){var star1 _stars[i];var x1 star1.X star1.StarRef.Width / 2;var y1 star1.Y star1.StarRef.Height / 2;var star2 _stars[j];var x2 star2.X star2.StarRef.Width / 2;var y2 star2.Y star2.StarRef.Height / 2;var s Math.Sqrt((y2 - y1) * (y2 - y1) (x2 - x1) * (x2 - x1)); //两个星星间的距离var threshold star1.StarRef.Width * LineRate star2.StarRef.Width * LineRate;if (s threshold){if (!star1.StarLines.ContainsKey(star2)){var line new Line{X1 x1,Y1 y1,X2 x2,Y2 y2,Stroke GetStarLineBrush(star1.StarRef, star2.StarRef)};star1.StarLines.Add(star2, line);_grid.Children.Add(line);}}else{if (star1.StarLines.ContainsKey(star2)){_grid.Children.Remove(star1.StarLines[star2]);star1.StarLines.Remove(star2);}}}}/// summary/// 移动星星之间的连线/// /summaryprivate void MoveStarLine(){//没有星星 直接返回if (_stars null)return;foreach (var star in _stars)foreach (var starLine in star.StarLines){var line starLine.Value;line.X1 star.X star.StarRef.Width / 2;line.Y1 star.Y star.StarRef.Height / 2;line.X2 starLine.Key.X starLine.Key.StarRef.Width / 2;line.Y2 starLine.Key.Y starLine.Key.StarRef.Height / 2;}}/// summary/// 获取星星连线颜色画刷/// /summary/// param namestar0起始星星/param/// param namestar1终点星星/param/// returnsLinearGradientBrush/returnsprivate LinearGradientBrush GetStarLineBrush(Path star0, Path star1){return new LinearGradientBrush{GradientStops new GradientStopCollection{new GradientStop { Offset 0, Color (star0.Fill as SolidColorBrush).Color },new GradientStop { Offset 1, Color (star1.Fill as SolidColorBrush).Color }}};}}/// summary/// 星星/// /summaryinternal class StarInfo{/// summary/// X坐标/// /summarypublic double X { get; set; }/// summary/// X轴速度(单位距离/帧)/// /summarypublic double XV { get; set; }/// summary/// X坐标以X轴速度运行的时间(帧)/// /summarypublic int XT { get; set; }/// summary/// Y坐标/// /summarypublic double Y { get; set; }/// summary/// Y轴速度(单位距离/帧)/// /summarypublic double YV { get; set; }/// summary/// Y坐标以Y轴速度运行的时间(帧)/// /summarypublic int YT { get; set; }/// summary/// 对星星的引用/// /summarypublic Path StarRef { get; set; }public DictionaryStarInfo, Line StarLines { get; set; }}
}2StarrySky.xaml代码如下ResourceDictionary xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:controlsclr-namespace:WPFDevelopers.ControlsResourceDictionary.MergedDictionariesResourceDictionary SourceBasic/ControlBasic.xaml//ResourceDictionary.MergedDictionariesRadialGradientBrush x:KeyStarrySkyRadialGradientBrush GradientOrigin0.5,0 Center0.5,0.3 RadiusX0.7GradientStop Color#FF04040E Offset0/GradientStop Color#FF24315D Offset1//RadialGradientBrushStyle TargetType{x:Type controls:StarrySky} BasedOn{StaticResource ControlBasicStyle}Setter PropertyBackground Value{StaticResource StarrySkyRadialGradientBrush}/SetterSetter PropertyTemplateSetter.ValueControlTemplate TargetType{x:Type controls:StarrySky}Grid Background{TemplateBinding Background}Grid x:NamePART_GridLineContainer/Canvas x:NamePART_CanvasStarContainer//Grid/ControlTemplate/Setter.Value/Setter/Style
/ResourceDictionary3StarrySkyExample.xaml代码如下UserControl x:ClassWPFDevelopers.Samples.ExampleViews.StarrySkyExamplexmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:wpfdevhttps://github.com/WPFDevelopersOrg/WPFDevelopersxmlns:wshttps://github.com/WPFDevelopersOrg.WPFDevelopers.Minimalxmlns:localclr-namespace:WPFDevelopers.Samples.ExampleViewsmc:Ignorabled d:DesignHeight450 d:DesignWidth800UserControl.ResourcesStyle TargetType{x:Type TextBlock}Setter PropertyForeground ValueWhite/SetterSetter PropertyFontSize Value14/SetterSetter PropertyVerticalAlignment ValueCenter/SetterSetter PropertyMargin Value2/Setter/StyleStyle TargetType{x:Type StackPanel}Setter PropertyMargin Value2/Setter/StyleStyle TargetType{x:Type TextBox} BasedOn{StaticResource {x:Type TextBox}}Setter Propertyws:ElementHelper.Watermark Value输入内容/SetterSetter PropertyMargin Value-30,0/SetterSetter PropertyWidth Value100/Setter/Style/UserControl.ResourcesGrid!--wpfdev:StarrySky StarCount{Binding ElementNametbx_starCount,PathText}StarSizeMin{Binding ElementNametbx_starSizeMin,PathText}StarSizeMax{Binding ElementNametbx_starSizeMax,PathText}StarVMin{Binding ElementNametbx_starVMin,PathText}StarVMax{Binding ElementNametbx_starVMax,PathText}StarRVMin{Binding ElementNametbx_starRVMin,PathText}StarRVMax{Binding ElementNametbx_starRVMax,PathText}LineRate{Binding ElementNametbx_lineRate,PathText}NamemyStarrySky/wpfdev:StarrySky--wpfdev:StarrySky NamemyStarrySky/wpfdev:StarrySkyStackPanel HorizontalAlignmentLeft VerticalAlignmentTopStackPanel OrientationHorizontalTextBlock Text星星个数:/TextBlockTextBox x:Nametbx_starCount Text{Binding ElementNamemyStarrySky,PathStarCount}//StackPanelStackPanel OrientationHorizontalTextBlock Text最小尺寸:/TextBlockTextBox Nametbx_starSizeMin Text{Binding ElementNamemyStarrySky,PathStarSizeMin}/TextBox/StackPanelStackPanel OrientationHorizontalTextBlock Text最大尺寸:/TextBlockTextBox Nametbx_starSizeMax Text{Binding ElementNamemyStarrySky,PathStarSizeMax}/TextBox/StackPanelStackPanel OrientationHorizontalTextBlock Text最小速度:/TextBlockTextBox Nametbx_starVMin Text{Binding ElementNamemyStarrySky,PathStarVMin}/TextBox/StackPanelStackPanel OrientationHorizontalTextBlock Text最大速度:/TextBlockTextBox Nametbx_starVMax Text{Binding ElementNamemyStarrySky,PathStarVMax}/TextBox/StackPanelStackPanel OrientationHorizontalTextBlock Text最小转速:/TextBlockTextBox Nametbx_starRVMin Text{Binding ElementNamemyStarrySky,PathStarRVMin}/TextBox/StackPanelStackPanel OrientationHorizontalTextBlock Text最大转速:/TextBlockTextBox Nametbx_starRVMax Text{Binding ElementNamemyStarrySky,PathStarRVMax}/TextBox/StackPanelStackPanel OrientationHorizontalTextBlock Text连线倍率:/TextBlockTextBox Nametbx_lineRate Text{Binding ElementNamemyStarrySky,PathLineRate}/TextBox/StackPanelButton Namebtn_render Content生成 Clickbtn_render_Click//StackPanel/Grid
/UserControl4StarrySkyExample.xaml.cs代码如下using System.Windows.Controls;namespace WPFDevelopers.Samples.ExampleViews
{/// summary/// StarrySkyExample.xaml 的交互逻辑/// /summarypublic partial class StarrySkyExample : UserControl{public StarrySkyExample(){InitializeComponent();}private void btn_render_Click(object sender, System.Windows.RoutedEventArgs e){myStarrySky.InitStar();}}
}源码1[1]Gtihub[2]Gitee[3]参考资料[1] 源码: https://files.cnblogs.com/files/tsliwei/StarrySkyBasedOnCanvasYOUHUA.zip[2] Gtihub: https://github.com/WPFDevelopersOrg/WPFDevelopers[3] gitee: https://gitee.com/WPFDevelopersOrg/WPFDevelopers
