圆锥时钟
Conic Clock 是一个用 Flutter 编写的动态时钟。这是我(ZHENG HAOTIAN / Justin Fincher)为 Flutter Clock 挑战项目。
圆锥阴影的角度表示秒数。左上角和右下角是小时和分钟指示器,右上角是天气,左下角是位置。
配色方案会根据时间、天气和温度进行调整。例如,在6:00时会是日出(粉色+淡蓝色),在雷雨天气时颜色会更深,在高温时颜色会更鲜艳,等等。
有关更多信息,请参阅下面的YouTube视频。
屏幕截图
| Time | Weather | 截图 |
|---|---|---|
| 12:53 | 清晰 | ![]() |
| 18:33 | 清晰 | ![]() |
| 21:34 | 清晰 | ![]() |
| 23:53 | 清晰 | ![]() |
| 03:59 | 清晰 | ![]() |
| 06:02 | 清晰 | ![]() |
| 08:20 | 清晰 | ![]() |
| 12:12 | 清晰 | ![]() |
| 15:23 | 清晰 | ![]() |
设计理念
我认为联想智能时钟以及像Google Home Hub(我确实有一个)这样的其他智能时钟是“环境”设备,因为
- 它们通常是固定的(因为时钟需要固定位置才能方便人们获取信息)
- 它们被动工作(主动反馈仅在设备通过语音命令或屏幕上的物理交互激活时发生,除此之外它只是一个时钟)
- 理想情况下,它们总是开启的(因此需要平滑的过渡,没有突然的变化来引起不必要的注意,闪烁的天气效果如闪电绝对被禁止,因为没有人想在昏暗的房间里睡觉时出现这种情况)
因此,表盘需要反映并融入环境。圆锥时钟很适合
- 圆锥阴影在不断旋转,每圈60秒。它可预测、可靠、易于理解,无需学习成本。
- 配色方案在不断更新,但仅以渐进的方式。表盘作为一种视图组件,无法知道数据提供商何时会刷新时钟,因此任何具有固定持续时间的插值方法都会导致意外的行为。相反,lerp函数会尊重之前的动量,从而在动态颜色变化方面提供自然的感觉。
- 配色方案是时钟所处环境的有效表示,包括温度、天气和时间。使用HSV颜色模型,所有这些因素都可以转化为色相、饱和度、亮度的变化。例如
- 夜晚 -> 整体颜色变暗 -> V-
- 白天 -> 整体颜色变亮 -> V+
- 炎热 -> 整体颜色更鲜艳 -> S+
- 有雾 -> 仍然明亮,但颜色褪色 -> S- V+
- 暴雨 -> 更暗,但有对比度 -> S+ V-
- 文本蒙版的使用是为了保持文本的可读性,同时保持“环境”感。
- 时间是最重要的元素,因此小时和分钟指示器将位于左上角和右下角。任何时候至少都会有一个可见时间的位置。
- 与时间相比,天气和位置不是那么重要,因此它们在每一圈中分别可见30秒,并带有淡入淡出的动画,因为我不希望它们破坏圆锥的整体美感。
技巧
为了进行调试,conic_clock.dart有一个名为_lightYearMode的属性。将其用作延时切换,时间将比正常快3000倍。








