How to handle Transform Animation on listview (shopping basket sample)?

Emil Alipiev 286 Reputation points
2020-11-19T00:18:16.74+00:00

I have created a transform animation similar to below using xamarin.forms. I achieved that using a behavior on a view cell of the lisview. But what actually happen is, item of the view is literally moving to the basket using the code below and there appears a gap where the item is moved. I can restore it with another translateto animation using x:0 y:0. how can we dynamically achieve this without having such temporally gap on a listview?
I can simply create a copy of selected item's view cell and move it. I guess this is what it happens on the gif below? but is it not too expensive to create such copy of view every time? Anyone knows a better strategie ? or any sample for xamarin.forms

await AssociatedObject.Animate(new ScaleToAnimation() { Delay = 200, Duration = "1500", Scale = 2, Easing = EasingType.SinIn });
_ = AssociatedObject.Animate(new TranslateToAnimation() { Delay = 0, Duration = "1000", TranslateX = X, TranslateY = Y, Easing = EasingType.SinOut });
await AssociatedObject.Animate(new ScaleToAnimation() { Delay = 0, Duration = "1200", Scale = 0, Easing = EasingType.SinOut });
_ = AssociatedObject.Animate(new TranslateToAnimation() { Delay = 0, TranslateX = 0, TranslateY = 0 });
_ = AssociatedObject.Animate(new ScaleToAnimation() { Delay = 0, Scale = 1 });

40867-n4mmc.gif

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,362 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.