wpf 模拟抖音很火的罗盘时钟，附源码，解压就能跑

前端时间突然发现，抖音火了个壁纸，就是黑底蕾丝~~~ 错错错，黑底白字的罗盘时钟！

　　作为程序员的我，也觉得很新颖，所以想空了研究下，这不，空下来了就用wpf，写个属于.net自己的罗盘时钟，目前只实现了时分秒，农历日期等逻辑都是一样的，所以就略了，有兴趣的朋友，可以继续深入！

　　最开始想直接弄成成exe，方便拷贝，到处运行使用的，但是考虑到，万一有网友朋友们需要，所以我还是把封成一个dll，需要的地方添加引用即可！

　　为了弄这个，还恶补了下，高中还是初中的知识，sin30，cos60，呵呵，正弦，余弦，所以不明白的朋友们需要先了解清楚这个，因为罗盘是旋转，需要用到计算这个值！

　　不废话了，先上图看下效果！

ok，整体效果就是这样了，中间是鄙人的名称缩写，抖音上是很潦草的，我就随便啦，占个位置，不然显得很空洞！

　　下面说说代码

主要是，RomeClockControlLibrary，这个是对控件的封装，上面那个启动程序只是一个容器，或者说是调用者，当然，如果要达到我这个效果，实现圆形的窗口透明的朋友们，可以看下借鉴！

<UserControl x:Class="RomeClockControlLibrary.RomeClockControl"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:RomeClockControlLibrary"mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"><Border x:Name="bor"Background="#000000"><Grid x:Name="grid" ></Grid></Border>
</UserControl>

