search

landxcape / animated_marker

The AnimatedMarker widget is a Dart class that animates the movement of markers on a Google map.
MIT License
2 stars 1 forks source link

Marker flickering during animation #7

Open orkun1675 opened 1 month ago

orkun1675 commented 1 month ago

The marker is flashing (dissapearing and reappearing in the next frame) when it is being animated.

This was discovered a month ago using v0.0.7.

Are you aware of this issue? Or maybe it has something to do with our implementation?

I'll try to supply a minimum repoduceable example when I get the chance.

landxcape commented 1 month ago

Hi, are you using the latest renderer for Google Maps? It's a known issue. Let me know if this issue persists even when using the legacy renderer.

landxcape commented 1 month ago

I just updated the package to use the latest flutter and dependencies on v0.0.8

orkun1675 commented 4 weeks ago

Thanks @landxcape !

I've tested with 0.0.8 using the example app on Android Emulator, iOS Emulator, Pixel 8, iPhone SE. The only one that had the flickering issue was Pixel 8.

https://github.com/user-attachments/assets/c200cc6f-2403-4f62-8a65-fedbc4306e52

I have not tried switching to the legacy renderer. I didn't know this was an option until now. Would you recommend doing so, especially given the legacy renderer deprecation announcement? Are folks still using the legacy renderer for production apps?

Issues I was able to find regarding the flickering issue:

orkun1675 commented 4 weeks ago

I've tested with the legacy renderer which does fix the issue.

See: https://github.com/landxcape/animated_marker/compare/main...orkun1675:animated_marker:main

However, this workaround changes the look and feel of the map quite drastically:

https://github.com/user-attachments/assets/ace84b7a-c4df-4914-9e34-856a218655ca

landxcape commented 4 weeks ago

Just to confirm did updating to v0.0.8 fix the issue with the default renderer? because when I made this, the default was still the legacy renderer and I had that issue when I tried to manually change it to the latest. so I updated the google_flutter_map to its latest on v0.0.8 and recreated the example app which did not have this flickering issue while testing on my phone (Oneplus 7)

landxcape commented 4 weeks ago

https://github.com/user-attachments/assets/6c373b19-c711-4ef3-b277-084db7769dc8

landxcape commented 4 weeks ago

Ohh okay, the issue is still there when zooming and panning around. for now, the issue is still with the latest renderer. Another workaround should be reducing the fps. I'll try that and see if it solves the issue, but that will create another one of having low fps.

orkun1675 commented 4 weeks ago

Thanks for looking into this! If low FPS can be used as a workaround that would work for our use case.

landxcape commented 4 weeks ago

Hi, I have pushed the latest update, v0.1.0. Here #8, I have removed the use of AnimationController, which does not let us change FPS, and completely switched to Timer and StreamController while properly handling Timer's disposal. Did lowering the FPS have any improvements in your context besides performance gain?

orkun1675 commented 3 weeks ago

Thank you for your work on this @landxcape !

I've tested with 0.1.0 and found that the flicker is still there for FPS values 30, 10, and 5; but dissapears at FPS values 2 and 1. Note that flickering decreases drastically as FPS is lowered.

However, since flickering is so distracting from a UX point of view we won't be turning it on for Android until Google Maps fixes the underlying bug.

I've also noticed a regression with 0.1.0: the marker appears a few seconds late (after the map loads). This makes it appear like the marker is missing for a few seconds.

landxcape commented 3 weeks ago

Thank you too for the suggestions and tests as well.

so, Is it working fine on IOS?

I'll look into the markers appearing late.

landxcape commented 3 weeks ago

I forgot to add animated markers to the markers stream before the animation started in v0.1.0. So I fixed it by adding it to initState with addPostFrameCallback to ensure all the markers are immediately added to the stream after the map builds in v0.1.2.

You could also try the legacy renderer for Android if it does not impact much but I have experienced performance issues with legacy. I hope the Flutter team fixes this soon.

orkun1675 commented 3 weeks ago

Thanks for the quick turnaround!

so, Is it working fine on IOS?

Yes, no noticeable issues on iOS.

So I fixed it by adding it to initState with addPostFrameCallback to ensure all the markers are immediately added to the stream after the map builds in v0.1.2.

I've tested with 0.1.2 and the marker delay is fixed for staticMarkers but continues to be a problem for animatedMarkers.

Inihood1 commented 3 weeks ago

I am using the latest version: 0.1.2 and I wrapped google map with animated_marker and streambuilder. when there is an update in the stream, the markers flicker on the screen. Also, the markers dont move from one location to abother, rather, they go around in circles

Inihood1 commented 3 weeks ago

I know this isnt the right thing to say in this thread but can you make it animate along a path I am trying to get the uber car animation

landxcape commented 3 weeks ago

hi @Inihood1, could you create a new issue for this? as for the StreamBuilder, is the animation duration less than the stream update interval? if the animation duration is longer than the updates from the stream, the markers will lag and won't be able to follow the path properly, it will take the shortest path from where it is in the animation to the new position.

landxcape commented 3 weeks ago

Hi @orkun1675, I couldn't replicate the same issue but have adjusted the initial animated markers not properly working when they are updated before the animation ends. Could you check if the issue still exists on v0.1.3?

orkun1675 commented 2 days ago

Hi @landxcape, Marker delay is fixed in 0.1.3 but came back in 0.1.4. We were able to upgrade to 0.1.3. for now.