Tap it! Shake it! Fling it! Sheep it! The Gesture Animations Dance!

Compose Multiplatform에서 제스처와 센서를 활용하여 애니메이션을 구현해보자

Transcript

1. Tap it! Shake it! Fling it! Sheep it! The Gesture Animations Dance! @KwakEuiJin KotlinConf’24 Korea
2. • 안드로이드 3년차 개발자 • SOPT IT 벤처창업 동아리 Android 파트장 곽의진(KEZ) github.com/KwakEuiJin
3. 오늘의 발표는?
4. 오늘의 발표는?
5. 오늘의 발표는? Compose Multiplatform Animation With Gesture And Sensor
6. Jetpack Compose 란?
7. Jetpack Compose 란? 제 생일도 7월 28일 !!
8. 간단하게 Compose Mulitplatform에 대해 알아보자!
9. 우리는 오늘 무엇을 중점적으로 알아볼 것인가? Gestures Sensors Animations Data
10. 애니메이션을 어떻게 만들 것 인가?
11. 1. What: 무엇을 애니메이션화 할 것인가? 2. When: 언제 애니메이션을 발생시킬 것인가? 3. How: 어떻게 애니메이션을 구현할 것인가?
12. Scale Translation Rotation Alpha 1. What: 무엇을 애니메이션화 할 것인가?
13. 1. What: 무엇을 애니메이션화 할 것인가? 2. When: 언제 애니메이션을 발생시킬 것인가? 3. How: 어떻게 애니메이션을 구현할 것인가?
14. 2. When: 언제 애니메이션을 발생시킬 것인가? https://developer.android.com/develop/ui/compose/touch-input/pointer-input/drag-swipe-fling Drag Swife
15. 1. What: 무엇을 애니메이션화 할 것인가? 2. When: 언제 애니메이션을 발생시킬 것인가? 3. How: 어떻게 애니메이션을 구현할 것인가?
16. 3. How: 어떻게 애니메이션을 구현할 것인가? Animation Spec
17. Compose Animation APIs! 어떻게 애니메이션을 구현할 것인가?
18. 애니메이션을 어떻게 만들 것 인가? 1. What: 무엇을 애니메이션화 할 것인가? 2. When: 언제 애니메이션을 발생시킬 것인가? 3. How: 어떻게 애니메이션을 구현할 것인가? Animation을 만들기 위한 3원칙
19. Gestures!
20. Tab To Scale! Step #1 1. What? 크기 2. When? 컴포저블이 터치되었을 때 3. How? 크기 1.0 <-> 1.2 Screen_recording_20240625_191219.gif
21. Tab To Scale! // 1. What? val scale = 1f // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { // Important: set scale in graphicsLayer(!) scaleX = scale scaleY = scale } .clickable( onClick = { . . . }) . . . // 3. How? onClick = { val newScale = if (scale == 1f) 1.2f else 1f scale = newScale }
22. Tab To Scale! // 1. What? val scale = 1f // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { // Important: set scale in graphicsLayer(!) scaleX = scale scaleY = scale } .clickable( onClick = { . . . }) . . . // 3. How? onClick = { val newScale = if (scale == 1f) 1.2f else 1f scale = newScale }
23. Tab To Scale! // 1. What? val scale = 1f // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { // Important: set scale in graphicsLayer(!) scaleX = scale scaleY = scale } .clickable( onClick = { . . . }) . . . // 3. How? onClick = { val newScale = if (scale == 1f) 1.2f else 1f scale = newScale } graphicsLayer?
24. 잠깐!! graphicsLayer 만 짚고 넘어가보자 https://developer.android.com/develop/ui/compose/graphics/draw/modifiers#graphics-modifiers Composition Layout Drawing Drawing 명령어 변환
25. Tab To Scale! // 1. What? val scale = 1f // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { // Important: set scale in graphicsLayer(!) scaleX = scale scaleY = scale } .clickable( onClick = { . . . }) . . . // 3. How? onClick = { val newScale = if (scale == 1f) 1.2f else 1f scale = newScale }
26. Tab To Scale! // 1. What? val scale = 1f // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { // Important: set scale in graphicsLayer(!) scaleX = scale scaleY = scale } .clickable( onClick = { . . . }) . . . // 3. How? onClick = { val newScale = if (scale == 1f) 1.2f else 1f scale = newScale } No Animations!
27. Tab To Scale! // 1. What? val scale = 1f // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { // Important: set scale in graphicsLayer(!) scaleX = scale.value scaleY = scale.value } .clickable(onClick = { . . . }) // 3. How? onClick = { val newScale = if (scale == 1f) 1.2f else 1f scale = newScale }
28. Tab To Scale! // 1. What? val scale = remember { Animatable(1f) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { // Important: set scale in graphicsLayer(!) scaleX = scale.value scaleY = scale.value } .clickable(onClick = { . . . }) // 3. How? onClick = { val newScale = if (scale == 1f) 1.2f else 1f scale = newScale }
29. Tab To Scale! // 1. What? val scale = remember { Animatable(1f) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { // Important: set scale in graphicsLayer(!) scaleX = scale.value scaleY = scale.value } .clickable(onClick = { . . . }) // 3. How? onClick = { val newScale = if (scale == 1f) 1.2f else 1f scale = newScale }
30. Tab To Scale! // 1. What? val scale = remember { Animatable(1f) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { // Important: set scale in graphicsLayer(!) scaleX = scale.value scaleY = scale.value } .clickable(onClick = { . . . }) // 3. How? onClick = { coroutineScope.launch { val newScale = if (scale.value == 1f) 1.2f else 1f scale.animateTo(newScale) } }
31. Tab To Scale! // 1. What? val scale = remember { Animatable(1f) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { // Important: set scale in graphicsLayer(!) scaleX = scale.value scaleY = scale.value } .clickable(onClick = { . . . }) // 3. How? onClick = { coroutineScope.launch { val newScale = if (scale.value == 1f) 1.2f else 1f scale.animateTo(newScale) } }
32. Tab To Scale! // 3. How? onClick = { coroutineScope.launch { val newScale = if (scale.value == 1f) 1.2f else 1f scale.animateTo(newScale) } }
33. Tab To Scale! // 3. How? onClick = { coroutineScope.launch { val newScale = if (scale.value == 1f) 1.2f else 1f scale.animateTo( targetValue = newScale, animationSpec = // animation spec ) . . .
34. Animation Spec Spring ­ Stiff KeyFrame Spring ­ Nonstiff
35. Tab To Scale! // 3. How? onClick = { coroutineScope.launch { val newScale = if (scale.value == 1f) 1.2f else 1f scale.animateTo( targetValue = newScale, animationSpec = spring( dampingRatio = Spring.DampingRatioHighBouncy, stiffness = Spring.StiffnessHigh, ) ) . . .
36. Tab To Scale! // 3. How? onClick = { coroutineScope.launch { val newScale = if (scale.value == 1f) 1.2f else 1f scale.animateTo( targetValue = newScale, animationSpec = spring( dampingRatio = Spring.DampingRatioHighBouncy, stiffness = Spring.StiffnessHigh, ) ) . . .
37. Reposition (Drag) ! Step #1 1. What? • 위치(translation) 2. When? • 컴포저블을 드래그 했을 때 3. How? • 새로운 위치로 이동
38. Reposition (Drag) ! // 1. What? val translation = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { translationX = translation.value.x translationY = translation.value.y } .draggable2D(state = draggableState) ... ) // 3. How? val draggableState = rememberDraggable2DState { delta -> coroutineScope.launch { translation.snapTo(translation.value.plus(delta)) } }
39. Reposition (Drag) ! // 1. What? val translation = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { translationX = translation.value.x translationY = translation.value.y } .draggable2D(state = draggableState) ... ) // 3. How? val draggableState = rememberDraggable2DState { delta -> coroutineScope.launch { translation.snapTo(translation.value.plus(delta)) } }
40. Reposition (Drag) ! // 1. What? val translation = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { translationX = translation.value.x translationY = translation.value.y } .draggable2D(state = draggableState) ... ) // 3. How? val draggableState = rememberDraggable2DState { delta -> coroutineScope.launch { translation.snapTo(translation.value.plus(delta)) } }
41. Reposition (Drag) ! // 1. What? val translation = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { translationX = translation.value.x translationY = translation.value.y } .draggable2D(state = draggableState) ... ) // 3. How? val draggableState = rememberDraggable2DState { delta -> coroutineScope.launch { translation.snapTo(translation.value.plus(delta)) } }
42. Reposition (Drag) ! // 1. What? val translation = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { translationX = translation.value.x translationY = translation.value.y } .draggable2D(state = draggableState) ... ) // 3. How? val draggableState = rememberDraggable2DState { delta -> coroutineScope.launch { translation.snapTo(translation.value.plus(delta)) } }
43. Reposition (Drag) ! // 1. What? val translation = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { translationX = translation.value.x translationY = translation.value.y } .draggable2D(state = draggableState) ... ) // 3. How? val draggableState = rememberDraggable2DState { delta -> coroutineScope.launch { translation.snapTo(translation.value.plus(delta)) } }
44. Fling and Back Step #1 Screen_recording_20240625_210341-ezgif.com- video-to-gif-converter.gif 1. What? • 위치(translation) 2. When? • 컴포저블을 던지는 드래그 모션이 발생했을 때 3. How? • 컴포저블이 위치를 되돌리거나 멈추기
45. Fling and Back // 1. What? val translation = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { translationX = translation.value.x translationY = translation.value.y } .draggable2D(state = draggableState) ... ) // 3. How? val draggableState = rememberDraggable2DState { delta -> coroutineScope.launch { translation.snapTo(translation.value.plus(delta)) } }
46. Fling and Back // 2. When? ComposableKodee( modifier = Modifier .draggable2D( state = draggableState, onDragStopped = { velocity -> doFlingMove(velocity) } ) )
47. Fling and Back // 3. How? val decay = rememberSplineBasedDecay<Offset>() fun doFlingMove(velocity: Velocity) { // 1. Calculate target offset based on velocity val velocityOffset = Offset(velocity.x / 2f, velocity.y / 2f) val targetOffset = decay.calculateTargetValue( typeConverter = Offset.VectorConverter, initialValue = translation.value, initialVelocity = velocityOffset, ) // 2. If the target offset is within bounds, animate to it if (isTargetInBounds(targetOffset, screenSize)) { coroutineScope.launch { translation.animateDecay(velocityOffset, decay) } }
48. Fling and Back // 3. How? val decay = rememberSplineBasedDecay<Offset>() fun doFlingMove(velocity: Velocity) { // 1. Calculate target offset based on velocity val velocityOffset = Offset(velocity.x / 2f, velocity.y / 2f) val targetOffset = decay.calculateTargetValue( typeConverter = Offset.VectorConverter, initialValue = translation.value, initialVelocity = velocityOffset, ) // 2. If the target offset is within bounds, animate to it if (isTargetInBounds(targetOffset, screenSize)) { coroutineScope.launch { translation.animateDecay(velocityOffset, decay) } } Decay Animation Spec
49. Fling and Back // 3. How? val decay = rememberSplineBasedDecay<Offset>() fun doFlingMove(velocity: Velocity) { // 1. Calculate target offset based on velocity val velocityOffset = Offset(velocity.x / 2f, velocity.y / 2f) val targetOffset = decay.calculateTargetValue( typeConverter = Offset.VectorConverter, initialValue = translation.value, initialVelocity = velocityOffset, ) // 2. If the target offset is within bounds, animate to it if (isTargetInBounds(targetOffset, screenSize)) { coroutineScope.launch { translation.animateDecay(velocityOffset, decay) } } Decay Animation Spec DBMDVMBUF5BSHFU7BMVF ৈӝࢲ ݥ୹ԅ
50. Fling and Back // 3. How? // 2. If the target offset is within bounds, animate to it if (isTargetInBounds(targetOffset, screenSize)) { coroutineScope.launch { translation.animateDecay(velocityOffset, decay) } } else { coroutineScope.launch { val adjustedOffset = calculateBoundedOffset(targetOffset, screenSize) // Get farthest Offset translation.animateTo(adjustedOffset) // Animate to farthest point translation.animateTo(Offset(0f, 0f), ..) // Animate back to center } } }
51. Fling and Back // 3. How? // 2. If the target offset is within bounds, animate to it if (isTargetInBounds(targetOffset, screenSize)) { coroutineScope.launch { translation.animateDecay(velocityOffset, decay) } } else { coroutineScope.launch { val adjustedOffset = calculateBoundedOffset(targetOffset, screenSize) // Get farthest Offset translation.animateTo(adjustedOffset) // Animate to farthest point translation.animateTo(Offset(0f, 0f), ..) // Animate back to center } } }
52. Fling and Back // 3. How? // 2. If the target offset is within bounds, animate to it if (isTargetInBounds(targetOffset, screenSize)) { coroutineScope.launch { translation.animateDecay(velocityOffset, decay) } } else { coroutineScope.launch { val adjustedOffset = calculateBoundedOffset(targetOffset, screenSize) translation.animateTo(adjustedOffset) // Animate to farthest point translation.animateTo(Offset(0f, 0f), ..) // Animate back to center } } }
53. Fling and Back // 3. How? // 2. If the target offset is within bounds, animate to it if (isTargetInBounds(targetOffset, screenSize)) { coroutineScope.launch { translation.animateDecay(velocityOffset, decay) } } else { coroutineScope.launch { val adjustedOffset = calculateBoundedOffset(targetOffset, screenSize) translation.animateTo(adjustedOffset) // Animate to farthest point translation.animateTo(Offset(0f, 0f), ..) // Animate back to center } } }
54. Fling and Back // 3. How? // 2. If the target offset is within bounds, animate to it if (isTargetInBounds(targetOffset, screenSize)) { coroutineScope.launch { translation.animateDecay(velocityOffset, decay) } } else { // 3. If not, animate to farthest point within bounds and then animate back to center coroutineScope.launch { val adjustedOffset = calculateBoundedOffset(targetOffset, screenSize) translation.animateTo(adjustedOffset) // Animate to farthest point translation.animateTo(Offset(0f, 0f), ..) // Animate back to center } } }
55. Fling and Back // 3. How? val decay = rememberSplineBasedDecay<Offset>() fun doFlingMove(velocity: Velocity) { // 1. Calculate target offset based on velocity val velocityOffset = Offset(velocity.x / 2f, velocity.y / 2f) val targetOffset = decay.calculateTargetValue( typeConverter = Offset.VectorConverter, initialValue = translation.value, initialVelocity = velocityOffset, ) // 2. If the target offset is within bounds, animate to it if (isTargetInBounds(targetOffset, screenSize)) { coroutineScope.launch { translation.animateDecay(velocityOffset, decay) } } else { // 3. If not, animate to farthest point within bounds and then animate back to center coroutineScope.launch { val adjustedOffset = calculateBoundedOffset(targetOffset, screenSize) translation.animateTo(adjustedOffset) // Animate to farthest point translation.animateTo(Offset(0f, 0f), ..) // Animate back to center } } }
56. 우리는 오늘 무엇을 중점적으로 알아볼 것인가? Gestures Sensors Animations Data
57. Sensors!
58. 센서 활용하기 3. Sensor Event 처리하기 1.필요한 Sensor를 선택하기 2. Sensor Data 구독하기
59. 센서..??
60. 센서 Android Sensor Manager iOS Sensor Manager Multiplatform Sensor Manager
61. MultiPlatform Sensor Manager interface MultiplatformSensorManager { fun registerListener( sensorType: MultiplatformSensorType, onSensorChanged: (MultiplatformSensorEvent) -> Unit, ) fun unregisterAll() } @Composable expect fun rememberSensorManager(): MultiplatformSensorManager
62. MultiPlatform Sensor Manager // Android @Composable actual fun rememberSensorManager(): MultiplatformSensorManager { val context = LocalContext.current return remember(context) { AndroidSensorManager(context) } } // iOS @Composable actual fun rememberSensorManager(): MultiplatformSensorManager { return remember { iOSSensorManager() } } @Composable expect fun rememberSensorManager(): MultiplatformSensorManager
63. Multiplatform Sensor Manager // Android class AndroidSensorManager(private val context: Context) : MultiplatformSensorManager { private val sensorManager by lazy { context.getSystemService(Context.SENSOR_SERVICE) as SensorManager } override fun registerListener(. . .) { } override fun unregisterAll() { } }
64. Multiplatform Sensor Manager // Android class AndroidSensorManager(private val context: Context) : MultiplatformSensorManager { private val sensorManager by lazy { context.getSystemService(Context.SENSOR_SERVICE) as SensorManager } override fun registerListener(...) { sensorManager.getDefaultSensor(sensorType.toSensorType())?.let { sensor -> val sensorEventListener = object : SensorEventListener {...} sensorManager.registerListener(sensorEventListener, sensor) } } override fun unregisterAll() { listeners.forEach { (_, listener) -> sensorManager.unregisterListener(listener) } } }
65. Multiplatform Sensor Manager // Android class AndroidSensorManager(private val context: Context) : MultiplatformSensorManager { private val sensorManager by lazy { context.getSystemService(Context.SENSOR_SERVICE) as SensorManager } override fun registerListener(...) { sensorManager.getDefaultSensor(sensorType.toSensorType())?.let { sensor -> val sensorEventListener = object : SensorEventListener {...} sensorManager.registerListener(sensorEventListener, sensor) } } override fun unregisterAll() { listeners.forEach { (_, listener) -> sensorManager.unregisterListener(listener) } } }
66. Multiplatform Sensor Manager // iOS class iOSSensorManager : MultiplatformSensorManager { override fun registerListener(. . .) { } override fun unregisterAll() { }
67. Multiplatform Sensor Manager // iOS class iOSSensorManager : MultiplatformSensorManager { private val motionManager = CMMotionManager() private val activityManager = CMMotionActivityManager() private val pedometerManager = CMPedometer() override fun registerListener(. . .) { } override fun unregisterAll() { }
68. Multiplatform Sensor Manager // iOS class iOSSensorManager : MultiplatformSensorManager { private val motionManager = CMMotionManager() . . . override fun registerListener(. . .) { when (sensorType) { MultiplatformSensorType.ACCELEROMETER -> startAccelerometerUpdates(onSensorChanged) MultiplatformSensorType.STEP_COUNTER -> startPedometerUpdates(onSensorChanged) MultiplatformSensorType.STEP_DETECTOR -> startStepDetection(onSensorChanged) MultiplatformSensorType.LIGHT -> startLightUpdates(onSensorChanged) } } override fun unregisterAll() { }
69. Multiplatform Sensor Manager // iOS class iOSSensorManager : MultiplatformSensorManager { private val motionManager = CMMotionManager() . . . override fun registerListener(. . .) { when (sensorType) { MultiplatformSensorType.ACCELEROMETER -> startAccelerometerUpdates(onSensorChanged) . . . } } private fun startAccelerometerUpdates(onSensorChanged: (MultiplatformSensorEvent) -> Unit, ) { if (motionManager.isAccelerometerAvailable()) { motionManager.startAccelerometerUpdatesToQueue(. . .) { data, error -> . . . } } }
70. Multiplatform Sensor Manager class iOSSensorManager : MultiplatformSensorManager { private val motionManager = CMMotionManager() // For position related sensors private val activityManager = CMMotionActivityManager() // Detect activity (walking, driving, ...) private val pedometerManager = CMPedometer() // Step counter ... override fun registerListener(...) { when (sensorType) { MultiplatformSensorType.ACCELEROMETER -> startAccelerometerUpdates(onSensorChanged) ... } } override fun unregisterAll() { motionManager.stopDeviceMotionUpdates() motionManager.stopDeviceMotionUpdates() motionManager.stopGyroUpdates() motionManager.stopMagnetometerUpdates() motionManager.stopAccelerometerUpdates() pedometerManager.stopPedometerUpdates() pedometerManager.stopPedometerEventUpdates() activityManager.stopActivityUpdates() ... } }
71. Rotation Shift 1. What? 회전 시키기 2. When? 디바이스의 방향이 변경 될 경우 3. How? 회전 Sensor의 value 0. Sensor Data이해하기 Orientation
72. Orientation - Android - Roll • Y 축 회전 • -180°에서 180° - Azimuth • Z 축 회전 • 0°에서 360° - Pitch • X 축 회전 • -90°에서 90°
73. Orientation ­ iOS Yaw • Z축 회전 • -180º에서 180º Pitch • X축 회전 • -180º에서 180º Roll • Y축 회전 • -180º에서 180º
74. Orientation ­ Android && iOS - Yaw • Z축 회전 • -180º에서 180º - Pitch • X축 회전 • -180º에서 180º - Roll • Y축 회전 • -180º에서 180º - Azimuth • Z 축 회전 • 0°에서 360° - Pitch • X 축 회전 • -90°에서 90° - Roll • Y 축 회전 • -180°에서 180°
75. Orientation ­ Shared Code data class DeviceOrientation( val azimuth: Float, // Orientation[0] 0 to 360 val pitch: Float, // Orientation[1] -90 to 90 val roll: Float, // Orientation[2] -180 to 180 ) { val azimuthDegrees = azimuth.toDegrees() val pitchDegrees = pitch.toDegrees() val rollDegrees = roll.toDegrees() }
76. Orientation ­ Shared Code data class DeviceOrientation() // Main interface MultiplatformSensorManager { fun registerListener( sensorType: MultiplatformSensorType, onSensorChanged: (MultiplatformSensorEvent) -> Unit ) fun observeOrientationChanges( onOrientationChanged: (DeviceOrientation) -> Unit ) fun unregisterAll() }
77. Rotation Shift // 1. What? val rotationX = remember { Animatable(0f) } val rotationY = remember { Animatable(0f) } val rotationZ = remember { Animatable(0f) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { this.rotationX = rotationX.value this.rotationY = rotationY.value this.rotationZ = rotationZ.value } ... ) // 3. How?
78. Rotation Shift // 3. How? val sensorManager: MultiplatformSensorManager = rememberSensorManager() sensorManager.observeOrientationChanges { orientation -> coroutineScope.launch { rotationX.snapTo() } coroutineScope.launch { rotationY.snapTo() } coroutineScope.launch { rotationZ.snapTo() } }
79. Rotation Shift // 3. How? val sensorManager: MultiplatformSensorManager = rememberSensorManager() sensorManager.observeOrientationChanges { orientation -> coroutineScope.launch { rotationX.snapTo() } coroutineScope.launch { rotationY.snapTo() } coroutineScope.launch { rotationZ.snapTo() } }
80. Rotation Shift // 3. How? val sensorManager: MultiplatformSensorManager = rememberSensorManager() sensorManager.observeOrientationChanges { orientation -> coroutineScope.launch { rotationX.snapTo() } coroutineScope.launch { rotationY.snapTo() } coroutineScope.launch { rotationZ.snapTo() } }
81. Rotation Shift // 3. How? val sensorManager: MultiplatformSensorManager = rememberSensorManager() sensorManager.observeOrientationChanges { orientation -> coroutineScope.launch { rotationX.snapTo() } coroutineScope.launch { rotationY.snapTo() } coroutineScope.launch { rotationZ.snapTo() } }
82. Rotation Shift // 1. What? val rotationX = remember { Animatable(0f) } val rotationY = remember { Animatable(0f) } val rotationZ = remember { Animatable(0f) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { this.rotationX = rotationX.value this.rotationY = rotationY.value this.rotationZ = rotationZ.value } ... ) // 3. How? sensorManager.observeOrientationChanges { orientation -> coroutineScope.launch { rotation.snapTo(orientation.degrees) } ... }
83. Rotation Shift // 1. What? val rotationX = remember { Animatable(0f) } val rotationY = remember { Animatable(0f) } val rotationZ = remember { Animatable(0f) } // 2. When? ComposableKodee( modifier = Modifier .graphicsLayer { this.rotationX = rotationX.value this.rotationY = rotationY.value this.rotationZ = rotationZ.value } ... ) // 3. How? sensorManager.observeOrientationChanges { orientation -> coroutineScope.launch { rotation.snapTo(orientation.degrees) } ... }
84. 우리는 오늘 무엇을 중점적으로 알아볼 것인가? Gestures Sensors Animations Data
85. 더 많은 것을 배우고 싶다면? • Play around with the code! https://github.com/nicole-terc/sheepit-sensors- multiplatform • Rebecca Franks - Practical magic with animations in Jetpack Compose https://www.youtube.com/watch?v=HNSKJIQtb4c • Compose Animation Documentation https://developer.android.com/develop/ui/compose/animat ion/introduction • Android Sensor Documentation https://developer.android.com/develop/sensors-and- location/sensors/sensors_overview • iOS Sensor Documentation https://developer.apple.com/documentation/coremotion https://developer.apple.com/documentation/sensorkit https://github.com/nicole-terc/sheepit-sensors-multiplatform
86. Thank you