上面是前端代码，有点基础的都应该看得懂，没什么可说的

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace RomeClockControlLibrary
{/// <summary>/// 罗马时钟/// </summary>public partial class RomeClockControl : UserControl, IDisposable{public RomeClockControl(){InitializeComponent();}/// <summary>/// x轴的中心位置/// </summary>private double CenterPixToX => this.ActualWidth / 2;/// <summary>/// y轴的中心位置/// </summary>private double CenterPixToY => this.ActualHeight / 2;/// <summary>/// 秒/// </summary>private Canvas CanvasHour = null;/// <summary>/// 分/// </summary>private Canvas CanvasMinute = null;/// <summary>/// 时/// </summary>private Canvas CanvasSecond = null;/// <summary>/// UI更新线程/// </summary>private Thread thread = null;/// <summary>/// 缓存时的显示控件/// </summary>private TextBlock BlockHour = null;/// <summary>/// 缓存分的显示控件/// </summary>private TextBlock BlockMinute = null;/// <summary>/// 缓存秒的显示控件/// </summary>private TextBlock BlockSecond = null;/// <summary>/// 添加控件/// </summary>private void Add(AddType type){var offset = 0;//偏移量var count = 0;//总量var str = string.Empty;var time = 0;double AngleTime = 0;Canvas canvas = new Canvas();canvas.Tag = type;switch (type){case AddType.Hour:offset = 95;count = 24;str = "时";CanvasHour = canvas;time = DateTime.Now.Hour;break;case AddType.Minute:offset = 60;count = 60;str = "分";CanvasMinute = canvas;time = DateTime.Now.Minute;break;case AddType.Second:offset = 30;count = 60;str = "秒";CanvasSecond = canvas;time = DateTime.Now.Second;break;default:return;}var angle = 360 / count;//角度var x = CenterPixToX - offset;//起始位置var y = CenterPixToY - offset;for (int i = 0; i < count; i++){TextBlock t = new TextBlock();if (i <= 9){t.Text = $"0{i}{str}";}else{t.Text = $"{i}{str}";}t.Tag = i;t.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#7d7d7d"));canvas.Children.Add(t);var sinv = Math.Sin((90 - angle * i) * (Math.PI / 180));var cosv = Math.Cos((90 - angle * i) * (Math.PI / 180));var a = CenterPixToY - y * sinv;var b = CenterPixToX + y * cosv;Canvas.SetLeft(t, b);Canvas.SetTop(t, a);//设置角度RotateTransform r = new RotateTransform();r.Angle = angle * i - 90;t.RenderTransform = r;if (i == time){AngleTime = 360 - r.Angle;//更新样式t.Foreground = new SolidColorBrush(Colors.White);switch (type){case AddType.Hour:BlockHour = t;break;case AddType.Minute:BlockMinute = t;break;case AddType.Second:BlockSecond = t;break;}}}grid.Children.Add(canvas);//获取当前时间，旋转对应的角度RotateTransform rtf = new RotateTransform();rtf.CenterX = CenterPixToX;rtf.CenterY = CenterPixToY;rtf.Angle = AngleTime;canvas.RenderTransform = rtf;}/// <summary>/// 渲染时钟/// </summary>public void Show(){Dispose();//设置圆角bor.CornerRadius = new CornerRadius(this.ActualWidth / 2);Add(AddType.Hour);Add(AddType.Minute);Add(AddType.Second);AddName();thread = new Thread(new ThreadStart(threadMethod));thread.IsBackground = true;thread.Start();}/// <summary>/// 生成名称/// </summary>private void AddName(){TextBlock tb = new TextBlock();tb.Text = "XL";tb.Foreground = new SolidColorBrush(Colors.White);tb.FontSize = 60;tb.FontFamily = new FontFamily("华文琥珀");tb.HorizontalAlignment = HorizontalAlignment.Center;tb.VerticalAlignment = VerticalAlignment.Center;grid.Children.Add(tb);}/// <summary>/// UI更新线程/// </summary>private void threadMethod(){while (true){Dispatcher.Invoke(() =>{var s = DateTime.Now.Second;var m = DateTime.Now.Minute;var h = DateTime.Now.Hour;//处理时if (m == 0 && (int)BlockHour.Tag != h){SetUI(CanvasHour, h);}//处理分if (s == 0 && (int)BlockMinute.Tag != m){SetUI(CanvasMinute, m);}//处理秒SetUI(CanvasSecond, s);});Thread.Sleep(1000);}}/// <summary>/// 更新UI/// </summary>/// <param name="can"></param>/// <param name="tag"></param>/// <param name="color"></param>private void SetUI(Canvas can, int tag){var type = (AddType)can.Tag;foreach (TextBlock item in can.Children){if ((int)item.Tag == tag){Debug.WriteLine(item.Text);var fr = item.RenderTransform as RotateTransform;var angle = 360 - fr.Angle;var rtf = can.RenderTransform as RotateTransform;DoubleAnimation db = null;if (type == AddType.Minute){angle -= 360;db = new DoubleAnimation(angle, new Duration(TimeSpan.FromSeconds(1)));db.Completed += DbMinute_Completed;BlockMinute = item;}else if (type == AddType.Hour){angle += 360;db = new DoubleAnimation(angle, new Duration(TimeSpan.FromSeconds(1.5)));db.Completed += DbHour_Completed;BlockHour = item;}else{db = new DoubleAnimation(angle, new Duration(TimeSpan.FromSeconds(0.25)));db.Completed += DbSecond_Completed;BlockSecond = item;}rtf.BeginAnimation(RotateTransform.AngleProperty, db);}else{item.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#7d7d7d"));}}}/// <summary>/// 秒 动画完成时/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void DbSecond_Completed(object sender, EventArgs e){BlockSecond.Foreground = new SolidColorBrush(Colors.White);}/// <summary>/// 时 动画完成时/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void DbHour_Completed(object sender, EventArgs e){var fr = CanvasHour.RenderTransform as RotateTransform;var angle = fr.Angle - 360;fr = null;RotateTransform rtf = new RotateTransform();rtf.CenterX = CenterPixToX;rtf.CenterY = CenterPixToY;rtf.Angle = angle;CanvasHour.RenderTransform = rtf;Debug.WriteLine(rtf.Angle);BlockHour.Foreground = new SolidColorBrush(Colors.White);}/// <summary>/// 分 动画完成时/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void DbMinute_Completed(object sender, EventArgs e){var fr = CanvasMinute.RenderTransform as RotateTransform;var angle = fr.Angle + 360;fr = null;RotateTransform rtf = new RotateTransform();rtf.CenterX = CenterPixToX;rtf.CenterY = CenterPixToY;rtf.Angle = angle;CanvasMinute.RenderTransform = rtf;Debug.WriteLine(rtf.Angle);BlockMinute.Foreground = new SolidColorBrush(Colors.White);}/// <summary>/// 释放/// </summary>public void Dispose(){thread?.Abort();grid.Children.Clear();}}/// <summary>/// 添加类型/// </summary>public enum AddType{Hour,Minute,Second}
}

