Mitigate flickering on color animations #37925
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
CLA Signed
|
This pull request was exported from Phabricator. Differential Revision: D46778405 |
Base commit: 84fc79f |
Summary: Pull Request resolved: facebook#37925 Vectorized animations (XY, Color) are split into multiple animations for each component that execute in parallel. Upon each of these animations completing, a rerender is triggered to sync the state back to the JS AnimatedValue nodes. The problem with this is that calling update() on AnimatedProps when each animation completes results in potential flickering as all animations that are part of the vectorized animation may not have completed yet. For example, only the animation for the red channel of an animating color may have been completed, resulting in a temporary red color being rendered. So, for now, ignore AnimatedProps that use a vectorized animation. Follow up will properly address vectorized animations - only call the update() when all animations complete. Changelog: [General][Fixed] - Mitigate flickering on color animations Reviewed By: rshest Differential Revision: D46778405 fbshipit-source-id: bad196129e6ce9ea6684437541556638fe7b0669
genkikondo
force-pushed
the
export-D46778405
branch
from
a68159c
to
185446f
Compare
|
This pull request was exported from Phabricator. Differential Revision: D46778405 |
|
This pull request has been merged in 5f8bbf2. |
rshest
added a commit
to rshest/react-native
that referenced
this pull request
Jun 24, 2023
Summary: # Changelog: [Internal] - Reverting facebook#37925 as causing other animation issues. Differential Revision: D46985440 fbshipit-source-id: 8a638eb4a0f9247387d1486132576af665ce7b1a
mxteroy
pushed a commit
to mxteroy/react-native
that referenced
this pull request
Jun 29, 2023
Summary: facebook#37925 mitigated an issue where vectorized animations (e.g. AnimatedColor) would flicker. This issue was never present in Android. In face, it somehow introduced the issues it solved for iOS onto Android. ## Changelog [General][Fixed] - AnimatedColor flickering on Android Differential Revision: D47114536 fbshipit-source-id: 3785d663808236bbd15ff49702564e5fe94d77e1
facebook-github-bot
pushed a commit
that referenced
this pull request
Jul 7, 2023
Summary: Pull Request resolved: #38118 #37925 mitigated an issue where vectorized animations (e.g. AnimatedColor) would flicker. This issue was nearly not as present in Android (flickering rarely happens). In fact, it greatly increased the flickering issues on Android. This will make it so that AnimatedProps that use vectorized animation are only ignored on iOS until a more robust fix is available. ## Changelog [General][Fixed] - AnimatedColor flickering on Android Reviewed By: javache Differential Revision: D47114536 fbshipit-source-id: a61bb11a316594d12c070a3149863fe5973745c5
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Vectorized animations (XY, Color) are split into multiple animations for each component that execute in parallel. Upon each of these animations completing, a rerender is triggered to sync the state back to the JS AnimatedValue nodes.
The problem with this is that calling update() on AnimatedProps when each animation completes results in potential flickering as all animations that are part of the vectorized animation may not have completed yet. For example, only the animation for the red channel of an animating color may have been completed, resulting in a temporary red color being rendered. So, for now, ignore AnimatedProps that use a vectorized animation.
Follow up will properly address vectorized animations - only call the update() when all animations complete.
Changelog:
[General][Fixed] - Mitigate flickering on color animations
Differential Revision: D46778405