圆锥时钟

Conic Clock 是一个用 Flutter 编写的动态时钟。这是我(ZHENG HAOTIAN / Justin Fincher)为 Flutter Clock 挑战项目。

圆锥阴影的角度表示秒数。左上角和右下角是小时和分钟指示器,右上角是天气,左下角是位置。
配色方案会根据时间、天气和温度进行调整。例如,在6:00时会是日出(粉色+淡蓝色),在雷雨天气时颜色会更深,在高温时颜色会更鲜艳,等等。
有关更多信息,请参阅下面的YouTube视频。

屏幕截图

Time Weather 截图
12:53 清晰 1
18:33 清晰 2
21:34 清晰 3
23:53 清晰 4
03:59 清晰 5
06:02 清晰 6
08:20 清晰 7
12:12 清晰 8
15:23 清晰 9

设计理念

我认为联想智能时钟以及像Google Home Hub(我确实有一个)这样的其他智能时钟是“环境”设备,因为

  • 它们通常是固定的(因为时钟需要固定位置才能方便人们获取信息)
  • 它们被动工作(主动反馈仅在设备通过语音命令或屏幕上的物理交互激活时发生,除此之外它只是一个时钟)
  • 理想情况下,它们总是开启的(因此需要平滑的过渡,没有突然的变化来引起不必要的注意,闪烁的天气效果如闪电绝对被禁止,因为没有人想在昏暗的房间里睡觉时出现这种情况)

因此,表盘需要反映并融入环境。圆锥时钟很适合

  • 圆锥阴影在不断旋转,每圈60秒。它可预测、可靠、易于理解,无需学习成本。
  • 配色方案在不断更新,但仅以渐进的方式。表盘作为一种视图组件,无法知道数据提供商何时会刷新时钟,因此任何具有固定持续时间的插值方法都会导致意外的行为。相反,lerp函数会尊重之前的动量,从而在动态颜色变化方面提供自然的感觉。
  • 配色方案是时钟所处环境的有效表示,包括温度、天气和时间。使用HSV颜色模型,所有这些因素都可以转化为色相、饱和度、亮度的变化。例如
    • 夜晚 -> 整体颜色变暗 -> V-
    • 白天 -> 整体颜色变亮 -> V+
    • 炎热 -> 整体颜色更鲜艳 -> S+
    • 有雾 -> 仍然明亮,但颜色褪色 -> S- V+
    • 暴雨 -> 更暗,但有对比度 -> S+ V-
  • 文本蒙版的使用是为了保持文本的可读性,同时保持“环境”感。
    • 时间是最重要的元素,因此小时和分钟指示器将位于左上角和右下角。任何时候至少都会有一个可见时间的位置。
    • 与时间相比,天气和位置不是那么重要,因此它们在每一圈中分别可见30秒,并带有淡入淡出的动画,因为我不希望它们破坏圆锥的整体美感。

技巧

为了进行调试,conic_clock.dart有一个名为_lightYearMode的属性。将其用作延时切换,时间将比正常快3000倍。

GitHub

https://github.com/JustinFincher/FlutterClock