C# WPF 时钟动画(2/2)

最新推荐文章于 2024-09-02 15:46:38 发布
最新推荐文章于 2024-09-02 15:46:38 发布
阅读量452 收藏 2
点赞数
分类专栏： c# WPF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HenryMoore/article/details/103892408
版权
c# 同时被 2 个专栏收录
66 篇文章 3 订阅
订阅专栏
WPF
65 篇文章 16 订阅
订阅专栏

模拟实现时钟效果，学习WPF动画好例子，本文承接上文 C# WPF 时钟动画(1/2)。

微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，
如果对您有所帮助：欢迎赞赏。

C# WPF 时钟动画(2/2)

内容目录

  1. 实现效果
  2. 业务场景
  3. 编码实现
  4. 本文参考
  5. 源码下载

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个指针添加动画，动画说明如下：

  1. 时针每12个小时循环一圈(360°)，每个小时旋转30°（30°*12=360°）；
  2. 分针每60分钟循环一圈(360°)，每分钟旋转6°（6°*60=360°）；
  3. 秒针每60秒循环一圈（360°），每秒钟旋转6°（6°*60=360°），并且秒针旋转6°有个轻微的摆动动画。
<Window x:Class="Clock.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Clock"
        mc:Ignorable="d"
        AllowsTransparency="True" WindowStyle="None" ResizeMode="NoResize"
        Height="520" Width="520" WindowStartupLocation="CenterScreen" Background="{x:Null}">
    <Window.Resources>
        <Storyboard x:Key="sbseconds" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="second" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <EasingDoubleKeyFrame KeyTime="0" Value="-90">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:1" Value="-84">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:2" Value="-78">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:3" Value="-72">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:4" Value="-66">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:5" Value="-60">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:6" Value="-54">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:7" Value="-48">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:8" Value="-42">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:9" Value="-36">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:10" Value="-30">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:11" Value="-24">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:12" Value="-18">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:13" Value="-12">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:14" Value="-6">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:15" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:16" Value="6">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:17" Value="12">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:18" Value="18">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:19" Value="24">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:20" Value="30">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:21" Value="36">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:22" Value="42">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:23" Value="48">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:24" Value="54">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:25" Value="60">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:26" Value="66">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:27" Value="72">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:28" Value="78">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:29" Value="84">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="00:00:30" Value="90">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="0.4"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource sbseconds}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Border BorderThickness="10" BorderBrush="Black" CornerRadius="300" Width="520" Height="520">
            <Grid Height="500" Width="500" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Border CornerRadius="350">
                    <Border.Background>
                        <ImageBrush ImageSource="Assets/clock.png"/>
                    </Border.Background>
                </Border>

                <Border CornerRadius="350" Background="#778889BB"/>

                <Border x:Name="hour" CornerRadius="0 15 15 0" Height="10" Width="130" BorderThickness="3" BorderBrush="#FF66B01C" Margin="0,245,120,245" HorizontalAlignment="Right" RenderTransformOrigin="0,0.5">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="-90"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Border.RenderTransform>
                </Border>
                <Border x:Name="minute" CornerRadius="0 15 15 0" Height="5" Width="160" BorderThickness="3" BorderBrush="#FFD15209" Margin="250.5,247,0,248" HorizontalAlignment="Left" RenderTransformOrigin="0,0.5">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="-90"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Border.RenderTransform>
                </Border>
                <Border x:Name="second" CornerRadius="0 15 15 0" Height="3" Width="220" Background="Red" Margin="0,248,30,248" HorizontalAlignment="Right" RenderTransformOrigin="0,0.5">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="-90"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Border.RenderTransform>
                </Border>
                <Ellipse Fill="Black" Width="20" Height="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </Border>
    </Grid>
</Window>

3.2 MainWindow.xaml.cs

后台代码开启三个指针动画，并设置各指针动画起始位置

using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media.Animation;

namespace Clock
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    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 的微信公众号，本站会及时推送最新技术文章

Dotnet9

