Beginner Of Jetpack Compose Animation

potatotips 75 発表資料

Transcript

1. Jetpack Composeで 始めるAnimation @h5mtakada
2. 自己紹介 高田　真壽(マサ) (株)ZOZOテクノロジーズ所属 野球と旅行が趣味です
3. • Android Developer GuideのCompose Pathwayで学ぶ機会があった • Compose By Exampleのチュートリアルで”Make the easy things easy and the hard things possible”というのが掲げられており、Animation は”hard things possible”にあたるとされていた。 Jetpack Compose Animationに興味を持ったキッカケ
4. Jetpack Compose Animationとは？ • JetpackComposeに含まれているコンポーネントの一つ • 宣言的なコーディングスタイルである • Compose Ver1.1.0時点での情報 • StartStateとEndStateに基づいたＵＩの更新 • 継続的なStateの記録 • 特に設定がなければAnimationに必要な中間の情報を Composeが自動で補完する
5. 単一Stateに基づいたPropertyの設定 var changed by remember { mutableStateOf(true) } val color by animateColorAsState( if (changed) Blue else Yellow, animationSpec = tween(durationMillis = 2000) ) Column { Button( onClick = { changed = !changed } ) { Text(text = "Click To Change Color") } Spacer(modifier = Modifier.height(30.dp)) customBox(color = color) }
6. Animationというより値で の切り替え？ 単一Stateに基づいたPropertyの設定
7. 単一Stateに基づいたPropertyの設定
8. 単一Stateに基づいたPropertyの設定
9. 他にも animateColorAsState animateDpAsState animateFloatAsState など... 単一Stateに基づいたAnimation
10. 他にも animateColorAsState animateDpAsState animateFloatAsState など... 単一Stateに基づいたAnimation
11. 複数のStateに対してのAnimationを行いたい場合は？ 例：色とサイズを同時に変更したい！ Update Transition
12. var boxState by remember { mutableStateOf(BoxState.SmallState) } val transition = updateTransition(targetState = boxState, label = "") val color by transition.animateColor(label = "color") { state -> when (state) { BoxState. SmallState -> Blue BoxState.LargeState -> Green } } val size by transition.animateDp(label = "size") { state -> when (state) { BoxState. SmallState -> 64.dp BoxState.LargeState -> 128.dp } } Column { Button( onClick = { boxState = when (boxState) { BoxState. SmallState -> BoxState.LargeState BoxState.LargeState -> BoxState.SmallState } }, 複数Stateに基づいたAnimation
13. var boxState by remember { mutableStateOf(BoxState.SmallState) } val transition = updateTransition(targetState = boxState, label = "") val color by transition.animateColor(label = "color") { state -> when (state) { BoxState. SmallState -> Blue BoxState.LargeState -> Green } } val size by transition.animateDp(label = "size") { state -> when (state) { BoxState. SmallState -> 64.dp BoxState.LargeState -> 128.dp } } Column { Button( onClick = { boxState = when (boxState) { BoxState. SmallState -> BoxState.LargeState BoxState.LargeState -> BoxState.SmallState } }, 複数Stateに基づいたAnimation
14. Composable Animationのチャート https://developer.android.com/jetpack/compose/animationより引用
15. Animationに対して更に細かい部分でのカスタマイズをしたい？ 例：Animationの長さや変化率を設定したい Transition Builders
16. var vehicleState by remember { mutableStateOf(VechiclePosition.Start) } val offsetAnimation: Dp by animateDpAsState( if (vehicleState == VechiclePosition.Start) 5.dp else 300.dp, tween(durationMillis = 5000, easing = CubicBezierEasing(0.15f , 0.99f, 0.68f, 0.01f)) ) Image( painter = painterResource(R.drawable.vehicle), contentDescription = null, modifier = Modifier .height(90.dp) .absoluteOffset(x = offsetAnimation) ) FastOutSlowInEasing (デフォルト) LinearEasing FastOutLinearInEasing LinearOutSlowInEasing ベジェ曲線の図式化 Transition Builders:tween関数
17. Transition Builders:tween関数
18. var vehicleState by remember { mutableStateOf(VechiclePosition.Start) } val offsetAnimation: Dp by animateDpAsState( if (vehicleState == VechiclePosition.Start) 5.dp else 250.dp, spring(dampingRatio = Spring.DampingRatioHighBouncy, stiffness = Spring.StiffnessLow) ) Image( painter = painterResource(R.drawable.vehicle), contentDescription = null, modifier = Modifier .height(90.dp) .absoluteOffset(x = offsetAnimation) ) Transition Builders:spring関数
19. var vehicleState by remember { mutableStateOf(VechiclePosition.Start) } val offsetAnimation: Dp by animateDpAsState( if (vehicleState == VechiclePosition.Start) 5.dp else 250.dp, spring(dampingRatio = Spring.DampingRatioHighBouncy, stiffness = Spring.StiffnessLow) ) Image( painter = painterResource(R.drawable.vehicle), contentDescription = null, modifier = Modifier .height(90.dp) .absoluteOffset(x = offsetAnimation) ) Transition Builders:spring関数
20. Transition Builders:spring関数 https://developer.android.com/jetpack/compose/animationより引用
21. 他のComposable Animation関数 Animated Visibility fadeIn slideIn expandHorizontally Animated Content
22. Animation Preview Animationの途中経過の変化を詳しく見たい
23. Animation Preview
24. Animation Preview
26. カスタムAnimationの実装例
27. まとめ • 直観的 ◦ ComposeAnimationを使用することで、より直感的に記述して求めている Animationを実装できる • 拡張性 ◦ ComposeAnimationは以下の要素を駆使し、自分の理想のアニメーションに近づくように細かく設定ができる ▪ StartとEndのState ▪ 変化させたいアニメーションのタイプ ▪ TransitionBuildersでDurationや回数などの細かい設定 ▪ Easing関数(ベジェ曲線)を使用して、変化率のより細かいカスタマイズ • 柔軟性 ◦ ComposeAnimationどうしの組み合わせも可能 ◦ Animationの途中変化の値も確認可能
28. Thank You For Listening