[성빈랜드] Compose Canvas로 예쁜 인터렉션 구현하기

Slide 1

Slide 1 text

੤߀ח ചݶਸ ٜ݅য ࠇद׮! ୭਋ࢿ Compose Canvas۽   ৘ࢂ ੋఠ۩࣌ ҳഅೞӝ! ࣁ࣌ 04

Slide 2

Slide 2 text

Compose Canvas۽ ৘ࢂ ੋఠ۩࣌ ҳഅೞӝ! ചݶਸ Ӓܾ ٸ  ೙ਃೠ ӝࠄ ѐ֛ ୭਋ࢿ ࣁ࣌ 04

Slide 3

Slide 3 text

Frame ചݶਸ Ӓܾ ٸ ೙ਃೠ ӝࠄ ѐ֛ਸ ঌইࠁ੗ ചݶਸ Ӓܾ ٸ ೙ਃೠ ӝࠄ ѐ֛ 3 *Youtube@Andymation ࢎۈ੄ ׀җ ֱח োࣘ೧ࢲ ࡅܰѱ ࠁৈ૑ח  ੉޷૑ܳ ز੘ਵ۽ ੋधೞח ҳઑ੉׮. ੿੸ੋ ੉޷૑ੋ ױࣽೠ Ӓܿޘ਺਷ ࢎۈীѱ ৔࢚୊ۢ ࠁੋ׮.

Slide 4

Slide 4 text

Recomposition ചݶਸ Ӓܾ ٸ ೙ਃೠ ӝࠄ ѐ֛ਸ ঌইࠁ੗ ചݶਸ Ӓܾ ٸ ೙ਃೠ ӝࠄ ѐ֛ 4 Composeীࢲח ױࣽೞѱ ઝ಴݅ਸ ߄Դ׮Ҋ ചݶ߸҃੉ ੌযա૑ ঋח׮. ചݶ ߸҃ਸ ঌܻ۰ݶ   Stateчਸ ߸҃೧ঠ ೠ׮.

Slide 5

Slide 5 text

Animation API ചݶਸ Ӓܾٸ ೙ਃೠ ӝࠄ ѐ֛ਸ ঌইࠁ੗ ചݶਸ Ӓܾ ٸ ೙ਃೠ ӝࠄ ѐ֛ 5 XML -> Compose о੢ ഄन੸ੋ ߸ചੋ Animation API

Slide 6

Slide 6 text

Animation API ചݶਸ Ӓܾٸ ೙ਃೠ ӝࠄ ѐ֛ਸ ঌইࠁ੗ ചݶਸ Ӓܾ ٸ ೙ਃೠ ӝࠄ ѐ֛ 6 XML -> Compose о੢ ഄन੸ੋ ߸ചੋ Animation API Ӓۢীب যڃٸীח ਗୡ੸ਵ۽ ೐ۨ੐݃׮ ઝ಴ܳ ߸҃दఃחѱ ಞೡٸب੓׮.

Slide 7

Slide 7 text

Animation API ചݶਸ Ӓܾٸ ೙ਃೠ ӝࠄ ѐ֛ਸ ঌইࠁ੗ ചݶਸ Ӓܾ ٸ ೙ਃೠ ӝࠄ ѐ֛ 7 1. ೐ۨ੐ী ୡ੼ਸ ݏ୹ٸ 2. State ߸ച হ੉ ޖೠ൤ ߈ࠂغח ചݶਸ Ӓܾ ٸ 3. যڃ ചݶ੉ٚ 60 ೐ۨ੐ਵ۽ Ҋ੿ೞ۰ ೡ ٸ

Slide 8

Slide 8 text

Choreographer ചݶਸ Ӓܾٸ ೙ਃೠ ӝࠄ ѐ֛ਸ ঌইࠁ੗ ചݶਸ Ӓܾ ٸ ೙ਃೠ ӝࠄ ѐ֛ 8 Stateী ୡ੼੉ ইצ ೐ۨ੐ী ୡ੼ਸ ݏ୶Ҋ ചݶਸ ߸ചೞҊ र׮.

Slide 9

Slide 9 text

Choreographer ചݶਸ Ӓܾٸ ೙ਃೠ ӝࠄ ѐ֛ਸ ঌইࠁ੗ ചݶਸ Ӓܾ ٸ ೙ਃೠ ӝࠄ ѐ֛ 9 Stateী ୡ੼੉ ইצ ೐ۨ੐ী ୡ੼ਸ ݏ୶Ҋ ചݶਸ ߸ചೞҊ र׮. Ӓ۞ӝ ਤ೧ࢲח ೐ۨ੐݃׮ ௒ߔਸ ߉ইঠ ೠ׮.

Slide 10

Slide 10 text

