和之前一样首先看一下WPF钟表效果图

是不是很炫酷，上面的那个花都是带有动画效果的图片 。

接下来就是代码了。

首先看一下整个场景的布局搭建

<Window x:Class="QQDemo1.DateTimew" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="DateTimew" Height="700" Width="800" Loaded="Window_Loaded" Name="datatime"> <Window.Resources> <Storyboard x:Key="zhuanRote"> <DoubleAnimation RepeatBehavior="Forever" From="0" To="360" Duration="1:0:0" Storyboard.TargetName="fenImg" Storyboard.TargetProperty="RenderTransform.Angle"></DoubleAnimation> <DoubleAnimation RepeatBehavior="Forever" From="0" To="360" Duration="0:1:0" Storyboard.TargetName="xiaoshiImg" Storyboard.TargetProperty="RenderTransform.Angle"></DoubleAnimation> <DoubleAnimation RepeatBehavior="Forever" From="0" To="360" Duration="0:0:5" Storyboard.TargetName="zhImg" Storyboard.TargetProperty="RenderTransform.Angle"></DoubleAnimation> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="huaImg" RepeatBehavior="Forever" Storyboard.TargetProperty="RenderTransform.Angle"> <EasingDoubleKeyFrame Value="10" KeyTime="0:0:2"></EasingDoubleKeyFrame> <EasingDoubleKeyFrame Value="30" KeyTime="0:0:4"></EasingDoubleKeyFrame> <EasingDoubleKeyFrame Value="0" KeyTime="0:0:6"></EasingDoubleKeyFrame> <EasingDoubleKeyFrame Value="-10" KeyTime="0:0:8"></EasingDoubleKeyFrame> <EasingDoubleKeyFrame Value="-30" KeyTime="0:0:10"></EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Window.Triggers> <EventTrigger RoutedEvent="Loaded"> <BeginStoryboard Storyboard="{StaticResource zhuanRote}"></BeginStoryboard> </EventTrigger> </Window.Triggers> <Canvas> <Button Width="40" Height="20" Margin="560,113" Panel.ZIndex="1" Background="#72532E" Foreground="White" Content="Min" FontWeight="SemiBold" Click="Button_Click"></Button> <Button Width="40" Height="20" Margin="610,113" Panel.ZIndex="1" Background="#72532E" Foreground="White" Content="Tchu" FontWeight="SemiBold" Click="Button_Click_1"></Button> <Border Width="529" Height="330" Margin="145,138" Background="#FAC178"></Border> <Label Width="236" Height="40" Margin="480,150" Name="time" FontSize="24" Canvas.Left="-66"></Label> <Image Width="120" Height="140" RenderTransformOrigin="0.5,0.5" Name="huaImg" Margin="510,200" Source="/QQDemo1;component/TimeImage/2224.png"> <Image.RenderTransform> <RotateTransform></RotateTransform> </Image.RenderTransform> </Image> <Image Width="90" Name="fenImg" Height="40" RenderTransformOrigin="0,0.8" Margin="251,306" Source="/QQDemo1;component/TimeImage/ponent(); this.datatime.WindowStyle = System.Windows.WindowStyle.None; //this.datatime.WindowState = System.Windows.WindowState.Normal; this.datatime.AllowsTransparency = true;//透明 this.Background = Brushes.Transparent;//背景透明5 this.datatime.WindowStartupLocation = System.Windows.WindowStartupLocation.CenterScreen; //this.time.Content = ; // DateTime d = new DateTime(); // this.xiaoshiImg.RenderTransformOrigin = new Point(0.85,0.85); } void timer_Tick(object sender, EventArgs e) { this.time.Content = DateTime.Now.ToString(); //Tick 事件 } private void Window_Loaded(object sender, RoutedEventArgs e) { } private void Image_ImageFailed(object sender, ExceptionRoutedEventArgs e) { } private void Button_Click(object sender, RoutedEventArgs e) { this.WindowState = System.Windows.WindowState.Minimized; } private void Button_Click_1(object sender, RoutedEventArgs e) { this.Close(); } }}

这个动画的实现实在场景里面去实现的。下一节，会说到在代码里面如何去控制整个动画的实现！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。