微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，

如果对您有所帮助：欢迎赞赏。

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

内容目录

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

1.实现效果

目前只实现了秒针动画，下篇文章实现完整效果，可在网站上查看，微信公众号今天只发布了一篇。

效果

2.业务场景

玩具

3.编码实现

工程简单，只更改一个主窗体文件，另加一个时钟背景图片

3.1 主窗体 MainWindow.xaml

布局时钟的时针、分针、秒针，及添加秒针动画，秒针动画写的比较啰嗦，只写了30秒，其实可以在MainWindow.xaml.cs文件中用for循环添加EasingDoubleKeyFrame，直接添加到xaml中占代码也不美观，暂时先这样吧，下篇文章有空改了。

<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>

4.本文参考

Design com WPF 大神的学习视频：1/2 - Creating a clock with Animations

5.代码下载

源码中实现了全部效果，大伙可以直接下载编译运行，但还是建议看大神视频学习，视频中使用Blend布局时钟、设置动画，类似PS(PhotoShop)，设计界面很是方便的。

Github源码下载：Clock

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。


转载请注明本文地址：https://dotnet9.com/6852.html


欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章


C# WPF 时钟动画(1/2)的更多相关文章

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

    模拟实现时钟效果,学习WPF动画好例子,本文承接上文 C# WPF 时钟动画(1/2). 微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# ...

  2. WPF利用动画实现圆形进度条

    原文:WPF利用动画实现圆形进度条 这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现方式一般都是GDI实现的,想到 ...

  3. WPF弹性模拟动画

    原文:WPF弹性模拟动画 我们此次将要制作模拟物理中的弹性现象的交互动画,我们让一个小球向鼠标点击位置移动,这个移动的轨迹不是简单的位移,而是根据胡克定律计算得出的. 胡克定律:F=-kd F代表弹性 ...

  4. WPF控制动画开始、停止、暂停和恢复

    1.闲言 好久也没更新一博客了,自己有点发懒,同时确实这几个月来也有点忙.风机监测软件,项目中,有这样一个小需求:正常风机在旋转的时候,上位机软要做一个风机的图片,让它不停地旋转,一但检测到下面风机停 ...

  5. 使用Canvas制作时钟动画

    复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较 ...

  6. 15个超强悍的CSS3圆盘时钟动画赏析

    在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有 ...

  7. Wpf(Storyboard)动画简单实例

    原文:Wpf(Storyboard)动画简单实例 动画的三种变换方式 RotateTransform:旋转变换变化值:CenterX围绕转的圆心横坐标 CenterY纵坐标 Angle旋转角度(角度正 ...

  8. iOS中的时钟动画

    iOS 动画效果非常多,我们在开发中可能会遇到很多动画特效,我们就会用到核心动画框架CoreAnimation,核心动画里面的动画效果有很多,都是在QuartzCore.framework框架里面,今 ...

  9. 14款超时尚的HTML5时钟动画

    时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等 ...

随机推荐

  1. DirectX11 With Windows SDK--30 图像模糊、索贝尔算子

    前言 到这里计算着色器的主线学习基本结束,剩下的就是再补充两个有关图像处理方面的应用.这里面包含了龙书11的图像模糊,以及龙书12额外提到的Sobel算子进行边缘检测.主要内容源自于龙书12,项目源码 ...

  2. Java中正确终止线程的方法

    Thread类中有一个已经废弃的 stop() 方法,它可以终止线程,但由于它不管三七二十一,直接终止线程,所以被废弃了.比如,当线程被停止后还需要进行一些善后操作(如,关闭外部资源),使用这个方法就 ...

  3. ubuntu 如何搭建svn 服务器

    1.在终端中直接输入  sudo apt-get install subversion,选择安装即可 来这个subversion同时包含了服务端和客户端. 2.(可选)看版本命令 svnserve - ...

  4. HDU_3410_单调栈

    http://acm.hdu.edu.cn/showproblem.php?pid=3410 初探单调栈,从左往右,求l,从右往左,求r. #include<iostream> #incl ...

  5. Burpsuite--安装和环境配置

    1.引子 Burpsuite是一款安全人员常用的工具.在渗透测试中,我们使用Burp Suite将使得测试工作变得更加容易和方便,即使在不需要娴熟的技巧的情况下,只有我们熟悉Burp Suite的使用 ...

  6. 《自拍教程9》Python编程风格规范

    Python编程风格规范 根据Python官方提供的Python编程风格规范: Style Guide for Python Code, 即PEP8规范, https://www.python.org ...

  7. 查看php相关信息

    1.最常见的就是 创建一个  php页面  ,例如 test.php,  内容如下 <?php phpinfo();?> 直接访问 这个页面,就可以看到php的 信息了 2.其它方法  直 ...

  8. 大数据运维尖刀班 | 集群_监控_CDH_Docker_K8S_两项目_腾讯云服务器

    说明:大数据时代,传统运维向大数据运维升级换代很常见,也是个不错的机会.如果想系统学习大数据运维,个人比较推荐通信巨头运维大咖的分享课:https://url.cn/5HIqOOr,主要是实战强.含金 ...

  9. c++ 有符号int和无符号int做加减乘除问题

    c++ 有符号int和无符号int做加算术运算的问题: 一.运算过程先把有符号的补码数直接看成无符号数,在和无符号数进行算术运算 二.int和unsigned int类型进行混合算数运算时,运算结果为 ...

  10. GNU make doc - 6.6 追加变量值

    有时我们需要对已经定义过的变量进行追加,可以使用+=进行这一操作,就像下面这样 objects += another.o 该语句取objects变量的值,并在其后追加another.o(结果会在原变量 ...