文章首发于公众号:技术最TOP
周末发表了一篇文章《这个项目也太屌了吧》,给大家推荐了一个炫酷的Flutter粒子时钟项目,不过没有将具体实现思路和代码,所幸,作者自己写了一篇博客将这个项目的背景、实现思路、和所遇到的问题,我觉得对非常有用,因此翻译出来,整理给大家!原文题目《我是如何创建粒子时钟,并赢得了#FlutterClock挑战的》
。
背景
Google在2019年11月18日发起了The Flutter Clock Challenge
挑战活动,内容很简单:使用Flutter UI工具包设计时钟
。Google专家小组将根据四个主要标准对参赛作品进行评判:视觉美感
,创意新颖性
,代码质量
和整体执行力
。
在这之前,我只使用过Flutter一两次,这对于我来说是一个潜在的机会。
最初的想法
挑战开始了大约两周后,我才有了一些想法,但还没有编写任何代码,解决此类问题时,我通常的方法是首先寻找现有的解决方案来找灵感。但这次不行。相反,我在Figma
上新建了一个文档,并列出了一些想法。它们都是非常简单数字时钟设计
和晦涩的单色组合
。
很快地,我就对这个设计感到厌倦了,所以我关闭了Figma,就去下载了Flutter Clock GitHub
(https://github.com/flutter/flutter_clock)库,以查看一些示例代码。
这个库包含了2个项目,一个是基于模拟时钟的演示,另一个是基于数字时钟的演示,我在Figma上设计都是数字的,所以自然而然地,我启动了基本的数字时钟项目。再次缺乏灵感,在示例项目的帮助下,我搁置了挑战,开始去做其他事儿。
几天之后,在一次晨跑中,我又开始认真的思考这个挑战,一个普通的成年人每天看几次手表?对我来说,让时钟变得有趣起来是真正的挑战。是否可以使“报时间”成为自动体验?比如:即使您对时间不感兴趣,看着手表也很有趣。这不仅需要视觉上令人惊叹的设计
或新颖的动画方案
。
- 1、如果每次您看钟时都有不同的外观会怎样?
- 2、我们能否激发好奇心,使您渴望下一次设计迭代?或者,当您喜欢的设计永久消失时,您会感到难过吗?
- 3、我们是否可以将背景形状、颜色、动画随机改变以使它:a. 看起来很酷,b. 足够满足1和2的随机性,c. 不会分散你看时间的注意力?
我以前从未完成过任何艺术,或者根本没有做过Flutter,所以我着手建