Upgrade to Pro — share decks privately, control downloads, hide ads and more …

graphicsLayer

Moyuru Aizawa
September 01, 2023

 graphicsLayer

Moyuru Aizawa

September 01, 2023
Tweet

More Decks by Moyuru Aizawa

Other Decks in Programming

Transcript

  1. Moyuru Aizawa Software Engineer of Catlog, RABO. Previously at Azit,

    CyberAgent, and Eureka. Love Metal, Hardcore and EDM. MoyuruAizawa
  2. 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
  3. ‣ scaleX, scaleY ‣ translationX, translationY ‣ rotationX, rotationY, rotationZ

    ‣ alpha ‣ shadowElevation ‣ cameraDistance ‣ transformOrigin ‣ shape ‣ clip ‣ renderEffect GraphicsLayerScope
  4. 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ͷίϯςϯπΛεέʔϦϯά
  5. 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Λ࢖༻͢Δ
  6. 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ͷҐஔΛܭࢉ͢Δ
  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 } } ) PageͷҐஔΛݩʹscaleΛܭࢉ͢Δ
  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 } } ) TIPS: LerpΛ࢖͏ͱ͍͍ײ͡ʹeasingͰ͖Δ
  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 } } ) GraphicsLayerScope.scaleX/scaleYʹset