下图为主页效果:
开始
项目中很多自定义 widget,今天的主角是 背景层,不同的天气气象有不一样的呈现效果,一共实现了 12 种类别,其中有 晴、多云、阴天、小中大雨、小中大雪、雾、霾、浮尘,而背景层又分为三层:
- 背景颜色层。从上到下的渐变效果
- 云层。只有一种图片,对其位移、数量、染色做不同变化达到不同效果
- 雨雪层。为雨雪天气单独做了动画,很炫酷。
好,真正的主角就是这个雨雪层,为了更好的预览效果,在关于页面有上角添加切换天气类型的入口,实时查看不同气象下不同的背景效果。如下图,为雨雪的最终效果(gif 效果看起来会失真,请下载 apk 自行体验):
不得不说,如此复杂的动画(复杂并不是指多难实现,而是不停的绘制很多图片下),Flutter 还能有不错的性能表现,媲美原生效果。