Choreographer ചݶਸ Ӓܾٸ ೙ਃೠ ӝࠄ ѐ֛ਸ ঌইࠁ੗ ചݶਸ Ӓܾ ٸ ೙ਃೠ ӝࠄ ѐ֛ 10 Stateী ୡ੼੉ ইצ ೐ۨ੐ী ୡ੼ਸ ݏ୶Ҋ ചݶਸ ߸ചೞҊ र׮. Ӓ۞ӝ ਤ೧ࢲח ೐ۨ੐݃׮ ௒ߔਸ ߉ইঠ ೠ׮. val callback = object : Choreographer.FrameCallback { override fun doFrame(frameTimeNanos: Long) { Choreographer.getInstance().postFrameCallback(this) } }

Slide 11

Slide 11 text

WithFrameNamos ചݶਸ Ӓܾٸ ೙ਃೠ ӝࠄ ѐ֛ਸ ঌইࠁ੗ ചݶਸ Ӓܾ ٸ ೙ਃೠ ӝࠄ ѐ֛ 11 /** * Awaits the next animation frame and returns frame time in nanoseconds. */ public suspend fun awaitFrame(): Long { // fast path when choreographer is already known val choreographer = choreographer if (choreographer != null) { return suspendCancellableCoroutine { cont -> postFrameCallback(choreographer, cont) } } // post into looper thread to figure it out return suspendCancellableCoroutine { cont -> Dispatchers.Main.dispatch(EmptyCoroutineContext, Runnable { updateChoreographerAndPostFrameCallback(cont) }) } } choreographer.postFrameCallbackਸ wraping ೞҊ ੓ח awaitFrame

Slide 12

Slide 12 text

Compose Canvas۽ ৘ࢂ ੋఠ۩࣌ ҳഅೞӝ! ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ ୭਋ࢿ ࣁ࣌ 04

Slide 13

Slide 13 text

਋ܻо ҳഅೡ ചݶ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 13

Slide 14

Slide 14 text

਋ܻо ҳഅೡ ചݶ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 14 Canvas۽ ׀࣠੉ Ӓܻӝ ݆਷ ׀࣠੉ Ӓ۰ࠁӝ ׀࣠੉ ਤীࢲ ইې۽ ղܻӝ ׀࣠੉о ׮ ղܻݶ ׮द ৢܻӝ ࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ

Slide 15

Slide 15 text

canvas۽ ׀࣠੉ Ӓܻӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 15 fun SnowScreen() { Canvas(modifier = Modifier.fillMaxSize().background(Color.Black)) { } }

Slide 16

Slide 16 text

canvas۽ ׀࣠੉ Ӓܻӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 16 fun SnowScreen() { Canvas(modifier = Modifier.fillMaxSize().background(Color.Black)) {drawScope-> drawCircle(color = Color.White, radius = 20f) }

Slide 17

Slide 17 text

canvas۽ ׀࣠੉ Ӓܻӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ 17 drawScope().drawContext.Canvas drawScope() VS

Slide 18

Slide 18 text

canvas۽ ׀࣠੉ Ӓܻӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 18 val paint: Paint = Paint().apply { isAntiAlias = true color = Color.White style = PaintingStyle.Fill } fun SnowScreen() { Canvas(modifier = Modifier.fillMaxSize().background(Color.Black)) { val canvas = drawContext.canvas canvas.drawCircle(center, 20f, paint) drawCircle(color = Color.White, radius = 20f) } ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 19

Slide 19 text

݆਷ ׀࣠੉ Ӓ۰ࠁӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 19 data class SnowState(val snows: List) class Snow( val size: Float, position: Offset, ) { val paint: Paint = Paint().apply { isAntiAlias = true color = Color.White style = PaintingStyle.Fill } private var position by mutableStateOf(position) fun draw(canvas: Canvas) { canvas.drawCircle(position, size, paint) } ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 20

Slide 20 text

݆਷ ׀࣠੉ Ӓ۰ࠁӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 20 data class SnowState(val snows: List) class Snow( val size: Float, position: Offset, ) { val paint: Paint = Paint().apply { isAntiAlias = true color = Color.White style = PaintingStyle.Fill } private var position by mutableStateOf(position) fun draw(canvas: Canvas) { canvas.drawCircle(position, size, paint) } ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 21

Slide 21 text

݆਷ ׀࣠੉ Ӓ۰ࠁӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 21 fun createSnowList(canvas: IntSize): List { return List(10) { Snow( size = 20f, position = Offset(x = canvas.width.randomTest().toFloat(), y = 20f), ) } } fun Int.randomTest() = Random.nextInt(this) ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 22

Slide 22 text

݆਷ ׀࣠੉ Ӓ۰ࠁӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 22 fun SnowScreen() { val screenWidth = (Dp(LocalConfiguration.current.screenWidthDp.toFloat())).dpToPx(density).toInt() var snowState by remember { mutableStateOf(SnowState(createSnowList(IntSize(screenWidth, 0)))) } Canvas( modifier = Modifier .fillMaxSize() .background(Color.Black), ) { val canvas = drawContext.canvas for (snow in snowState.snows) { snow.draw(canvas) } } ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 23

Slide 23 text

݆਷ ׀࣠੉ Ӓ۰ࠁӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 23 val screenWidth = (Dp(LocalConfiguration.current.screenWidthDp.toFloat())).dpToPx(density).toInt() ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ Canvas۽ Ӓܻח Ѣ੄ ݽٚ গפݫ੉ٜ࣌਷ ࠁৈ૑ח झ௼ܽ ࢎ੉ૉܳ ঌইঠೠ׮.

Slide 24

Slide 24 text

׀࣠੉ ਤীࢲ ইې۽ ղܻӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 24 ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 25

Slide 25 text

׀࣠੉ ਤীࢲ ইې۽ ղܻӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 25 class Snow( val size: Float, position: Offset, ) { val paint: Paint = Paint().apply { isAntiAlias = true color = Color.White style = PaintingStyle.Fill } // ୡӝ ਤ஖ח ੿೧ઉ੓૑݅, ч਷ ߸ച೧ঠೠ׮. private var position by mutableStateOf(position) fun draw(canvas: Canvas) { canvas.drawCircle(position, size, paint) } //୶о ػ ௏٘ fun update() { position = position.copy(y = position.y + 1) } } ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 26

Slide 26 text

׀࣠੉ ਤীࢲ ইې۽ ղܻӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 26 LaunchedEffect(Unit) { while (isActive) { awaitFrame() for (snow in snowState.snows) { snow.update() } } } } ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 27

Slide 27 text

׀࣠੉ ਤীࢲ ইې۽ ղܻӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 27 LaunchedEffect(Unit) { while (isActive) { awaitFrame() for (snow in snowState.snows) { snow.update() } } } } @Composable fun LaunchedEffect( key1 : Any?, block : suspend CorountineScope.() -> Unit ) {} ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 28

Slide 28 text

׀࣠੉о ׮ ղܻݶ ׮द ৢܻӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 28 class Snow( val size: Float, position: Offset, val screenSize: IntSize, ) { val paint: Paint = Paint().apply { isAntiAlias = true color = Color.White style = PaintingStyle.Fill } // ୡӝ ਤ஖ח ੿೧ઉ੓૑݅, ч਷ ߸ച೧ঠೠ׮. private var position by mutableStateOf(position) fun draw(canvas: Canvas) { canvas.drawCircle(position, size, paint) } fun update() { //ப߄झ੄ ࢎ੉ૉо ૑աݶ ׮द ৢܻ੗! position = if (position.y > screenSize.height) position.copy(y = 0f) else position.copy(y = position.y + 30) } } ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 29

Slide 29 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 29 ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 30

Slide 30 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 30 ࡁ߸਷ ׀੄ ૐо۝੉׮(਋ܻо ݅٘חч) ࡁ߸җ пبח ےؒೞѱ ૐоೠ׮. ࡁ߸ X Sin(A) = ֫੉(Y) ࡁ߸X Cos(A) = ߃߸(X) ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 31

Slide 31 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 31 private const val angleSeed = 25.0f private val angleSeedRange = -angleSeed..angleSeed private val incrementRange = 0.4f..0.8f fun update() { // speed val increment = incrementRange.random() val angle = angleSeedRange.random() val xAngle = (increment * cos((angle))) val yAngle = (increment * sin((angle))) position = if (position.y > screenSize.height) { position.copy(y = 0f) } else { position.copy( x = position.x + xAngle, y = position.y + yAngle, ) } } } ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 32

Slide 32 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 32 private var angle by mutableStateOf(angle) fun update() { // speed val increment = incrementRange.random() val xAngle = (increment * cos((angle))) val yAngle = (increment * sin((angle))) angle += angleSeedRange.random() / 1000f position = if (position.y > screenSize.height) { position.copy(y = 0f) } else { position.copy( x = position.x + xAngle, y = position.y + yAngle, ) } } } ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 33

Slide 33 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 33 private var angle by mutableStateOf(angle) fun update() { // speed val increment = incrementRange.random() val xAngle = (increment * cos((angle))) val yAngle = (increment * sin((angle))) angle += angleSeedRange.random() / 1000f position = if (position.y > screenSize.height) { position.copy(y = 0f) } else { position.copy( x = position.x + xAngle, y = position.y + yAngle, ) } } } ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 34

Slide 34 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ 34 ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗

Slide 35

Slide 35 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ 35 ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗

Slide 36

Slide 36 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ 36 ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗

Slide 37

Slide 37 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ 37 ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗

Slide 38

Slide 38 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 38 ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 39

Slide 39 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 39 ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 40

Slide 40 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 40 90ب = π/2 Kotlin.mathী PIо ઓ੤ೠ׮. public const val PI: Double = 3.141592653589793 ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 41

Slide 41 text

࢖пೣࣻܳ ੉ਊ೧ пب ٜ݅ӝ ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗ 41 fun createSnowList(canvas: IntSize): List { return List(200) { Snow( size = snowSize.random(), position = Offset( x = canvas.width.randomTest().toFloat(), y = canvas.height.randomTest().toFloat(), ), canvas, incrementRange = incrementRange.random(), angle = (angleSeed.random() / angleSeed * 0.1f + (PI.toFloat() / 2.0.toFloat())).toDouble(), ) } } ׀ ղܻח ചݶਸ Ӓ۰ࠁ੗: ؊ աইоӝ

Slide 42

Slide 42 text

Compose Canvas۽ ৘ࢂ ੋఠ۩࣌ ҳഅೞӝ! ޛ গפݫ੉࣌ਸ  ٜ݅যࠁ੗ ୭਋ࢿ ࣁ࣌ 04

Slide 43

Slide 43 text

ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 43 *Hydro Homie জ ਗېח ੉۠ জਸ ٜ݅۰Ҋ ೮঻׮.

Slide 44

Slide 44 text

ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 44 Canvas(modifier = Modifier.fillMaxSize()) { val path = Path() val amplitude = waveHeight for (x in 0..size.width.toInt()) { val y = size.height / 2 + amplitude * sin((2 * PI * (x + waveProgress.value * size.width)) / size.width) if (x == 0) { path.moveTo(x.toFloat(), y) } else { path.lineTo(x.toFloat(), y) } } path.lineTo(size.width, size.height) path.lineTo(0f, size.height) path.close() drawPath( path = path, color = color, ) } } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 45

Slide 45 text

ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 45 ޛ੉ ࡅ૑ח গפݫ੉࣌੉ ցޖ बबೞ׮. ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 46

Slide 46 text

਋ܻо ҳഅೡ ചݶ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 46 ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 47

Slide 47 text

਋ܻо ҳഅೡ ചݶ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 47 ചݶࢎ੉ૉ ҳೞӝ ޛ ইې۽ хࣗदఃӝ ҋࢶ ٜ݅ӝ (߬૑য Ӓې೐) ౵ب ੗োझۣѱ ٜ݅ӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 48

Slide 48 text

ചݶ ࢎ੉ૉ ҳೞӝ ౵ب஖ח ചݶਸ Ӓ۰ࠁ੗ 48 ചݶ ࢎ੉ૉܳ ҳೞӝ ਤೠ 4о૑ ߑߨ 1. LocalConfiguration.current.screenXXDpܳ ഝਊೞӝ 2. Modifier.onSizeChanged((IntSize) -> Unit) ഝਊೞӝ 3. BoxConstraint ഝਊೞӝ 4. Canvas Composable ೣࣻ উীࢲ width৬ height ഐ୹ оמ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 49

Slide 49 text

ചݶ ࢎ੉ૉ ҳೞӝ ౵ب஖ח ചݶਸ Ӓ۰ࠁ੗ 49 Modifier.onSizeChanged((IntSize) -> Unit) ഝਊೞӝ Modi fi er.onSizeChanged(onSizeChanged: (IntSize) -> Unit) ਃࣗо ୊਺ ஏ੿غѢա ਃࣗ੄ ௼ӝо ߸҃ؼ ٸ ࣻ੿ػ Compose UI ਃࣗ੄ ௼ӝ۽ ഐ୹ؾפ׮. modifier = Modifier.onSizeChanged { with(density) { val width = it.width.toDp() } } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 50

Slide 50 text

ചݶ ࢎ੉ૉ ҳೞӝ ౵ب஖ח ചݶਸ Ӓ۰ࠁ੗ 50 BoxConstraintۆ? Box੄ ۨ੉ইਓ ӝמਸ ನೣೞݶࢲ layout੄ Constraintী ੽Ӕೡࣻ ੓ب۾ ٜ݅য૓ ۨ੉ইਓ BoxWithConstraints { val density = LocalDensity.current val height = with(density) { maxHeight.roundToPx() } val width = with(density) { maxWidth.roundToPx() } } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 51

Slide 51 text

ޛ ইې۽ ղ۰ࠁӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 51 @Composable fun Water( waterLevel: Float, ) = BoxWithConstraints { require(waterLevel in 0f..1f) { "ৈӝ ࢎ੉ী ੓যঠೣ" } val density = LocalDensity.current val height = with(density) { maxHeight.toPx() } val width = with(density) { maxWidth.toPx() } val currentY = height * waterLevel Canvas(modifier = Modifier.fillMaxSize()) { val path = Path().apply { moveTo(0f, 0f) lineTo(0f, currentY) lineTo(width, currentY) lineTo(width, height) close() } drawPath( path = path, color = Color.Blue, ) } } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 52

Slide 52 text

ޛ ইې۽ ղ۰ࠁӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 52 @Composable fun Water( waterLevel: Float, ) = BoxWithConstraints { require(waterLevel in 0f..1f) { "ৈӝ ࢎ੉ী ੓যঠೣ" } val density = LocalDensity.current val height = with(density) { maxHeight.toPx() } val width = with(density) { maxWidth.toPx() } val currentY = height * waterLevel Canvas(modifier = Modifier.fillMaxSize()) { val path = Path().apply { moveTo(0f, 0f) lineTo(0f, currentY) lineTo(width, currentY) lineTo(width, height) close() } drawPath( path = path, color = Color.Blue, ) } } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 53

Slide 53 text

ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 53 @Composable fun Water( waterLevel: Float, ) = BoxWithConstraints { require(waterLevel in 0f..1f) { "ৈӝ ࢎ੉ী ੓যঠೣ" } val density = LocalDensity.current val height = with(density) { maxHeight.toPx() } val width = with(density) { maxWidth.toPx() } val currentY = height * waterLevel Canvas(modifier = Modifier.fillMaxSize()) { val path = Path().apply { moveTo(0f, currentY) lineTo(width, currentY) lineTo(width, height) close() } drawPath( path = path, color = Color.Blue, ) } } ޛ ইې۽ ղ۰ࠁӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 54

Slide 54 text

ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 54 @Preview @Composable fun WaterPreview() { val test = remember { Animatable(0f) } LaunchedEffect(Unit) { test.animateTo(1f, tween(30000)) } Surface( modifier = Modifier.fillMaxSize(), color = Color.White, ) { Water(test.value) } } ޛ ইې۽ ղ۰ࠁӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 55

Slide 55 text

ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 55 val path = Path().apply { moveTo(0f, currentY) lineTo(width, currentY) lineTo(width, height) close() } drawPath( path = path, color = Color.Blue, ) } } ޛ ইې۽ ղ۰ࠁӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ pathח ੼ٜ੄ ૘೤੉ݴ, ੼ਸ ੉য بഋਸ ٜ݅ࣻ ੓׮.

Slide 56

Slide 56 text

ޛ ইې۽ ղ۰ࠁӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 56 val path = Path().apply { moveTo(0f, currentY) lineTo(width, currentY) lineTo(width, height) close() } drawPath( path = path, color = Color.Blue, ) } } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ pathח ੼ٜ੄ ૘೤੉ݴ, ੼ਸ ੉য بഋਸ ٜ݅ࣻ ੓׮.

Slide 57

Slide 57 text

ޛ ইې۽ ղ۰ࠁӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 57 val path = Path().apply { moveTo(0f, currentY) lineTo(width, currentY) lineTo(width, height) close() } drawPath( path = path, color = Color.Blue, ) } } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ pathח ੼ٜ੄ ૘೤੉ݴ, ੼ਸ ੉য بഋਸ ٜ݅ࣻ ੓׮.

Slide 58

Slide 58 text

ޛ ইې۽ ղ۰ࠁӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 58 val path = Path().apply { moveTo(0f, currentY) lineTo(width, currentY) lineTo(width, height) close() } drawPath( path = path, color = Color.Blue, ) } } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ pathח ੼ٜ੄ ૘೤੉ݴ, ੼ਸ ੉য بഋਸ ٜ݅ࣻ ੓׮.

