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

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

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

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

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

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

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ͷίϯςϯπΛεέʔϦϯά

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Λ࢖༻͢Δ

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ͷҐஔΛܭࢉ͢Δ

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Λܭࢉ͢Δ

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Ͱ͖Δ

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

͋ͬͱ͍͏·ʹ

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

Thank you