adospace
commented
1 year ago Hi, the multiple render calls that you see are not caused by the animation but instead are required by the call to SetState(s => s.Status++): you are actually requesting a new render for every render. RxAnimations require that you use the SetState(s=>..) but the component is refreshed only once just to update the state: the animation works under the hood without re-render the complete component but just updating the dependency property marked with the WithAnimation() method.
Try this:
public override VisualNode Render()
{
Debug.WriteLine("Render called");
return new ContentPage
{
new Grid("auto,auto,auto,auto", "*,*")
{
new Label("Tap on each box").GridColumn(0).GridRow(0).GridColumnSpan(2).VCenter().HCenter(),
new Label("Works --> invalidateComponent TRUE").GridColumn(0).GridRow(1).VCenter().HCenter(),
new BoxView().GridColumn(0).GridRow(2)
.HeightRequest(80).WidthRequest(80)
.Color(Colors.Green)
.Opacity(State.IsExpanded_Green ? 1 : 0.2)
.HeightRequest(State.IsExpanded_Green ? 250 : 80)
.WithAnimation(easing: Easing.Linear, duration: 1000)
.OnTapped(() =>{
SetState(s => s.IsExpanded_Green = !s.IsExpanded_Green);
}),
}
.VCenter().HCenter()
.RowSpacing(25).ColumnSpacing(25)
.Padding(30, 0)
};
}you should see only one message "Render called".
Regarding the animation from bottom to top, it's a layout issue in your code: setting Auto row height + VCenter() you are asking the grid to unlarge from the center to accommodate its content: try use HStart() on the grid.
MattePozzy
Hi, I have created a basic animation but to make it works I need to invalidate all the components and re-render the enteire page, otherwise the animation doesn't work.
I have many heavy load pages, so I can' re-render the page.
There is a way to set invalidateComponent to false and make the animation works?
Here a sample.
Thank you.
EDIT: also there is a way to animate the height only in one direction (eg. only from bottom to top)? Thank you.