上面是后端逻辑，这才是重点，调用者通过show，调用显示的；在show里面会开启一个后台处理线程，来实现获取当前时间，并计算需要旋转的角度，最后采用动画更新到UI！

　　整个流程就是这样，有疑问的朋友，欢迎留言！

下载地址，附源码 ==》点我前往

支持原创，转载请标明出处，谢谢！

wpf 模拟抖音很火的罗盘时钟，附源码，解压就能跑相关推荐

wpf 模拟抖音很火的罗盘时钟，附源码，下载就能跑
wpf 模拟抖音很火的罗盘时钟,附源码前端时间突然发现,抖音火了个壁纸,就是黑底蕾丝~~~ 错错错,黑底白字的罗盘时钟! 作为程序员的我,也觉得很新颖,所以想空了研究下,这不,空下来了就用wpf, ...
使用js做抖音很火的罗盘时钟（做最靓的仔）
罗盘时钟思路:首先是获取电脑时间,然后做旋转与时间罗盘样式. 代码如下: <!DOCTYPE html> <html><head><meta charset ...
鸿蒙天钟壁纸,抖音最火的罗盘时钟壁纸，赶紧来学！
了解更多热门资讯.玩机技巧.数码评测.科普深扒,点击右上角关注我们 ---------------------------------- hello~晚上好. 今天小雷来教一个 amazing 的技巧 ...
2021-10-08 vue.js实现抖音很火八卦时间数字罗盘屏保壁纸
vue.js实现抖音很火八卦时间数字罗盘屏保壁纸代码如下. <!DOCTYPE html> <html><head> <meta charset=" ...
年龄测试计算器软件,抖音很火的年龄计算器
抖音很火的年龄计算器是一款非常受大家欢迎的应用,相信很多的小伙伴们都已经在网上看到了,几乎到了上热搜的位置,为啥这么火呢,其实小编觉得可能是因为现在大批量的90后们已经在开始感叹时间的飞速流逝了,所以 ...
抖音很火的召唤神龙的小游戏完整代码-召唤神龙
抖音很火的解压小游戏,完整代码分享.有兴趣的可以试着写一下. 1. index <!DOCTYPE html> <html> <head><meta cha ...
魔性计时器html6,最近抖音很火的6首BGM，太有魔性了！
bing娱乐热歌榜单,每周排行最热7首中文歌曲,每周四更新(点头像查看文章).今天小编就为大家整理了最近抖音很火的6首BGM,太有魔性了!我们一起来看看吧! 第一首:<我们不一样>,歌手: ...
用计算机语言写结婚祝福语,抖音很火的一到10结婚祝福语
抖音很火的一到10结婚祝福语 2020-11-13 16:13:07 结婚祝福除了早生贵子就是百年好合,这次来点不一样的,下面就来看看抖音很火的一到10结婚祝福语! 一.抖音很火的一到10结婚祝福语 ...
钉钉windows端多开软件_抖音很火的备忘录软件是什么？比较火的备忘录便签软件...
抖音是很多年轻人都比较喜欢使用的一款短视频APP,我们不但能够用它来娱乐打发时间,还可以从抖音的视频中接收咨询和学习.近期我在抖音上看到了不少人都在使用备忘录便签软件,抖音很火的备忘录软件是什么?比较 ...

wpf 模拟抖音很火的罗盘时钟，附源码，解压就能跑

wpf 模拟抖音很火的罗盘时钟，附源码，解压就能跑

wpf 模拟抖音很火的罗盘时钟，附源码，解压就能跑相关推荐

最新文章

热门文章