C# WPF 時鐘動畫(2/2)

来源:https://www.cnblogs.com/Dotnet9-com/archive/2020/01/08/12166918.html
-Advertisement-
Play Games

模擬實現時鐘效果，學習WPF動畫好例子，本文承接上文 "C WPF 時鐘動畫(1/2)" 。 微信公眾號： "Dotnet9" ，網站： "Dotnet9" ，問題或建議： "請網站留言" ， 如果對您有所幫助： "歡迎贊賞" 。 C WPF 時鐘動畫(2/2) 內容目錄 1. 實現效果 2. 業務 ...


模擬實現時鐘效果，學習WPF動畫好例子，本文承接上文 C# WPF 時鐘動畫(1/2)。

微信公眾號：Dotnet9，網站：Dotnet9，問題或建議：請網站留言，
如果對您有所幫助：歡迎贊賞。

C# WPF 時鐘動畫(2/2)

內容目錄

  1. 實現效果
  2. 業務場景
  3. 編碼實現
  4. 本文參考
  5. 源碼下載

1.實現效果

時鐘實時展示系統本機時間
C# WPF時鐘

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • struts2模型驅動傳值問題
    控制台錯誤提示： 2020-01-08 18:34:40,292 [http-nio-8080-exec-3] [org.apache.struts2.dispatcher.Dispatcher]-[WARN] Could not find action or result: /views/dire ...
  • NetCore 啟動地址配置詳解
    背景 程式在發佈部署時候，設置環境 不生效，也沒在代碼里使用 ,啟動一直是 .最後測試發現只有在 中配置 才生效，網上找了半天資料也沒看到有什麼問題。 最終翻看源代碼，發現是在 中的 替換了全局 導致。 平時開發大體知道程式啟動時候埠啟用順序是 環境變數 預設，具體是怎麼確定使用哪個配置的,沒找到 ...
  • asp.net core 實現支持多語言
    asp.net core 實現支持多語言 Intro 最近有一個外國友人通過郵件聯繫我，想用我的活動室預約，但是還沒支持多語言，基本上都是寫死的中文，所以最近想支持一下更多語言，於是有了多語言方面的一些實踐 國際化/本地化介紹 國際化（Globalization）和本地化（Localization） ...
  • ASP.NET MVC 控制器
    上篇我們說到。編寫控制器類的步驟可總結為兩個：實現一個類，然後在該類中添加一些公有方法，在運行的該類的時候可作為控制器發現，而這些方法則作為操作被髮現。 這裡我們有兩個細節： 1：系統如何知道實例化那個控制器 2：如何確定用那個方法。 路由： 1：被傳統的路由發現，2：通過特性路由發現，3:通過混合 ...
  • 在.NET Core中批量註入Grpc服務
    GRPC 是谷歌發佈的一個開源、高性能、通用RPC服務，儘管大部分 RPC 框架都使用 TCP 協議，但其實 UDP 也可以，而 gRPC 乾脆就用了 HTTP2。還有就是它具有跨平臺、跨語言 等特性，這裡就不再說明RPC是啥。 在寫項目當中，grp服務過多會非常頭疼，那麼我們分析一下如果解決這個問 ...
  • C# Excel導出超出65536行報錯 Invalid row number (65536) outside allowable range (0..65535)
    C# Excel導出超出65536行報錯 Invalid row number (65536) outside allowable range (0..65535) ...
  • 【DDD】持久化領域對象的方法實踐
    雖然領域驅動設計的思想很誘人，但我們依然會面臨各種隱藏的困難，就比如今天我們要講的主題“持久化”：即使前期我們設計了足夠完整的領域對象，但是依然需要持久化它們到資料庫中，而普通的關係型資料庫可能很難維持領域對象的原有結構，所以我們必須要使用一些特有的手段來處理它。將值對象持久化成欄位好呢？還是將值對... ...
  • .Net 程式代碼混淆加密工具 ILProtector
    我的項目中某一部分信息比較敏感,但是.Net程式反編譯之後連註釋都看得到。需要把exe保護起來,如:代碼混淆之後再加殼。 Bing到一款.Net混淆工具 ILProtector 作為資深工具黨,先"拿來主義"體驗體驗。本篇主要介紹工具使用 1.加密前的exe,反編譯之後什麼都有 2.用ILProte ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類