在unity中使用三种简单的方式实现实时时钟动画

在 unity 中使用三种简单的方式实现实时时钟动画

目标 这非常容易实现。你需要写几行代码就可以实现了。在这篇文章中,我们将实现两种动画方式。

效果图

  1. 数字时钟类型
  2. 模拟时钟类型

在开始编码之前,我想要告诉你一些下面会用到的关于 unity 的知识。

什么是材质

在 unity 中,材质是用来给一个对象的细节,所以我们可以决定它会看起来像什么。在大多数情况下,材料将以纹理为参数。

例如,如果你想给墙一个砖块纹理,那么你可以拖拽纹理到材质上。在本例中我们不会使用任何纹理,我们只使用颜色属性。我们有时也会给一个材质两个或更多的纹理。

什么是 TimeSpan?

Timespan 将会代表很长的时间。我们可以在 C# 程序中创建或处理 Timespan 实例。

什么是 DataTime?

DateTime 将会在每一秒给我们一个日期和时间,Timespan 将会在每秒都进行更新,所以它将会给我们实时的输出效果。

什么是 Quaternion?

Quaternion 基于复杂的数字,用来表示 3D 旋转。虽然它比简单的 3D 向量更难理解,但是它有一些更有用的特性。

什么是 Quaternion.Euler? 下面的代码将会但会返回 rotation。

public Quaternion rotation = Quaternion.Euler(0,30,0);

什么是 Transform.localRotation?

transform 的旋转是相对于父 transform 的旋转。每当你必须旋转一个对象,并且是子对象,使用这种方法。

Transform.rotation 和 Transform.localRotation 之间的差异是什么? 如果你的游戏对象是其他对象父对象那么用 transform.localrotation 否则使用 Transform.rotation。如果你的游戏对象没有父对象那么使用这这种方法都可以。

第一步 创建基本的工程

创建一个工程

  • 打开 unity
  • 点击并创建一个新的工程
  • 选择 3D 工程
  • 然后点击创建
  • 在工程中窗口中创建 3 个文件夹,分别命名为下面的三个名字
    • Assets >> Material
    • Assets >> Scene
    • Assets >> Scripts
  • 现在保存场景到场景文件夹
  • 现在通过点击 Hierarchy 面板,然后选择 Directional 光照并添加到场景中。Light >> Directional Light.现在工程创建好了,让我们开始添加一些对象到场景中吧。

第二步 设置场景

2.1 设置层次结构

  • 首先在层级视图中通过鼠标右键,选择 Create Empty,添加一个空的游戏对象
  • 重命名这个对象为 Clock。
  • 然后在 Clock 对象上创建 3 个空的子游戏对象,在 Clock 上右键选择 Create Empty。
  • 现在让我们给这个游戏对象一个有意义的名字吧。分别重命名为Hour,Minute,Second
  • 然后在每一个我们创建的游戏对象上在分别创建一个 3D 立方体对象。

看上去应该像下面这样:

  • Hour > Cube
  • Minute > Cube
  • Second > Cube
  • 确保它们的位置都在(0, 0, 0)。

设置 Cube 对象

  • 使用这个立方体,我们要显示时钟的动画。
  • 为每一个立方体对象使用下面的位置的缩放。
  • 首先选择特定的立方体对象然后在检视面板中设置这些属性。

Hour > Cube

Position 0,1,0.5

**Scale 0.5,2,0.5

Minute > Cube

Position 0,1.5,0

Scale 0.25,3,0.25

Second > Cube

Position 0,2,-0.5

Scale 0.1,4,0.1

做完了上面的操作,看上去会是下面这样

2.3 为每一个立方体对象设置材质

  • 很容易理解,我们不得不改变立方体的颜色,所以我们可以容易的找到哪个立方体对应哪个游戏物体。
  • 所以,你就需要创建材质并应用到立方体上。
  • 在材质文件夹上右键点击创建 Material
  • 我们将要创建3个材质,分辨命名为 Red, Blue 和 Green.
  • 现在我门为每一个材质都设置了一个颜色。
    • Hour 设置为红色
    • Minute 设置为绿色
    • Second 设置为蓝色
    • 做完这些,它会看起来像下面这样:

现在

  • Hour > Cube: 应用红色材质。
  • Minute > Cube: 应用绿色材质。
  • Second > Cube: 应用蓝色材质。

第三步 动画脚本

3.1 创建脚本

  • 进入 Assets >> Script文件夹,右键点击并创建一个新的 C# 脚本。
  • 命名为 ClockAnimation。
  • 然后双击打开它。

3.2 创建变量

  • 首先我们需要 transform 的引用来旋转对象。
public Transform hourTransform, minuteTransform, secondTransform;
  • 旋转还需要三个 float 类型的变量。
private float degreesInHour, degreesInMinute, degreesInSecond;  
  • 以及一个 bool 类型的变量,来判断是模拟还是数字时钟选中。
