Day 19 Compose UI Animation I (Rotation)

Teng Wang

Sep 24, 2021

2021 鐵人賽一天一腳步，30天學會 Android Compose UI！

今年的疫情蠻嚴重的，希望大家都過得安好，希望疫情快點過去，能回到一些線下技術聚會的時光～

今天目標：了解 Compose UI 上的 animation rotation 可以怎麼實作。

今天稍微翻了一下 animation 的相關技術文章，發現動畫其實可以做得非常的細緻，考慮到我的目標是讓新手都能直接開始寫 Compose UI，所以我會以最簡單的幾種動畫來分享，難的交給其他更資深的開發者分享囉～

參考資料也都會放在最下面，供大家點進去看看。

下面是今天分享的程式碼，運行後可以看到一個自我旋轉的紛紅色方形。

@Composable
    fun RotatingSquareComponent() {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
            content = {
                val infiniteTransition = rememberInfiniteTransition()
// InfiniteTransition 是針對animation 記憶的變數，
// 使用rememberInfiniteTransition() 即可宣告val rotation by infiniteTransition.animateFloat(
  initialValue = 0f, // 初始數值
  targetValue = 360f, // 動畫最後數值
 (因為360度 相當於0度)
  animationSpec = infiniteRepeatable(
  animation = tween( // 兩個動畫間隔間的函式
                 durationMillis = 3000,  // 變化時間 
               easing = FastOutLinearInEasing, // 變化的方式
                        ),
                    )
                )
// rotaion 這個變數在這裡是用來宣告這個動畫的 變化方式      Canvas(modifier = Modifier.size(200.dp)) { 
          rotate(rotation) { // rotate 描述
                drawRect(color = Color(255, 138, 128)) // 粉紅色方框
                    }
                }
// 宣告畫布，跟粉紅色方框，然後加上rotate 的描述即可囉！
            })
    }

rotation的使用方式就這樣，最後出個題目，如果程式改寫成這樣的話，會顯示什麼樣子呢？

搞懂了就就明天見囉！

參考資料：

本文同步發表在 iT邦幫忙上文章連結

Day 19 Compose UI Animation I (Rotation)

Written by Teng Wang