模拟实现时钟效果,学习WPF动画好例子,本文承接上文 C# WPF 时钟动画(1/2)。
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言,
如果对您有所帮助:欢迎赞赏。
C# WPF 时钟动画(2/2)
内容目录
- 实现效果
- 业务场景
- 编码实现
- 本文参考
- 源码下载
1.实现效果
2.业务场景
模拟时钟
3.编码实现
使用 .Net Core 3.1 创建名为 “Clock” 的WPF解决方案,解决方案中需要添加时钟背景图片,图片如下:https://github.com/Abel13/Clock/blob/master/Clock/Assets/clock.png
3.1 主窗体 MainWindow.xaml
使用3个Border布局时钟的时针、分针、秒针,并给3个指针添加动画,动画说明如下:
- 时针每12个小时循环一圈(360°),每个小时旋转30°(30°*12=360°);
- 分针每60分钟循环一圈(360°),每分钟旋转6°(6°*60=360°);
- 秒针每60秒循环一圈(360°),每秒钟旋转6°(6°*60=360°),并且秒针旋转6°有个轻微的摆动动画。
3.2 MainWindow.xaml.cs
后台代码开启三个指针动画,并设置各指针动画起始位置
using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media.Animation;
namespace Clock
{
///
/// Interaction logic for MainWindow.xaml
///
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
int now_hours = DateTime.Now.Hour > 12 ? (DateTime.Now.Hour - 12) : DateTime.Now.Hour;
int now_minutes = DateTime.Now.Minute;
int now_seconds = DateTime.Now.Second;
Storyboard seconds = (Storyboard)second.FindResource("sbseconds");
seconds.Begin();
seconds.Seek(new TimeSpan(0, 0, 0, now_seconds, 0));
Storyboard minutes = (Storyboard)minute.FindResource("sbminutes");
minutes.Begin();
minutes.Seek(new TimeSpan(0, 0, now_minutes, now_seconds, 0));
Storyboard hours = (Storyboard)hour.FindResource("sbhours");
hours.Begin();
hours.Seek(new TimeSpan(0, now_hours, now_minutes, now_seconds, 0));
}
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
DragMove();
}
}
}
4.本文参考
Design com WPF 大神的学习视频:
1/2 - Creating a clock with Animations
2/2 - Creating a clock with Animations
5.代码下载
源码中实现了全部效果,大伙可以直接下载编译运行;建议看大神视频手敲一遍,加深学习印象;视频中使用Blend布局时钟、设置动画,类似PS(PhotoShop),设计界面很是方便的。
Github源码下载:Clock
除非注明,文章均由 Dotnet9 整理发布,欢迎转载。
转载请注明本文地址:https://dotnet9.com/6858.html
欢迎扫描下方二维码关注 Dotnet9 的微信公众号,本站会及时推送最新技术文章