WPF实现钟表效果

2024-10-16 17:43:42

和之前一样首先看一下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/wwww.png">
      <Image.RenderTransform>
        <RotateTransform></RotateTransform>
      </Image.RenderTransform>
    </Image>
    <Image Name="xiaoshiImg" Width="48" Height="134" Margin="300,242" RenderTransformOrigin="0.5,0.8" Source="/QQDemo1;component/TimeImage/www.png" Canvas.Top="-26">
      <Image.RenderTransform>
        <RotateTransform></RotateTransform>
      </Image.RenderTransform>
    </Image>
    <Image Width="867" Height="700" Source="/QQDemo1;component/TimeImage/3.png"></Image>
    <Image Width="30" Height="30" Margin="300,160" Source="TimeImage/11.png"></Image>
    <Image Width="30" Height="30" Margin="314,160" Source="TimeImage/12.png"></Image>
    <Image Name="zhImg" RenderTransformOrigin="0.5,0.5" Width="376" Margin="0,0" Height="356" Source="TimeImage/22230.png" Canvas.Left="-59" Canvas.Top="-44">
      <Image.RenderTransform>
        <RotateTransform></RotateTransform>
      </Image.RenderTransform>
    </Image>
    <Image Width="30" Height="30" Margin="310,430" Source="TimeImage/16.png"></Image>
    <Image Width="30" Height="30" Margin="430,305" Source="TimeImage/13.png"></Image>
    <Image Width="30" Height="30" Margin="180,305" Source="TimeImage/19.png"></Image>
    <Image Width="30" Height="30" Margin="390,200" Source="TimeImage/11.png" Canvas.Left="-10" Canvas.Top="-12"></Image>
    <Image Width="30" Height="30" Margin="420,255" Source="TimeImage/12.png" Canvas.Left="-6" Canvas.Top="-14" ImageFailed="Image_ImageFailed"></Image>
    <Image Width="30" Height="30" Margin="380,190" Source="TimeImage/14.png" Canvas.Left="34" Canvas.Top="174"></Image>
    <Image Width="30" Height="30" Margin="390,190" Source="TimeImage/15.png" Canvas.Left="-10" Canvas.Top="216"></Image>
    <Image Width="30" Height="30" Margin="390,190" Source="TimeImage/17.png" Canvas.Left="-148" Canvas.Top="216"></Image>
    <Image Width="30" Height="30" Margin="400,190" Source="TimeImage/18.png" Canvas.Left="-193" Canvas.Top="174"></Image>
    <Image Width="30" Height="30" Margin="400,200" Source="TimeImage/10.png" Canvas.Left="-193" Canvas.Top="41"></Image>
    <Image Width="30" Height="30" Margin="400,200" Source="TimeImage/11.png" Canvas.Left="-208" Canvas.Top="41"></Image>
    <Image Width="30" Height="30" Margin="370,200" Source="TimeImage/11.png" Canvas.Left="-148" Canvas.Top="-12"></Image>
    <Image Width="30" Height="30" Margin="320,160" Source="TimeImage/11.png" Canvas.Left="-84" Canvas.Top="28"></Image>
  </Canvas>
</Window>

场景的搭建比较死板，没有用代码去创建整个场景，位置都是自己一个一个的慢慢的摆放的比较随意。

下面就是程序的代码了。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Timers;
using System.Windows.Navigation;
using System.Windows.Threading;

namespace QQDemo1
{
  /// <summary>
  /// DateTime.xaml 的交互逻辑
  /// </summary>
  public partial class DateTimew : Window
  {
    public DateTimew()
    {

      DispatcherTimer timer = new DispatcherTimer(); //时间相当于Timer
      timer.Tick += new EventHandler(timer_Tick);
      //timer.Interval = TimeSpan.FromSeconds(0.1);
      timer.Start();
      InitializeComponent();
      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();
    }

  }
}

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

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

WPF实现时钟特效

WPF在样式定义和UI动画上面相对于以前的技术有了不少的提升,下面给出WPF技术实现钟表的效果: 1.Visual Studio新建一个WPF应用程序,命名为WpfClock,新建一个images文件夹,并准备一个钟表的背景图片和程序图标素材. 2.编辑MainWindow.xaml文件,对UI进行定制,代码如下(指针都是用Rectangle实现的,当然可以用图片代替): using System; using System.Collections.Generic; using System.L
WPF实现钟表效果

和之前一样首先看一下WPF钟表效果图是不是很炫酷,上面的那个花都是带有动画效果的图片 . 接下来就是代码了. 首先看一下整个场景的布局搭建 <Window x:Class="QQDemo1.DateTimew" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&
JS+CSS3实现的简易钟表效果示例

本文实例讲述了JS+CSS3实现的简易钟表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net js+css3简易钟表</title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{
js实现特别简单的钟表效果

本文实例为大家分享了js实现钟表效果的具体代码,供大家参考,具体内容如下 <div class="clock"> <div class="circle"></div> <div class="hour"></div> <div class="minutes"></div> <div class="seconds">
WPF实现动画效果

学习平台微软开发者博客:https://devblogs.microsoft.com/?WT.mc_id=DT-MVP-5003986微软文档与学习:https://docs.microsoft.com/zh-cn/?WT.mc_id=DT-MVP-5003986微软开发者平台:https://developer.microsoft.com/en-us/?WT.mc_id=DT-MVP-5003986 1.介绍在之前做winform中, 也做过一些动画效果, 但是整个动画都需要我们自己去编写
WPF实现动画效果（三）之时间线（TimeLine）

WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板正文时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重复次数.该时间段内时间进度的快慢等等.在WPF中内置了如下几种TimeLine: Animat
WPF实现动画效果（一）之基本概念

WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板正文 WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从
WPF实现动画效果（二）之From/To/By动画

WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板正文我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画: var widthAnimation = new DoubleAnimat
WPF实现动画效果（四）之缓动函数

WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板正文缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. var widthAnimation
WPF实现动画效果（五）之关键帧动画

WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板正文与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值. 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧
WPF实现动画效果（六）之路径动画

WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板正文路径动画是一种专门用于将对象按照指定的Path移动的动画,虽然我们也可以通过控制动画的旋转和偏移实现对象的移动,但路径动画更专业,它的实现更加简洁明了. 路径动画中最常用的是Matri

WPF实现钟表效果

相关推荐

随机推荐