Slide 59

Slide 59 text

ޛ ইې۽ ղ۰ࠁӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 59 val path = Path().apply { moveTo(0f, currentY) lineTo(width, currentY) lineTo(width, height) close() } drawPath( path = path, color = Color.Blue, ) } } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ pathח ੼ٜ੄ ૘೤੉ݴ, ੼ਸ ੉য بഋਸ ٜ݅ࣻ ੓׮.

Slide 60

Slide 60 text

ޛ ইې۽ ղ۰ࠁӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 60 val path = Path().apply { moveTo(0f, currentY) lineTo(width, currentY) lineTo(width, height) + lineTo(0f, height) close() } drawPath( path = path, color = Color.Blue, ) } } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ pathח ੼ٜ੄ ૘೤੉ݴ, ੼ਸ ੉য بഋਸ ٜ݅ࣻ ੓׮.

Slide 61

Slide 61 text

ޛ ইې۽ ղ۰ࠁӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 61 val path = Path().apply { moveTo(0f, currentY) lineTo(width, currentY) lineTo(width, height) + lineTo(0f, height) close() } drawPath( path = path, color = Color.Blue, ) } } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 62

Slide 62 text

౵ب Ӓܻӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 62 ౵ب ചݶਸ ࠙೧೧ࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 63