public bool analog;

3.3 开始方法

  • Start 方法里,写下面的代码。
    • degreesInHour 将表示一小时旋转多少度。
    • degreesInMinute 将表示一分钟旋转多少度。
    • degreesInSecond 将表示一秒钟旋转多少度。
void Start () 
    {
degreesInHour = 360 / 12;     // rotate 360/12 in hour.
degreesInMinute = 360 / 60;    // rotate 360/60 in minute.
degreesInSecond = 360 / 60;    // rotate 360/60 in second.
    }

3.4 更新方法

现在在 Update 方法里添加下面的代码。每一帧都会调用 update 方法。所以使用这个方法来设置时钟的旋转。使用 Quaternion.Euler 方法来改变局部的旋转。

void Update () 
{
if (analog)
        {
TimeSpantimespan = DateTime.Now.TimeOfDay;
hourTransform.localRotation = Quaternion.Euler(0f, 0f, (float)timespan.TotalHours * -    degreesInHour);
minuteTransform.localRotation = Quaternion.Euler(0f, 0f, (float)timespan.TotalMinutes *     -degreesInMinute);
secondTransform.localRotation = Quaternion.Euler(0f, 0f, (float)timespan.TotalSeconds *     -degreesInSecond);
        }
else
        {
DateTime time = DateTime.Now;
hourTransform.localRotation = Quaternion.Euler(0f, 0f, time.Hour * -degreesInHour);
minuteTransform.localRotation = Quaternion.Euler(0f, 0f, time.Minute * -    degreesInMinute);
secondTransform.localRotation = Quaternion.Euler(0f, 0f, time.Second * -    degreesInSecond);
       }
}

3.5 给脚本赋值

  • 现在拖拽刚刚的脚本到层级视图中的 Clock 游戏对象上。
  • 指定脚本的引用。

完成了!现在保存工程,然后运行游戏,你就可以看到实时的始终了。 你可以检查模拟时钟的移动,它看上去就像一个简单的时钟。

挑战 1.在这里,我们已经使用四元数旋转变换,但有我们可以不使用四元数来完成变换吗? 2.使用 Timespan 来创建秒表(Stopwatch)。 3.逆时针旋转。

总结

所以在这我们可以得出这样的结论:使用 DataTime 将会获得秒数,而 Timespan 将会获得每秒的间隔,所以它看上去运行的很流畅。

如果你有基于时间的游戏,你想要显示的实时动画,那么这篇文章将对你是有帮助的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阿炬.NET

【人在江湖飘,哪有不带刀】神器Jumony

3926
来自专栏前端侠2.0

css3的transform造成z-index无效, 附我的牛逼解法

我想锁表头及锁定列。昨天新找的方法是用css3的transform,这个应该在IE9以上都可以的。

5033
来自专栏懂啵的蟒络空间

哈希现金(Hashcash)与“工作量证明”

“哈希现金(Hashcash)是一种用于防止垃圾电子邮件和拒绝服务攻击的工作量证明系统,最近以其在比特币(以及其他加密货币)挖矿算法中的应用而闻名,由Adam ...

51710
来自专栏智能大石头

在递归函数中因不正确使用公共变量而形成死循环

昨天碰到了挺郁闷的错误,我写的一个递归函数,形成了死循环。代码如下: '递归删除频道,参数:频道ID Sub DeleteBoard(bid)     '删除...

3465
来自专栏Modeng的专栏

Vue一个案例引发的递归组件的使用

今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》 之...

1531
来自专栏lhyt前端之路

(VUE!jQuery!插件!)盘点前端群的无脑回答0.前言总结

你是不是在前端群见过很多这种前景:这个怎么做?怎么拿到这些数据?怎么更新整个列表?

1804
来自专栏GreenLeaves

原型模式(创建型模式)

整个抽象的游戏设施建造系统相对变化较慢,本例中只有一个Build的创建方法,而Build内部的方法实现,该实现依赖与各种具体的实现,而这些实现变化的非常频繁,现...

1062
来自专栏Python中文社区

多种方法爬取猫眼电影并分析(附代码)

摘要: 作为小白,爬虫可以说是入门python最快和最容易获得成就感的途径。因为初级爬虫的套路相对固定,常见的方法只有几种,比较好上手。选取网页结构较为简单的猫...

6183
来自专栏编程

用JS 封装类似于JQ中animate的动画效果

前言:现在网上对这种类似的代码繁多,但是都是各家所长,希望源码时代H5前端讲师写的代码能够帮助到需要这样效果的朋友。 首先说一下,这篇文章对初学者有很大的帮助,...

2515
来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (9)---交互式报表之动态排序

在葡萄城ActiveReports报表中除了提供对数据源进行排序的功能之外,还提供了最终用户排序功能,最终用户可以对报表进行区域内排序和整个数据源排序,结合数据...

18210

扫码关注云+社区

领取腾讯云代金券