Slide 1

Slide 1 text

graphicsLayerͰ ಈ͖ͷ͋Δը໘Λ࣮૷͢Δ @MoyuruAizawa

Slide 2

Slide 2 text

Moyuru Aizawa Software Engineer of Catlog, RABO. Previously at Azit, CyberAgent, and Eureka. Love Metal, Hardcore and EDM. MoyuruAizawa

Slide 3

Slide 3 text

graphicsLayer Modifier.graphicsLayer is a modifier that makes the content of the composable draw into a draw layer. A layer provides a few different functions, such as: • Isolation for its drawing instructions (similar to RenderNode). Drawing instructions captured as part of a layer can be re-issued efficiently by the rendering pipeline without re-executing application code. • Transformations that apply to all the drawing instructions contained within a layer. • Rasterization for composition capabilities. When a layer is rasterized, its drawing instructions are executed and the output is captured into an offscreen buffer. Compositing such a buffer for subsequent frames is faster than executing the individual instructions, but it will behave as a bitmap when transforms like scaling or rotation are applied. ref. https://developer.android.com/jetpack/compose/graphics/draw/modifiers

Slide 4

Slide 4 text

‣ scaleX, scaleY ‣ translationX, translationY ‣ rotationX, rotationY, rotationZ ‣ alpha ‣ shadowElevation ‣ cameraDistance ‣ transformOrigin ‣ shape ‣ clip ‣ renderEffect GraphicsLayerScope

Slide 5

Slide 5 text

ΠϯλϥΫγϣϯͷ࣮૷ʹศར

Slide 6

Slide 6 text

HorizontalPager(…) { Image( modifier = Modifier .graphicsLayer { … }, … ) } PagerίϯςϯπΛεέʔϦϯά

Slide 7

Slide 7 text

Image( modifier = Modifier .graphicsLayer { val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue lerp( start = ScaleFactor(0.85f, 0.85f), stop = ScaleFactor(1f, 1f), fraction = 1f - pageOffset.coerceIn(0f, 1f) ).also { scaleX = it.scaleX scaleY = it.scaleY } } ) PagerͷίϯςϯπΛεέʔϦϯά

Slide 8

Slide 8 text

Image( modifier = Modifier .graphicsLayer { val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue lerp( start = ScaleFactor(0.85f, 0.85f), stop = ScaleFactor(1f, 1f), fraction = 1f - pageOffset.coerceIn(0f, 1f) ).also { scaleX = it.scaleX scaleY = it.scaleY } } ) graphicsLayerΛ࢖༻͢Δ

Slide 9

Slide 9 text

Image( modifier = Modifier .graphicsLayer { val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue lerp( start = ScaleFactor(0.85f, 0.85f), stop = ScaleFactor(1f, 1f), fraction = 1f - pageOffset.coerceIn(0f, 1f) ).also { scaleX = it.scaleX scaleY = it.scaleY } } ) PageͷҐஔΛܭࢉ͢Δ

Slide 10

Slide 10 text

Image( modifier = Modifier .graphicsLayer { val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue lerp( start = ScaleFactor(0.85f, 0.85f), stop = ScaleFactor(1f, 1f), fraction = 1f - pageOffset.coerceIn(0f, 1f) ).also { scaleX = it.scaleX scaleY = it.scaleY } } ) PageͷҐஔΛݩʹscaleΛܭࢉ͢Δ

Slide 11

Slide 11 text

Image( modifier = Modifier .graphicsLayer { val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue lerp( start = ScaleFactor(0.85f, 0.85f), stop = ScaleFactor(1f, 1f), fraction = 1f - pageOffset.coerceIn(0f, 1f) ).also { scaleX = it.scaleX scaleY = it.scaleY } } ) TIPS: LerpΛ࢖͏ͱ͍͍ײ͡ʹeasingͰ͖Δ

Slide 12

Slide 12 text

Image( modifier = Modifier .graphicsLayer { val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue lerp( start = ScaleFactor(0.85f, 0.85f), stop = ScaleFactor(1f, 1f), fraction = 1f - pageOffset.coerceIn(0f, 1f) ).also { scaleX = it.scaleX scaleY = it.scaleY } } ) GraphicsLayerScope.scaleX/scaleYʹset

Slide 13

Slide 13 text

͋ͬͱ͍͏·ʹ

Slide 14

Slide 14 text

Modifier.graphicsLayerΛ࢖͏ͱŊscaling΍translationͳͲ͕࣮૷Ͱ͖Δ ΞϓϦέʔγϣϯίʔυͷ࠶࣮ߦΛ൐Θͳ͍/offscreen bufferingͷར༻ͳͲͰߴ଎

Slide 15

Slide 15 text

Thank you