Slide 63 text

౵ب ചݶਸ ࠙೧೧ࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 63 ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 64

Slide 64 text

౵ب ചݶਸ ࠙೧೧ࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 64 ݅ড ҋࢶਸ ࡐݶ ੉۠ ݽন੉ Ӓ۰૓׮. ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 65

Slide 65 text

౵ب ചݶਸ ࠙೧೧ࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 65 ݅ড ҋࢶਸ ࡐݶ ੉۠ ݽন੉ Ӓ۰૓׮. ҳрࠗఠ ա־Ҋ п ҳ৉੄ ੼ਸ ҳ೧ࠁ੗. ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 66

Slide 66 text

ҳр ա־ӝ ౵ب஖ח ചݶਸ Ӓ۰ࠁ੗ 66 ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ ҳр਷ Ҋ੿ػ ҃҅ чਵ۽ ա־ח Ѫҗ Ҋ੿ػ ҃҅ ࣻܳ ա־ח Ѫ ف о૑о ੓׮. Configuration change ٸޙী ചݶч਷ ঱ ઁٚ ߄Չࣻ ੓ӝী ҃҅ ࣻܳ Ҋ੿೧ ա־ח ѱ જ׮.

Slide 67

Slide 67 text

Yч ҳೞӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 67 val currentY = height * waterLevel ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ ૑Әࠗఠ ೠ ҃҅ݶ੄ Yчਸ ҳ೧ࠄ׮. അ੤੄ ޛ֫੉ܳ ӝ߈ਵ۽ ࢖੗.

