Hi all :wave:. Trying to understand `LookaheadScop...

# compose

[Konstantin Klassen]

Hi all 👋. Trying to understand LookaheadScope. I checked this example, added some logs and what I see is not what I would expect. So after placementOffset is defined, I log target and placementOffset, expecting that those would be different when content moves, but they are always the same. Because of that, I could also just remove placementOffset and replace its usage with target and the change animation would still work. So when moving content, should intermediateLayout be called once with:
- placementOffset -> where the content was, and
- target -> where the content will be
or am I not understanding this correctly?

Also in this example, targetOffset is never read and offsetAnimation is not remembered

[Konstantin Klassen]

One more question: What is the difference between the parameter lookaheadScope for animatePlacementInScope and the receiver in the intermediateLayout lambda?

[Konstantin Klassen]

I created https://issuetracker.google.com/issues/291106658. Will check the latest stable, where LookaheadLayout still exist and see how that behaves

[Konstantin Klassen]

Same with the latest stable, I must be misunderstanding the whole thing 😅

private fun Modifier.animateInScope(lookaheadScope: LookaheadLayoutScope) = composed {
    with(lookaheadScope) {
        [e-mail] { lookaheadScopeCoordinates, layoutCoordinates ->
            // Returns the lookahead position of this modifier in the local coordinates of the LookaheadLayout
            val target = lookaheadScopeCoordinates
                .localLookaheadPositionOf(sourceCoordinates = layoutCoordinates)
                .round()

            // Returns the current position of this modifier in the local coordinates of the LookaheadLayout
            val current = lookaheadScopeCoordinates
                .localPositionOf(
                    sourceCoordinates = layoutCoordinates,
                    relativeToSource = Offset.Zero
                )
                .round()

            Log.d("foo", "$current -> $target")
        }
    }
}

This very basic example, without animation. I change size and alignment of a Composable in a Box, onPlaced is called, but current and target are always the same.

(409, 1069) -> (409, 1069)
(292, 1612) -> (292, 1612)

Could anyone help me to untie the knot in my head 🙏?

[Brian Mbigo]

You can check out this sample :

https://android-review.googlesource.com/c/platform/frameworks/support/+/1961800/50/compose/u[…]/androidx/compose/ui/samples/LookaheadLayoutSample.kt

[Konstantin Klassen]

Thanks for the sample, but it just shows the same issue: targetOffset and placementOffset are always the same

[Doris Liu]

Thanks for reporting the issue. Looks like the sample needs to be updated.

So when moving content, should intermediateLayout be called once with:

- placementOffset -> where the content was, and

- target -> where the content will be

placementOffset is where the content wants to be right now. target is where the content will be. The former may or may not be the same as the latter. We achieve the animation by offset-ing the placement from placementOffset to animated offset.

[Brian Mbigo]

@Doris Liu Do you have an example/sample or know of a scenario where the placementOffset might differ from target ?

[Doris Liu]

placementOffset is where things are placed in this current frame, which means sibling's animations could influence placementOffset . In contrast, target is where the node will be placed when all lookahead-based animations finish, which depends on the target of siblings animations.

In this example below, you can see target shown as the wireframes, whereas the current placement would be gradually changing as shown in the example below.

[Stylianos Gakis]

Hey Doris, that’s a very nice example of LookaheadLayout! Is it in https://cs.android.com/ perhaps? If yes, could we get a link to it so we can take a look ourselves too? 👀

[Doris Liu]

Yes. It's from this demo: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]compose/animation/demos/lookahead/LookaheadWithFlowRowDemo.kt