clipChildren for Transition

[liufsd]

Version

master

Issues and Steps to Reproduce

child larger than parent and enable clipChildren , wish Animation will be right.

Record_2021-05-31-13-42-08.mp4

Expected Behavior

show right clip height when transitioning.

Link to Code

  @LayoutSpec
public class BoundsAnimationComponentSpec {

  @OnCreateLayout
  static Component onCreateLayout(
      ComponentContext c,
      @State boolean autoBoundsTransitionEnabled) {
    return Row.create(c)
            .backgroundColor(Color.RED)
            .child(Row.create(c).widthDip(200).heightDip(200).backgroundColor(Color.BLUE).clipChildren(true)
                    .child(Row.create(c).backgroundColor(Color.YELLOW).heightDip(autoBoundsTransitionEnabled?110: 340).clipChildren(true).widthDip(200).clickHandler(BoundsAnimationComponent.onABTClick(c))).build())
            .build();
  }

  @OnEvent(ClickEvent.class)
  static void onABTClick(ComponentContext c) {
    BoundsAnimationComponent.toggleABTSync(c);
  }

  @OnUpdateState
  static void toggleABT(StateValue<Boolean> autoBoundsTransitionEnabled) {
    autoBoundsTransitionEnabled.set(!autoBoundsTransitionEnabled.get());
  }

  @OnCreateTransition
  static Transition animate(ComponentContext c, @State boolean autoBoundsTransitionEnabled) {
    return Transition.allLayout().animator(Transition.timing(2000));
  }
}

[nicous]

Hey @liufsd, sadly this is not possible as we always set clip children to false when running animations. There's no support for something like this. The only solution would be to wrap the animating component within a MoutSpec.

[liufsd]

hi @nicous thanks for the reply! But maybe mountspec doesn’t support width or height changed animation . Width or height changed will be changed others node size at same time.

[liufsd]

And second question, when I change the width or height use by layout, it will be not smooth at some time . It Looks like show end size at first and then translated to new end size!

[nicous]

Hi @liufsd, the mountspec idea was to create a framelayout with a lithoview and animate the component in the lithoview, not the mountspec.
I don't understand the second question. Regarding why the animation jumps to full lengths before animating down to 110 height it's because we are setting clip children false automatically and that shows the full 340 dp.

[liufsd]

@ngorogiannis hi ~.

"0:3"s or "0:6"s , you will found the 'second question'

SVID_20210608_162507_1.mp4

@LayoutSpec
public class BoundsAnimationComponentSpec {

  @OnCreateLayout
  static Component onCreateLayout(
          ComponentContext c,
          @State boolean autoBoundsTransitionEnabled) {
    return  Row.create(c).heightDip(autoBoundsTransitionEnabled?110: 200).widthDip(autoBoundsTransitionEnabled?110: 200)
            .backgroundColor(Color.RED).clickHandler(BoundsAnimationComponent.onABTClick(c))
            .child(Column.create(c).backgroundColor(Color.BLUE).widthDip(50).heightDip(100)
                    .child(Row.create(c).backgroundColor(Color.YELLOW).widthDip(50).heightDip(50)).build())
            .build();
  }

  @OnEvent(ClickEvent.class)
  static void onABTClick(ComponentContext c) {
    BoundsAnimationComponent.toggleABTSync(c);
  }

  @OnUpdateState
  static void toggleABT(StateValue<Boolean> autoBoundsTransitionEnabled) {
    autoBoundsTransitionEnabled.set(!autoBoundsTransitionEnabled.get());
  }

  @OnCreateTransition
  static Transition animate(ComponentContext c, @State boolean autoBoundsTransitionEnabled) {
    return Transition.allLayout().animator(Transition.timing(autoBoundsTransitionEnabled? 2000: 1500));
  }
}

[nicous]

Hey @liufsd
Just found this again. I think this is a known problem when you try to animate first component in the tree.