从 0 到 1 搞一个 Compose Desktop 版本的玩天气之绘制

上一篇文章 “从 0 到 1 搞一个 Compose Desktop 版本的玩天气之踩坑” 中大概说了下刚开始使用 Compose Desktop 会遇到的一些问题，帮大家踩了踩坑，那么这一篇则会带大家一起来看下项目中绘制的一些东西，再来看下项目的最终实现效果吧！

视频

动画的使用

通过上面的 GIF 图可以看到项目中使用到了一些动画，效果还是非常不错的，其实实现起来非常简单！

可见性动画

首先来看下可见性动画的使用，之前我写过一个专栏，里面专门说了下 Compose 中的动画的使用及原理，有兴趣的大家可以去看下：Compose 动画开发艺术探索。

可见性动画在页面左边用到了，点击添加按钮出现搜索页面的时候就使用的是可见性动画，简单看下代码：

@Composable
fun LeftInformation() {var showSearch by rememberSaveable { mutableStateOf(false) }Box(Modifier.fillMaxHeight().width(300.dp).padding(end = 10.dp)) {WeatherDetails(onAddClick = {showSearch = true})AnimatedVisibility(visible = showSearch,enter = slideInHorizontally(),exit = slideOutHorizontally()) {SearchCity()}}
}

可以看到这块在进入的时候使用了 slideInHorizontally 动画，顾名思义，就是水平滑动展开，退出的时候使用了 slideOutHorizontally ，就是水平滑动退出。

实现效果这里就不展示了，就是文章左边的动画效果。

无限重复动画

无限重复动画在左边展示天气信息的天气图标上用到了，这块的重复动画使用了两种，如果是晴天的话就修改 Modifier.rotate ，因为晴天是太阳，旋转的话好看一些，如果不是晴天的话旋转不好看，所以改为 Modifier.offset ，这样平移的话好看一些。来看下实现代码吧：

@Composable
private fun RotateWeatherIcon(icon: String) {val infiniteTransition = rememberInfiniteTransition()val modifier = if (icon == "100") {val rotate by infiniteTransition.animateFloat(initialValue = 0f,targetValue = 360f,animationSpec = infiniteRepeatable(animation = tween(3500, easing = LinearOutSlowInEasing),repeatMode = RepeatMode.Reverse))Modifier.rotate(rotate)} else {val offsetX by infiniteTransition.animateValue(initialValue = (-30).dp, // 初始值targetValue = 30.dp, // 目标值typeConverter = TwoWayConverter({ AnimationVector1D(it.value) },{ it.value.dp }), // 类型转换animationSpec = infiniteRepeatable(  // 动画规格!!!animation = tween(3500, easing = LinearOutSlowInEasing),repeatMode = RepeatMode.Reverse))Modifier.offset(x = offsetX)}Image(painter = painterResource(getWeatherIcon(icon)),"",modifier = modifier.size(170.dp).padding(10.dp))
}

无限重复动画的使用方式也不难，在之前的章节中说过，感兴趣的可以去上面所说的专栏中查看，大家放心，Jetpack Compose 中动画的使用方式和 Compose Desktop 一致。

空气质量

空气质量就是右边天气详情中的第一个模块，样子如下图所示：

这块是一个 “自定义 View”，为什么要加引号呢？因为这是 Compose 啊，不是安卓的 View 系统

Compose Desktop 初体验之绘制相关推荐

Compose Desktop 初体验之打包
从 0 到 1 搞一个 Compose Desktop 版本的玩天气之打包大家好,前两篇文章大概介绍了下上手 Compose Desktop 和自定义绘制时遇到的一些问题,项目的最终实现效果如下: ...
Compose Desktop 初体验之踩坑
从 0 到 1 搞一个 Compose Desktop 版本的玩天气之踩坑大家好,好久不见,接下来一段时间我会系统性地写一套关于 Compose Desktop 的文章,带大家从头到尾写一个桌面版的 ...
docker for windows--Windows 10 家庭中文版 21H2 安装Docker Desktop初体验
本人使用的笔记本电脑操作系统版本:Windows 10 家庭中文版 21H2,想在上面安装docker运行环境但看了网上一些docker for windonws的安装教程,觉得和官网讲的有出入, ...
【云原生】Docker 进阶 -- 阿里云服务器安装Docker Compose与初体验
Jetpack Compose 初体验（上），flutter人脸识别系统
fun VerticalText() { Column( modifier = Modifier.padding(16.dp) ) { Text("Hello World!") T ...
香蕉派（or 皮？）上手初体验 -- 外观鉴赏，安装，配置amp;总结
一.前言及简单介绍听到"派"或者是看到这幅图片.难免让你想到眼下大名鼎鼎的"树莓派". 而香蕉派(Banana Pi. 论坛上也有人称它香蕉皮)是一款国产的比 ...
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
深度探索Hyperledger技术与应用之超级账本初体验（附部署代码）
2019独角兽企业重金招聘Python工程师标准>>> 本章零基础地介绍了如何快速体验超级账本搭建的区块链网络,我们先绕过了比较复杂的初始化配置,用官方提供的fabric-sampl ...
jsoncpp之初体验
参考文章 http://blog.csdn.net/JoeBlackzqq/article/details/9043315 , 我将里面的代码做在了一个工程亲自体验了下. 1. 下载jsoncpp源码 ...

Compose Desktop 初体验之绘制