利用Jetpack Compose繪制可愛的天氣動畫
1. 項目背景
最近參加瞭Compose挑戰賽的終極挑戰，使用Compose完成瞭一個天氣app。之前幾輪挑戰也都有參與，每次都學到不少新東西。如今迎來最終挑戰，希望能將這段時間的積累活學活用，做出更加成熟的作品。
項目挑戰
因為沒有美工協助，所以我考慮通過代碼實現app中的所有UI元素例如各種icon等，這樣的UI在任何分辨率下都不會失真，跟重要的是可以靈活地實現各種動畫效果。
為瞭降低實現成本，我將app中的UI元素定義成偏卡通的風格，可以更容易地通過代繪實現：
上面的動畫沒有使用gif、lottie或者其他靜態資源，所有圖形都是基於Compose代碼繪制的。
2. MyApp：CuteWeather
App界面比較簡潔，采用單頁面呈現（挑戰賽要求），卡通風格的天氣動畫算是相對於同類app的特色：
項目地址:https://github.com/vitaviva/compose-weather
App界面構成
App縱向劃分為幾個功能區域，每個區域都涉及到一些不同的Compose API的使用
涉及技術點較多，本文主要介紹如何使用Compose繪制自定義圖形、並基於這些圖形實現動畫，其他內容有機會再單獨介紹。
3. Compose自定義繪制
像常規的Android開發一樣，除瞭提供各種默認的Composable控件以外，Compose也提供瞭Canvas用來繪制自定義UI。
其實Canvas相關API在各個平臺都大同小異，但在Compose上的使用有以下特點：
- 用聲明式的方式創建和使用Canvas
- 通過DrawScope提供必要的state及各種APIs
- API更簡單易用
聲明式地創建和使用Canvas
Compose中，Canvas作為Composable，可以聲明式地添加到其他Composable中，並通過Modifier進行配置
Canvas(modifier = Modifier.fillMaxSize()){ // this: DrawScope
//內部進行自定義繪制
}
傳統方式需要獲取Canvas句柄命令式的進行繪制，而Canvas{...}通過狀態驅動的方式在block內執行繪制邏輯、刷新UI。
強大的DrawScope
Canvas{...}內部通過DrawScope提供必要的state用來獲取當前繪制所需環境變量，例如我們最常用的size。DrawScope還提瞭各種常用的繪制API，例如drawLine等
Canvas(modifier = Modifier.fillMaxSize()){
//通過size獲取當前canvas的width和height
val canvasWidth = size.width
val canvasHeight = size.height
//繪制直線
drawLine(
start = Offset(x=canvasWidth, y = 0f),
end = Offset(x = 0f, y = canvasHeight),
color = Color.Blue,
strokeWidth = 5F //設置直線寬度
)
}
上面代碼繪制效果如下：
4.簡單易用的API
傳統的Canvas API需要進行Paint等配置；DrawScope提供的API更簡單，使用更友好。
例如繪制一個圓，傳統的API是這樣：
public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint) {
//...
}
DrawScope提供的API：
fun drawCircle(
color: Color,
radius: Float = size.minDimension / 2.0f,
center: Offset = this.center,
alpha: Float = 1.0f,
style: DrawStyle = Fill,
colorFilter: ColorFilter? = null,
blendMode: BlendMode = DefaultBlendMode
) {...}
看起來參數變多瞭，但是其實已經通過size等設置瞭合適的默認值，同時省去瞭對Paint的創建和配置，使用起來更方便。
使用原生Canvas
目前DrawScope提供的API還不及原生Canvas豐富（比如不支持drawText等），當不滿足使用需求時，也可以直接使用原生Canvas對象進行繪制
drawIntoCanvas { canvas ->
//nativeCanvas是原生canvas對象，android平臺即android.graphics.Canvas
val nativeCanvas = canvas.nativeCanvas
}
上面介紹瞭Compose Canvas的基本知識，下面結合app中的具體示例看一下實際使用效果
首先，看一下雨水的繪制過程。
5. 雨天效果
雨天天氣的關鍵是如何繪制不斷下落的雨水
雨滴的繪制
我們先繪制構成雨水的基本單元：雨滴
經拆解後，雨水效果可由三組雨滴構成，每一組雨滴分成上下兩端，這樣在運動時就可以形成接連不斷的雨水效果。我們使用drawLine繪制每一段黑線，設置適當的stokeWidth，並通過cap設置端點的圓形效果：
@Composable
fun rainDrop() {
Canvas(modifier) {
val x: Float = size.width / 2 //x坐標：1/2的位置
drawLine(
Color.Black,
Offset(x, line1y1), //line1 的起點
Offset(x, line1y2), //line1 的終點
strokeWidth = width, //設置寬度
cap = StrokeCap.Round//頭部圓形
)
// line2同上
drawLine(
Color.Black,
Offset(x, line2y1),
Offset(x, line2y2),
strokeWidth = width,
cap = StrokeCap.Round
)
}
}
雨滴下落動畫
完成基本圖形的繪制後，接下來為兩線段實現循環往復的位移動畫，形成雨水的流動效果。
以兩線段中間空隙為動畫的錨點，根據animationState設置其y軸位置，讓其從繪制區域的頂端移動到低端（0 ~ size.hight），然後restart這個動畫。
以錨點為基準繪制上下兩線段，就可以行成接連不斷的雨滴效果瞭
代碼如下：
@Composable
fun rainDrop() {
//循環播放的動畫 （ 0f ~ 1f)
val animateTween by rememberInfiniteTransition().animateFloat(
initialValue = 0f,
targetValue = 1f,
animationSpec = infiniteRepeatable(
tween(durationMillis, easing = LinearEasing),
RepeatMode.Restart //start動畫
)
)
Canvas(modifier) {
// scope ： 繪制區域
val width = size.width
val x: Float = size.width / 2
// width/2是strokCap的寬度，scopeHeight處預留strokCap寬度，讓雨滴移出時保持正圓，提高視覺效果
val scopeHeight = size.height - width / 2
// space ： 兩線段的間隙
val space = size.height / 2.2f + width / 2 //間隙size
val spacePos = scopeHeight * animateTween //錨點位置隨animationState變化
val sy1 = spacePos - space / 2
val sy2 = spacePos + space / 2
// line length
val lineHeight = scopeHeight - space
// line1
val line1y1 = max(0f, sy1 - lineHeight)
val line1y2 = max(line1y1, sy1)
// line2
val line2y1 = min(sy2, scopeHeight)
val line2y2 = min(line2y1 + lineHeight, scopeHeight)
// draw
drawLine(
Color.Black,
Offset(x, line1y1),
Offset(x, line1y2),
strokeWidth = width,
colorFilter = ColorFilter.tint(
Color.Black
),
cap = StrokeCap.Round
)
drawLine(
Color.Black,
Offset(x, line2y1),
Offset(x, line2y2),
strokeWidth = width,
colorFilter = ColorFilter.tint(
Color.Black
),
cap = StrokeCap.Round
)
}
}
6.Compose自定義佈局
上面完成瞭單個雨滴的圖形和動畫，接下來我們使用三個雨滴組成雨水的效果。
首先可以使用Row+Space的方式進行組裝，但是這種方式缺少靈活性，僅通過Modifier很難準確佈局三個雨滴的相對位置。因此考慮轉而使用Compose的自定義佈局，以提高靈活性和準確性：
Layout(
modifier = modifier.rotate(30f), //雨滴旋轉角度
content = { // 定義子Composable
Raindrop(modifier.fillMaxSize())
Raindrop(modifier.fillMaxSize())
Raindrop(modifier.fillMaxSize())
}
) { measurables, constraints ->
// List of measured children
val placeables = measurables.mapIndexed { index, measurable ->
// Measure each children
val height = when (index) { //讓三個雨滴的height不同，增加錯落感
0 -> constraints.maxHeight * 0.8f
1 -> constraints.maxHeight * 0.9f
2 -> constraints.maxHeight * 0.6f
else -> 0f
}
measurable.measure(
constraints.copy(
minWidth = 0,
minHeight = 0,
maxWidth = constraints.maxWidth / 10, // raindrop width
maxHeight = height.toInt(),
)
)
}
// Set the size of the layout as big as it can
layout(constraints.maxWidth, constraints.maxHeight) {
var xPosition = constraints.maxWidth / ((placeables.size + 1) * 2)
// Place children in the parent layout
placeables.forEachIndexed { index, placeable ->
// Position item on the screen
placeable.place(x = xPosition, y = 0)
// Record the y co-ord placed up to
xPosition += (constraints.maxWidth / ((placeables.size + 1) * 0.8f)).roundToInt()
}
}
}
Compose中，可以通過Layout{...}對Composable進行自定義佈局，content{...}中定義參與佈局的子Composable。
跟傳統Android視圖一樣，自定義佈局需要先後經歷measure、layout兩步。
measrue：measurables返回所有待測量的子Composable，constraints類似於MeasureSpec，封裝父容器對子元素的佈局約束。measurable.measure()中對子元素進行測量
layout：placeables返回測量後的子元素，依次調用placeable.place()對雨滴進行佈局，通過xPosition預留雨滴在x軸的間隔
經過layout之後，通過 modifier.rotate(30f) 對Composable進行旋轉，完成最終效果：
7.. 雪天效果
雪天效果的關鍵在於雪花的飄落。
雪花的繪制
雪花的繪制非常簡單，用一個圓圈代表一個雪花
Canvas(modifier) {
val radius = size / 2
drawCircle( //白色填充
color = Color.White,
radius = radius,
style = FILL
)
drawCircle(// 黑色邊框
color = Color.Black,
radius = radius,
style = Stroke(width = radius * 0.5f)
)
}
雪花飄落動畫
雪花飄落的過程相對於雨滴墜落要復雜一些，由三個動畫組成:
- 下降：通過改變y軸位置實現 (0f ~ 2.5f)
- 左右飄移：通過該表x軸的offset實現 （-1f ~ 1f）
- 逐漸消失：通過改變alpha實現（1f ~ 0f）
借助InfiniteTransition同步控制多個動畫，代碼如下：
@Composable
private fun Snowdrop(
modifier: Modifier = Modifier,
durationMillis: Int = 1000 // 雪花飄落動畫的druation
) {
//循環播放的Transition
val transition = rememberInfiniteTransition()
//1\. 下降動畫：restart動畫
val animateY by transition.animateFloat(
initialValue = 0f,
targetValue = 2.5f,
animationSpec = infiniteRepeatable(
tween(durationMillis, easing = LinearEasing),
RepeatMode.Restart
)
)
//2\. 左右飄移：reverse動畫
val animateX by transition.animateFloat(
initialValue = -1f,
targetValue = 1f,
animationSpec = infiniteRepeatable(
tween(durationMillis / 3, easing = LinearEasing),
RepeatMode.Reverse
)
)
//3\. alpha值：restart動畫，以0f結束
val animateAlpha by transition.animateFloat(
initialValue = 1f,
targetValue = 0f,
animationSpec = infiniteRepeatable(
tween(durationMillis, easing = FastOutSlowInEasing),
)
)
Canvas(modifier) {
val radius = size.width / 2
// 圓心位置隨AnimationState改變，實現雪花飄落的效果
val _center = center.copy(
x = center.x + center.x * animateX,
y = center.y + center.y * animateY
)
drawCircle(
color = Color.White.copy(alpha = animateAlpha),//alpha值的變化實現雪花消失效果
center = _center,
radius = radius,
)
drawCircle(
color = Color.Black.copy(alpha = animateAlpha),
center = _center,
radius = radius,
style = Stroke(width = radius * 0.5f)
)
}
}
animateY的targetValue設為2.5f，讓雪花的運動軌跡更長，看起來更加真實
雪花的自定義佈局
像雨滴一樣，對雪花也使用Layout自定義佈局
@Composable
fun Snow(
modifier: Modifier = Modifier,
animate: Boolean = false,
) {
Layout(
modifier = modifier,
content = {
//擺放三個雪花，分別設置不同duration，增加隨機性
Snowdrop( modifier.fillMaxSize(), 2200)
Snowdrop( modifier.fillMaxSize(), 1600)
Snowdrop( modifier.fillMaxSize(), 1800)
}
) { measurables, constraints ->
val placeables = measurables.mapIndexed { index, measurable ->
val height = when (index) {
// 雪花的height不同，也是為瞭增加隨機性
0 -> constraints.maxHeight * 0.6f
1 -> constraints.maxHeight * 1.0f
2 -> constraints.maxHeight * 0.7f
else -> 0f
}
measurable.measure(
constraints.copy(
minWidth = 0,
minHeight = 0,
maxWidth = constraints.maxWidth / 5, // snowdrop width
maxHeight = height.roundToInt(),
)
)
}
layout(constraints.maxWidth, constraints.maxHeight) {
var xPosition = constraints.maxWidth / ((placeables.size + 1))
placeables.forEachIndexed { index, placeable ->
placeable.place(x = xPosition, y = -(constraints.maxHeight * 0.2).roundToInt())
xPosition += (constraints.maxWidth / ((placeables.size + 1) * 0.9f)).roundToInt()
}
}
}
}
最終效果如下：
8. 晴天效果
通過一個旋轉的太陽代表晴天效果
太陽的繪制
太陽的圖形由中間的圓形和圍繞圓環的等分豎線組成。
@Composable
fun Sun(modifier: Modifier = Modifier) {
Canvas(modifier) {
val radius = size.width / 6
val stroke = size.width / 20
// draw circle
drawCircle(
color = Color.Black,
radius = radius + stroke / 2,
style = Stroke(width = stroke),
)
drawCircle(
color = Color.White,
radius = radius,
style = Fill,
)
// draw line
val lineLength = radius * 0.2f
val lineOffset = radius * 1.8f
(0..7).forEach { i ->
val radians = Math.toRadians(i * 45.0)
val offsetX = lineOffset * cos(radians).toFloat()
val offsetY = lineOffset * sin(radians).toFloat()
val x1 = size.width / 2 + offsetX
val x2 = x1 + lineLength * cos(radians).toFloat()
val y1 = size.height / 2 + offsetY
val y2 = y1 + lineLength * sin(radians).toFloat()
drawLine(
color = Color.Black,
start = Offset(x1, y1),
end = Offset(x2, y2),
strokeWidth = stroke,
cap = StrokeCap.Round
)
}
}
}
均分360度，每間隔45度畫一條豎線，cos計算x軸坐標，sin計算y軸坐標。
太陽的旋轉
太陽的旋轉動畫很簡單，通過Modifier.rotate不斷轉動Canvas即可。
@Composable
fun Sun(modifier: Modifier = Modifier) {
//循環動畫
val animateTween by rememberInfiniteTransition().animateFloat(
initialValue = 0f,
targetValue = 360f,
animationSpec = infiniteRepeatable(tween(5000), RepeatMode.Restart)
)
Canvas(modifier.rotate(animateTween)) {// 旋轉動畫
val radius = size.width / 6
val stroke = size.width / 20
val centerOffset = Offset(size.width / 30, size.width / 30) //圓心偏移量
// draw circle
drawCircle(
color = Color.Black,
radius = radius + stroke / 2,
style = Stroke(width = stroke),
center = center + centerOffset //圓心偏移
)
//...略
}
}
此外，DrawScope也提供瞭rotate的API，也可以實現旋轉效果。
最後我們給太陽的圓心增加一個偏移量，讓轉動更加活潑：
9. 動畫的組合、切換
上面分別實現瞭Rain、Snow、Sun等圖形，接下來使用這些元素組合成各種天氣效果。
將圖形組合成天氣
Compose的聲明式語法非常有利於UI的組合：
比如，多雲轉陣雨，我們擺放Sun、Cloud、Rain等元素後，通過Modifier調整各自位置即可：
@Composable
fun CloudyRain(modifier: Modifier) {
Box(modifier.size(200.dp)){
Sun(Modifier.size(120.dp).offset(140.dp, 40.dp))
Rain(Modifier.size(80.dp).offset(80.dp, 60.dp))
Cloud(Modifier.align(Aligment.Center))
}
}
讓動畫切換更加自然
當在多個天氣動畫之間進行切換時，我們希望能實現更自然的過渡。實現思路是將組成天氣動畫的各元素的Modifier信息變量化，然後通過Animation進行改變state 假設所有的天氣都可以由Cloud、Sun、Rain組合而成，無非就是offset、size、alpha值的不同：
ComposeInfo
data class IconInfo(
val size: Float = 1f,
val offset: Offset = Offset(0f, 0f),
val alpha: Float = 1f,
)
//天氣組合信息，即Sun、Cloud、Rain的位置信息
data class ComposeInfo(
val sun: IconInfo,
val cloud: IconInfo,
val rains: IconInfo,
) {
operator fun times(float: Float): ComposeInfo =
copy(
sun = sun * float,
cloud = cloud * float,
rains = rains * float
)
operator fun minus(composeInfo: ComposeInfo): ComposeInfo =
copy(
sun = sun - composeInfo.sun,
cloud = cloud - composeInfo.cloud,
rains = rains - composeInfo.rains,
)
operator fun plus(composeInfo: ComposeInfo): ComposeInfo =
copy(
sun = sun + composeInfo.sun,
cloud = cloud + composeInfo.cloud,
rains = rains + composeInfo.rains,
)
}
如上，ComposeInfo中持有各種元素的位置信息，運算符重載使其可以在Animation中計算當前最新值。
接下來，使用ComposeInfo為不同天氣定義各元素的位置信息
//晴天
val SunnyComposeInfo = ComposeInfo(
sun = IconInfo(1f),
cloud = IconInfo(0.8f, Offset(-0.1f, 0.1f), 0f),
rains = IconInfo(0.4f, Offset(0.225f, 0.3f), 0f),
)
//多雲
val CloudyComposeInfo = ComposeInfo(
sun = IconInfo(0.1f, Offset(0.75f, 0.2f), alpha = 0f),
cloud = IconInfo(0.8f, Offset(0.1f, 0.1f)),
rains = IconInfo(0.4f, Offset(0.225f, 0.3f), alpha = 0f),
)
//雨天
val RainComposeInfo = ComposeInfo(
sun = IconInfo(0.1f, Offset(0.75f, 0.2f), alpha = 0f),
cloud = IconInfo(0.8f, Offset(0.1f, 0.1f)),
rains = IconInfo(0.4f, Offset(0.225f, 0.3f), alpha = 1f),
)
ComposedIcon
接著，定義ComposedIcon，根據ComposeInfo實現不同的天氣組合
@Composable
fun ComposedIcon(modifier: Modifier = Modifier, composeInfo: ComposeInfo) {
//各元素的ComposeInfo
val (sun, cloud, rains) = composeInfo
Box(modifier) {
//應用ComposeInfo到Modifier
val _modifier = remember(Unit) {
{ icon: IconInfo ->
Modifier
.offset( icon.size * icon.offset.x, icon.size * icon.offset.y )
.size(icon.size)
.alpha(icon.alpha)
}
}
Sun(_modifier(sun))
Rains(_modifier(rains))
AnimatableCloud(_modifier(cloud))
}
}
ComposedWeather
最後，定義ComposedWeather記錄當前ComposedIcon，並在其發生更新時使用動畫進行過度：
@Composable
fun ComposedWeather(modifier: Modifier, composedIcon: ComposedIcon) {
val (cur, setCur) = remember { mutableStateOf(composedIcon) }
var trigger by remember { mutableStateOf(0f) }
DisposableEffect(composedIcon) {
trigger = 1f
onDispose { }
}
//創建動畫（0f ~ 1f)，用於更新ComposeInfo
val animateFloat by animateFloatAsState(
targetValue = trigger,
animationSpec = tween(1000)
) {
//當動畫結束時，更新ComposeWeather到最新state
setCur(composedIcon)
trigger = 0f
}
//根據AnimationState計算當前ComposeInfo
val composeInfo = remember(animateFloat) {
cur.composedIcon + (weatherIcon.composedIcon - cur.composedIcon) * animateFloat
}
以上就是利用Jetpack Compose繪制可愛的天氣動畫的詳細內容，更多關於Jetpack Compose繪制動畫的資料請關註WalkonNet其它相關文章！
推薦閱讀：
- Android Jetpack結構運用Compose實現微博長按點贊彩虹效果
- Dialog 按照順序彈窗的優雅寫法
- Jetpack Compose實現動畫效果的方法詳解
- Jetpack Compose實現列表和動畫效果詳解
- Android Jetpack Compose實現列表吸頂效果