ReadYou icon indicating copy to clipboard operation
ReadYou copied to clipboard

Animating article items being dismissed

Open savvasdalkitsis opened this issue 1 year ago • 16 comments

This will make items being swiped away animate the rest of the list so there is no jarring jump when the article is removed

savvasdalkitsis avatar Apr 18 '24 00:04 savvasdalkitsis

Whoa! Never thought it's that easy.. Works fine.

Could you also apply this to the publication date headers? In the case shown below these are not as smooth.

https://github.com/Ashinch/ReadYou/assets/110673332/f95041ef-5a4b-4ba6-a5ea-827f33e74cb6

Thanks, @savvasdalkitsis!

nvllz avatar Apr 18 '24 13:04 nvllz

This looks great.

Ashinch avatar Apr 19 '24 01:04 Ashinch

I pushed another change to animate the headers

savvasdalkitsis avatar Apr 19 '24 09:04 savvasdalkitsis

@savvasdalkitsis new release of compose animation has introduced addition/deletion animation for list items animateItem(), you can give it a try

JunkFood02 avatar Apr 19 '24 10:04 JunkFood02

Unfortunately I noticed that the animation tends to cause blank gaps on dismiss.

https://github.com/Ashinch/ReadYou/assets/110673332/6263cd35-3db0-46ef-bd04-d9b16b767dbe

It's kinda random, sometimes it works well.

nvllz avatar Apr 22 '24 15:04 nvllz

@nvllz i cannot replicate it locally but i updated to the latest compose bom in case there is a bug fix in there that addresses this. can you try it and see if the issue shows up again?

savvasdalkitsis avatar May 06 '24 12:05 savvasdalkitsis

It's the same, ugh. Does it really work as intended for you after you enter an article, go back to the flow page, and swipe out some articles? The animation works fine until I enter the reader view.

https://github.com/Ashinch/ReadYou/assets/110673332/71e753f3-cfde-4cfb-b62a-9e9b03d7a226

My Flow Page settings: bfd0bb22-a214-47a5-9738-b41642f81a9d

nvllz avatar May 06 '24 13:05 nvllz

@nvllz I believe updating to the alpha/beta versions of compose and using the new animateItem method that @JunkFood02 has mentioned fixes the issue.

The question now is if you are comfortable moving to a non stable version of compose. If not, we may have to wait until the method makes it to stable.

Also note that the last commit also introduces a weird interaction in the swipe box that the remove animation runs after the swipe box snaps back to the original position. Not sure if that would be a blocker for you

savvasdalkitsis avatar May 06 '24 21:05 savvasdalkitsis

Just tested the latest build and can confirm that article swiping seems to be fixed. But this kinda broke the sticky headers feature, as turning them on causes the flow page to throttle when scrolling.

Also note that the last commit also introduces a weird interaction in the swipe box that the remove animation runs after the swipe box snaps back to the original position. Not sure if that would be a blocker for you

Not sure what you mean. I just noticed that the article background is not colored when swiping, which looks even better now.

nvllz avatar May 06 '24 22:05 nvllz

I removed the animating of the stickyHeader to see if that fixes the performance issue you mentioned @nvllz (it looked the same to me on the emulator)

For the swipe issue i mentioned, see the video below:

https://github.com/Ashinch/ReadYou/assets/873077/d66f0cc2-a25f-4de1-8d7b-f3ecb04f3652

Previously, when you swiped an item away, it wouldn't bounce back and then dissapear, it would dissapear immediately. hope that makes sense

savvasdalkitsis avatar May 07 '24 07:05 savvasdalkitsis

It doesn't bounce back for me, tested with Galaxy S20+.

https://github.com/Ashinch/ReadYou/assets/110673332/14c24647-c088-4ea7-9b67-98f3c69bb8d0

nvllz avatar May 07 '24 07:05 nvllz

Well, that's weird 😅

savvasdalkitsis avatar May 07 '24 08:05 savvasdalkitsis

I removed the animating of the stickyHeader to see if that fixes the performance issue you mentioned @nvllz (it looked the same to me on the emulator)

Unfortunately it doesn't fix the problem, as the flow page keeps lagging with sticky headers enabled. But I figured out how to trigger this bounce back animation, using a longer swipe.

https://github.com/Ashinch/ReadYou/assets/110673332/0609e9d9-ebcf-4b83-a3d5-d286ddc3da2d

(Sticky headers disabled)

nvllz avatar May 07 '24 08:05 nvllz

Hi everyone, what’s the current status of this PR? I mean, can it be included in the next release?

Ashinch avatar Jun 19 '24 09:06 Ashinch

blocked by #772

JunkFood02 avatar Jun 19 '24 09:06 JunkFood02

I used a build with this PR included and it worked well. The only imperfection was the card sliding back animation on a long swipe, shown above.

nvllz avatar Jun 19 '24 09:06 nvllz