Slide 68

Slide 68 text

Yч ҳೞӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 68 @Composable fun calculateY(height: Int, waterLevel: Float ): Int { var y by remember { mutableStateOf(0) } val duration = Random.nextInt(300) + 300 // ޖೠ গפݫ੉࣌ ҅ࣘ ߈ࠂೠ׮. val yNoiseAnimation = rememberInfiniteTransition() // ౵ب੄ ֫੉ ҅࢑ val yNoise by yNoiseAnimation.animateFloat( initialValue = 40f, targetValue = -40f, animationSpec = infiniteRepeatable( animation = tween( durationMillis = duration, easing = FastOutSlowInEasing, ), repeatMode = RepeatMode.Reverse, ), ) y = ((waterLevel * height).toInt() + yNoise).toInt() return y } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 69

Slide 69 text

Yч ҳೞӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 69 @Composable fun calculateY(height: Int, waterLevel: Float ): Int { var y by remember { mutableStateOf(0) } val duration = Random.nextInt(300) + 300 // ޖೠ গפݫ੉࣌ ҅ࣘ ߈ࠂೠ׮. val yNoiseAnimation = rememberInfiniteTransition() // ౵ب੄ ֫੉ ҅࢑ val yNoise by yNoiseAnimation.animateFloat( initialValue = 40f, targetValue = -40f, animationSpec = infiniteRepeatable( animation = tween( durationMillis = duration, easing = FastOutSlowInEasing, ), repeatMode = RepeatMode.Reverse, ), ) y = ((waterLevel * height).toInt() + yNoise).toInt() return y } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 70

Slide 70 text

Yч ҳೞӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 70 @Composable fun calculateY(height: Int, waterLevel: Float ): Int { var y by remember { mutableStateOf(0) } val duration = Random.nextInt(300) + 300 // ޖೠ গפݫ੉࣌ ҅ࣘ ߈ࠂೠ׮. val yNoiseAnimation = rememberInfiniteTransition() // ౵ب੄ ֫੉ ҅࢑ val yNoise by yNoiseAnimation.animateFloat( initialValue = 40f, targetValue = -40f, animationSpec = infiniteRepeatable( animation = tween( durationMillis = duration, easing = FastOutSlowInEasing, ), repeatMode = RepeatMode.Reverse, ), ) y = ((waterLevel * height).toInt() + yNoise).toInt() return y } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 71

Slide 71 text

Yч ҳೞӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 71 @Composable fun calculateY(height: Int, waterLevel: Float ): Int { var y by remember { mutableStateOf(0) } val duration = Random.nextInt(300) + 300 // ޖೠ গפݫ੉࣌ ҅ࣘ ߈ࠂೠ׮. val yNoiseAnimation = rememberInfiniteTransition() // ౵ب੄ ֫੉ ҅࢑ val yNoise by yNoiseAnimation.animateFloat( initialValue = 40f, targetValue = -40f, animationSpec = infiniteRepeatable( animation = tween( durationMillis = duration, easing = FastOutSlowInEasing, ), repeatMode = RepeatMode.Reverse, ), ) y = ((waterLevel * height).toInt() + yNoise).toInt() return y } ೨ब ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 72

Slide 72 text

Yч ܻझ౟ ҳೞӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 72 @Composable fun calculateYs2(height: Int, waterLevel: Float): List { // ౵ب੄ ѐࣻ val total = 6 return (0..total).map { calculateY( height = height, waterLevel = waterLevel, ) }.toList() } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 73

Slide 73 text

౵ب Ӓܻӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 73 @Composable fun Water( waterLevel: Float, ) = BoxWithConstraints { require(waterLevel in 0f..1f) { "ৈӝ ࢎ੉ী ੓যঠೣ" } val density = LocalDensity.current val height = with(density) { maxHeight.toPx() } val width = with(density) { maxWidth.toPx() } val waterHeightList = calculateYs(height = height, waterLevel = waterLevel) val currentY = height * waterLevel Canvas(modifier = Modifier.fillMaxSize()) { val path = Path().apply { moveTo(0f, currentY) lineTo(width, currentY) lineTo(width, height) close() } drawPath( path = path, color = Color.Blue, ) } } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 74

Slide 74 text

౵ب Ӓܻӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 74 fun DrawWave(yList: List, width: Int, waterHeight: Float): Path = Path().apply { moveTo(0f, waterHeight) // рѺ -> पઁ рѺ ࢎ੉ૉ val interval = width * (1 / (yList.size + 1).toFloat()) yList.forEachIndexed { idx, y -> val segmentIndex = (index + 1) / (aYs.size + 1).toFloat() val x = size.width * segmentIndex //੉ઁ ҋࢶਸ Ӓܾ ର۹ } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 75

Slide 75 text

߬૑য ҋࢶ੉ۆ? ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 75 Qudratic Vezier(2ର) ׮਺ ઑ੺੼ਵ۽ ੉زೞח ࢶਸ োѾೞৈ ҋࢶਸ ݅٘ח Ѫ উ٘۽੉٘ীࢲח 3ରө૑ ૑ਗ੉ оמೞ׮.  ղо ਗೞח ബҗܳ ঳ਵ۰ݶ 4ѐ੄ ઑ੺੼ਵۿ   డহ੉ ࠗ઒ೞ׮. ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 76

Slide 76 text

ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 76 Cubic Bezier(3ର) ߬૑য ҋࢶ੉ۆ? ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 77

Slide 77 text

౵ب Ӓܻӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 77 ױࣽೞѱ ߬૑য Ӓې೐ܳ োѾदఃӝীח   ৖җ э਷ ҋࢶ੉ Ӓ۰૕ ࣻ ੓׮. ҋࢶਸ ۣࠗ٘ѱ Ӓܾ ࣻ ੓ח ҕध੉ ೙ਃೞ׮. ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 78

Slide 78 text

౵ب Ӓܻӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 78 ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 79

Slide 79 text

౵ب Ӓܻӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 79 B੄ ՘੼җ A੄ द੘੼੉ ੌ஖ೞҊ, B੄ ݃૑݄ ઁয੼(Control Point)৬ A੄ द੘ ઁয੼੉ ੌ஖ೡ ٸ C1 োࣘࢿਸ ݅઒ೠ׮. (੽ࢶਸ ݅઒) C1(Continuity) ҕध ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 80

Slide 80 text

౵ب Ӓܻӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 80 ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 81

Slide 81 text

౵ب Ӓܻӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 81 // рѺ ՘੄ ߧਤ val segmentIndex = (idx + 1) / (yList.size + 1).toFloat() // рѺ ՘੄ x val x = width * segmentIndex cubicTo( x1 = if (idx == 0) 0f else x - interval / 2f, y1 = yList.getOrNull(idx - 1)?.toFloat() ?: waterHeight, // ੺߈ x2 = x - interval / 2f, y2 = y.toFloat(), // ՘੼ x3 = x, y3 = y.toFloat(), ) } cubicTo( x1 = width - interval / 2f, y1 = yList.last().toFloat(), x2 = width.toFloat(), y2 = waterHeight, x3 = width.toFloat(), y3 = waterHeight, ) lineTo(width.toFloat(), 0f) close() } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 82

Slide 82 text

౵ب Ӓܻӝ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 82 // рѺ ՘੄ ߧਤ val segmentIndex = (idx + 1) / (yList.size + 1).toFloat() // рѺ ՘੄ x val x = width * segmentIndex cubicTo( x1 = if (idx == 0) 0f else x - interval / 2f, y1 = yList.getOrNull(idx - 1)?.toFloat() ?: waterHeight, // ੺߈ x2 = x - interval / 2f, y2 = y.toFloat(), // ՘੼ x3 = x, y3 = y.toFloat(), ) } cubicTo( x1 = width - interval / 2f, y1 = yList.last().toFloat(), x2 = width.toFloat(), y2 = waterHeight, x3 = width.toFloat(), y3 = waterHeight, ) lineTo(width.toFloat(), 0f) close() } ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 83

Slide 83 text

ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 83 Animation Specਸ ঌইࠁ੗ https://medium.com/mobile-app-development-publication/illustrating-android-interpolator-31ea09051d78 VS ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 84

Slide 84 text

Animation Specਸ ঌইࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 84 KeyFrame Spring Tween Snap Repeatable/InfiniteRepeatable ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 85

Slide 85 text

Springਵ۽ ࣻ੿೧ ࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 85 ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 86

Slide 86 text

Springਵ۽ ࣻ੿೧ ࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 86 ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 87

Slide 87 text

Springਵ۽ ࣻ੿೧ ࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 87 ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 88

Slide 88 text

Springਵ۽ ࣻ੿೧ࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 88 val duration = Random.nextInt(300) + 300 // ޖೠ গפݫ੉࣌ ҅ࣘ ߈ࠂೠ׮. val yNoiseAnimation = rememberInfiniteTransition() // ౵ب੄ ֫੉ ҅࢑ val yNoise by yNoiseAnimation.animateFloat( initialValue = 25f, targetValue = -25f, animationSpec = infiniteRepeatable( animation = tween( durationMillis = duration, easing = FastOutSlowInEasing, ), repeatMode = RepeatMode.Reverse, ), ) y = ((waterLevel * height).toInt() + yNoise).toInt() val springY by animateIntAsState( targetValue = y, animationSpec = spring( dampingRatio = 0.5f, stiffness = 100f, // Spring.StiffnessVeryLow ), ) return springY ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 89

Slide 89 text

ৈ۞ ѐ੄ ౵بܳ ٜ݅য ੗োझۣѱ ٜ݅যࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 89 https://www.youtube.com/watch?v=LLfhY4eVwDY ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 90

Slide 90 text

ৈ۞ ѐ੄ ౵بܳ ٜ݅য ੗োझۣѱ ٜ݅যࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 90 val aYs = calculateY(height = height, waterLevel = waterLevel) val aYs2 = calculateY(height = height, waterLevel = waterLevel) val aYs3 = calculateY(height = height, waterLevel = waterLevel) drawPath( path = DrawWave( aYs, size, currentY, animatedY, ), color = White, ) drawPath( path = DrawWave( aYs2, size, currentY, animatedY, ), alpha = .5f, color = White, ) drawPath( path = DrawWave( aYs3, size, currentY, animatedY, ), alpha = .3f, color = White, ) https://www.youtube.com/watch?v=LLfhY4eVwDY ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 91

Slide 91 text

ৈ۞ ѐ੄ ౵بܳ ٜ݅য ੗োझۣѱ ٜ݅যࠁ੗ ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗ 91 val aYs = calculateY(height = height, waterLevel = waterLevel) val aYs2 = calculateY(height = height, waterLevel = waterLevel) val aYs3 = calculateY(height = height, waterLevel = waterLevel) drawPath( path = DrawWave( aYs, size, currentY, animatedY, ), color = White, ) drawPath( path = DrawWave( aYs2, size, currentY, animatedY, ), alpha = .5f, color = White, ) drawPath( path = DrawWave( aYs3, size, currentY, animatedY, ), alpha = .3f, color = White, ) ޛ গפݫ੉࣌ਸ ٜ݅যࠁ੗

Slide 92

Slide 92 text

Compose Canvas۽ ৘ࢂ ੋఠ۩࣌ ҳഅೞӝ! ޤ ߓਕо?? ୭਋ࢿ ࣁ࣌ 04

Slide 93

Slide 93 text

ޤ ߓਕо?? (TL;DR) ޤ ߓਕо?? 93 1. যڃ ҳഅ੉ٚ ױ҅ܳ աׇ ҳഅೞݶ ޤٚ औ׮.

Slide 94

Slide 94 text

ޤ ߓਕо?? (TL;DR) 94 1. যڃ ҳഅ੉ٚ ױ҅ܳ աׇ ҳഅೞݶ ޤٚ औ׮. 2. যڃ ҕध੉ա APIܳ ॄঠೡ૑ ݽܰѷ׮ݶ, AIܳ ഝਊ೧ۄ! ޤ ߓਕо??

Slide 95

Slide 95 text

ޤ ߓਕо?? (TL;DR) 95 1. যڃ ҳഅ੉ٚ ױ҅ܳ աׇ ҳഅೞݶ ޤٚ औ׮. 2. যڃ ҕध੉ա APIܳ ॄঠೡ૑ ݽܰѷ׮ݶ, AIܳ ഝਊ೧ۄ! 3. compose animationਸ ׮ܖח ߑߨ ޤ ߓਕо??

Slide 96

Slide 96 text

ޤ ߓਕо?? (TL;DR) 96 1. যڃ ҳഅ੉ٚ ױ҅ܳ աׇ ҳഅೞݶ ޤٚ औ׮. 2. যڃ ҕध੉ա APIܳ ॄঠೡ૑ ݽܰѷ׮ݶ, AIܳ ഝਊ೧ۄ! 3. compose animationਸ ׮ܖח ߑߨ 4. compose canvasܳ ࢎਊೞח ߑߨ ޤ ߓਕо??

Slide 97

Slide 97 text

Compose Canvas۽ ৘ࢂ ੋఠ۩࣌ ҳഅೞӝ! ؊ ೧ࠅ Ѫٜ ୭਋ࢿ ࣁ࣌ 04

Slide 98

Slide 98 text

Compose Canvas۽ ৘ࢂ ੋఠ۩࣌ ҳഅೞӝ! ୭਋ࢿ ࣁ࣌ 04 Thanks to sinsamaki, Elye

Slide 99

Slide 99 text

Compose Canvas۽ ৘ࢂ ੋఠ۩࣌ ҳഅೞӝ! ୭਋ࢿ द੘੉ ߈੉׮ - ইܻझషభۨझ ࣁ࣌ 04

Slide 100

Slide 100 text

Compose Canvas۽ ৘ࢂ ੋఠ۩࣌ ҳഅೞӝ! ୭਋ࢿ хࢎ೤פ׮ ࣁ࣌ 04