微信公众号：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 整理发布，欢迎转载。

转载请注明本文地址：

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