graphicsLayer

Transcript

1. graphicsLayerͰ ಈ͖ͷ͋Δը໘Λ࣮૷͢Δ @MoyuruAizawa
2. Moyuru Aizawa Software Engineer of Catlog, RABO. Previously at Azit, CyberAgent, and Eureka. Love Metal, Hardcore and EDM. MoyuruAizawa
3. 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
4. ‣ scaleX, scaleY ‣ translationX, translationY ‣ rotationX, rotationY, rotationZ ‣ alpha ‣ shadowElevation ‣ cameraDistance ‣ transformOrigin ‣ shape ‣ clip ‣ renderEffect GraphicsLayerScope
5. ΠϯλϥΫγϣϯͷ࣮૷ʹศར
6. HorizontalPager(…) { Image( modifier = Modifier .graphicsLayer { … }, … ) } PagerίϯςϯπΛεέʔϦϯά
7. 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ͷίϯςϯπΛεέʔϦϯά
8. 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Λ࢖༻͢Δ
9. 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ͷҐஔΛܭࢉ͢Δ
10. 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Λܭࢉ͢Δ
11. 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Ͱ͖Δ
12. 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
13. ͋ͬͱ͍͏·ʹ
14. Modifier.graphicsLayerΛ࢖͏ͱŊscaling΍translationͳͲ͕࣮૷Ͱ͖Δ ΞϓϦέʔγϣϯίʔυͷ࠶࣮ߦΛ൐Θͳ͍/offscreen bufferingͷར༻ͳͲͰߴ଎
15. Thank you