Scale animation goes out of parent bounds.

[GensaGames]

• [x] I have searched existing issues and this is not a duplicate

I really don't sure it's really a bug, because we don't have such topic in the issue tracker. However it's not clear from documentation, how to deal with such kind of implementation, which is pretty simple.

Gif showing the issue.

Version

ext.litho = '0.29.0'

Issues and Steps to Reproduce

1. Simple View Row with Picasso Image on background with positionType(YogaPositionType.ABSOLUTE) and few other Views on top.
2. Try to animate background ImageView from 0x scale to 1x> scale (including interpolation).

Actual Behavior

Background View has no restrictions to go out of parent, during animation. Gif above, showing the issue. Note 1. Setting params for parent Views like size, cllip children, parent, etc doesn't work. Note 2. By manually setting scale (not animation) to the Background Image (for ex. 2f) will work Ok! Image would be scaled inside it's bounds.

Expected Behavior

Background Image should not go outside it's bounds. Only in case of setting other params, like clip to children, parent, etc.

Link to Code

Will be added, if necessary,

Regards,

[colriot]

Hello @GensaGames . It's hard to understand precisely what kind all layout you have, because in Litho hierarchy we normally try to get rid of views, and our components will end up being drawables. So, it may happen that there will be no actual parent view in provide bounds for children.

You may check whether the same situation persist if you call .wrapInView() for a parent, to guarantee that it will end up turning into a View.

If this won't work, I'd love to see the specific code for that.

[GensaGames]

Doesn't work with this settings as well. Below the layout used in background image with scale animation. The same as shown in the Gif above. And you can see, it's pretty simple.

@LayoutSpec(events = [AdapterItemClickEvent::class])
object AdapterItemSpec {
    private const val TRANS_K = "Kenburns"

    @JvmStatic
    @OnCreateLayout
    fun onCreateLayout(c: ComponentContext, @Prop info : InfoObject): Component {

        val controller: DraweeController = Fresco
            .newDraweeControllerBuilder()
            .setUri(info.imageUrl)
            .build();

        val animatedImage =  FrescoImage
            .create(c)
            .placeholderImageRes(R.color.colorImagePlaceHolder)
            .widthPercent(100f)
            .heightPercent(100f)
            .scale(2f)
            .transitionKey(TRANS_K)
            .placeholderImageScaleType(ScalingUtils.ScaleType.FIT_XY)
            .controller(controller)
            .positionType(YogaPositionType.ABSOLUTE)

        val main = Column
            .create(c)
            .backgroundColor(Color.WHITE)
            .heightRes(R.dimen.grid_card_height)
            .wrapInView()
            .clipChildren(true)
            .child(
                animatedImage
            )
            .child(
                Text.create(c)
                    .backgroundRes(R.color.colorTransparentWhite)
                    .textColorRes(android.R.color.white)
                    .paddingRes(YogaEdge.HORIZONTAL, R.dimen.padding_text_medium)
                    .textAlignment(Layout.Alignment.ALIGN_CENTER)
                    .text(info.name)
                    .maxLines(1)
                    .textSizeAttr(android.R.attr.textSize)
                    .textSizeRes(R.dimen.text_size_large)
            )
            .child(
                Text.create(c)
                    .text(info.contact)
                    .paddingRes(YogaEdge.HORIZONTAL, R.dimen.padding_text_medium)
                    .textColorRes(android.R.color.white)
                    .textAlignment(Layout.Alignment.ALIGN_CENTER)
                    .textStyle(Typeface.BOLD)
                    .textSizeRes(R.dimen.text_size_low)
            )

            .child(
                Text.create(c)
                    .text(info.summary)
                    .paddingRes(YogaEdge.HORIZONTAL, R.dimen.padding_text_medium)
                    .textColorRes(android.R.color.white)
                    .textSizeRes(R.dimen.text_size_low)
            )
            .build()

        return Column.create(c)
            .paddingRes(YogaEdge.ALL, R.dimen.generic_padding_low)
            .wrapInView()
            .clipChildren(true)
            .child(
                Card
                    .create(c)
                    .cornerRadiusRes(R.dimen.rounded_grid_corners)
                    .wrapInView()
                    .clipChildren(true)
                    .shadowElevationRes(R.dimen.header_elevation)
                    .clickHandler(AdapterItem.onViewClicked(c))
                    .content(main)
                    .build()
            ).build()
    }

    @OnCreateTransition
    fun onCreateTransition(c: ComponentContext): Transition {
        return Transition.create(TRANS_K)
            .animate(AnimatedProperties.ALPHA)
            .appearFrom(0f)
            .animate(AnimatedProperties.SCALE)
            .appearFrom(0f)
    }

}

[GensaGames]

Any updates on this?

Regards,

[colriot]

@GensaGames, sorry, it's was a packed time during recent weeks.

@topwu, will you be able to look at this, if you have time?

[GensaGames]

@topwu Looking forward to your response,

Thanks,

[wujingwe]

Hi, according to your sample code, I think the root cause is because of .scale(2f). Is it possible to prevent using it, or use Fresco ScaleTypes instead?

[GensaGames]

@topwu

Scale up to 2x, it's exactly what I'm trying to do. Using this, I would like to create first animation in for small part of the image, and then (later, not in this sample), apply transition to make KenBurns effect.

Furthermore, Freso ScaleTypes is completely different thing here. I'm talking about transition complete View with image. Not Image position on a Fresco View! To make animation, as described in the documentation.

[GensaGames]

@topwu Any updates on this?

Thank you,

[wujingwe]

Sorry, quite busy this week, not sure if it's a limitation in our scale animation APIs, I'll investigate a bit more early next week.

[GensaGames]

@topwu @colriot

Anything new on this? Waiting for your updates.

[GensaGames]

Hello,

There is project, to demonstrate the problem, Located here https://github.com/GensaGames/Sample-NotSunflower.git with branch master-litho-bug,

Please check it our, and let us know about updates,

[GensaGames]

Did you have chance to take a look?

Thanks

[GensaGames]

Is anybody can check resolve this bug?

[GensaGames]

@topwu @colriot

Hello guys,

Any updates on this?

[colriot]

@GensaGames sorry, we are quite busy finishing stuff at the end of the year. I don't think we would be able to look at this before the next year.

[GensaGames]

@colriot Thanks for the update,

Can you please at least confirm it's at issue, and you will work on this?

[colriot]

@GensaGames we still need to confirm it, but if it's an issue (and it looks like one to me), we will estimate the fix/workaround options.