Dotnet9.com
关注
专栏目录
C#WPFXAML动画
Pzz_Lite的博客
10-11 1304
C#WPF XAML 动画 一、动画(Animatuon) I.WPF三种动画: 1.（1）线性插值：在开始值和结束值之间以逐步增加的方式改变属性的动画(线性插值过程)。 （2）、关键帧：从一个值突然变成另一值的动画(关键帧动画)。所有关键帧动画都使用"类型名 + AnimationUsingKeyFrames " 的形式进行命名，比如StringAnimationUsingKeyFrames和ObjectAnimationUsingKeyFrames。 （3)、路径:在System.Windows.Med
C#_WPF动画（三）
weixin_50179860的博客
12-19 331
1、控制播放。 到目前为止，已经在事件触发器中使用了一个动作，加载动画的BeginStoryboard动作， 然而，一旦创建故事版，就可以使用其他动作控制故事板，这些动作类都继承自 ControllableStoryboardAction类，控制故事版的主要类如下： 为成功地执行这些动作，必须在同一个Triggers集合中定义所有的触发器，如果将 BeginStoryboard动作的触发器和PauseStoryboard动作的触发器放置到不同的集合中， PauseStoryboard动作就无法工作。 分析
wpf版系统时钟
02-20
wpf的 时钟 跟系统时间 同步,利用binding 和timer
C#WPF设计一个动态时钟显示
BoomBiuBiu的博客
04-16 1602
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input;.
WPF性能优化之UI虚拟化
最新发布
u013319633的博客
09-02 1345
相信很多WPF开发者都碰到过这种情况，当在一个ItemsControl（或继承自ItemsControl）控件中绑定一个集合的时候，如果集合中的条目过多，那么界面就会变得卡顿甚至停止响应，特别是在容器或窗口大小发生改变时，界面的渲染就会给人一种慢半拍的感觉，体验感非常差，这时我们就可以用虚拟化技术来解决这个问题。
C# WPF时钟表盘 及设置闹钟
JGD313的博客
12-17 614
不足之处请大佬修改 表盘设计界面 <Window x:Class="动画表.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ...
C# WPF动画，时钟程序源码分享,闹钟程序源码分享
weixin_45547854的博客
12-16 618
钟表界面右击设置闹钟 源码奉上请大佬点评。 注释齐全：不做流氓。 钟表界面xaml代码 <Window x:Class="WPF动画.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microso...
C# WPF 时钟动画(1/2)
Dotnet9的专栏
01-08 421
微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言， 如果对您有所帮助：欢迎赞赏。 C# WPF 时钟动画(1/2) 内容目录 实现效果 业务场景 编码实现 本文参考 源码下载 1.实现效果 目前只实现了秒针动画，下篇文章实现完整效果，可在网站上查看，微信公众号今天只发布了一篇。 效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4K...
WPF数据加载，时钟动画.rar
05-29
至于文件列表中的“WPF数据加载，时钟动画”，这可能是指包含此示例项目的文件夹，其中可能包括XAML文件（用于定义用户界面布局和动画）、C#代码文件（用于处理业务逻辑和数据加载）以及可能的资源文件（如图像或...
C# WPF制作的LED时分秒显示时间，含源码和导出免安装exe
02-28
WPF是.NET框架的一部分，它提供了丰富的用户界面（UI）设计能力，支持2D和3D图形、动画、图像、文本等元素，使得开发者能够创建具有视觉吸引力的应用。 在C# WPF项目中，我们通常会创建一个Window对象，作为应用...
WPF实现时钟特效
09-03
在本文中，我们将深入...总的来说，这个简单的WPF时钟示例展示了如何结合XAML和C#来创建动态UI，以及如何使用定时器来实现周期性更新。通过这种方式，开发者可以利用WPF的强大功能来创建更复杂、更吸引人的用户界面。
wpf开发的一个时钟小程序
08-22
源码描述： 一、源码特点 wpf开发的一个时钟小程序，代码比较简单，界面干净
用WPF自制的漂亮时钟控件
10-31
自己做的WPF时钟 实现效果请看 http://blog.csdn.net/lovelan1748/archive/2009/10/30/4750101.aspx
wpf3D时钟
01-20
wpf3D时钟
Blend2013制作WPF精美时钟
07-29
WPF制作精美时钟；
WPF日期时间控件
08-22
还不错的控件，拿来分享
WPF实现简体版钟表
qq_43551373的博客
01-09 488
 windows代码： &lt;Window x:Class="_04_钟表续.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x...
C#实现的WPF立体动画效果源码示例
综上所述，本资源提供的C# WPF立体动画示例源码，不仅展示了一个具体的动画效果实现，同时也涵盖了WPF 3D图形和动画编程的关键技术和实践方法。通过学习和应用这些知识点，开发者可以掌握如何在WPF应用中制作出丰富...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值