Replace Ellipse-based Ripple with Composition API #316
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.
Just an experiment, which potentially can be a nice improvement for low-end devices.
Currently, Ripple effect is implemented with an Ellipse shape animated with multiple transitions on the UI thread.
This PR rewrites this effect to be executed on the Render thread, and UI thread is responsible for starting animation and triggering second step (fading out opacity).
On my local machine with Debug build (to make it slower), I can see animation working way better in navigation buttons, but not really different on normal buttons. It must be because navigation buttons are loading new pages on click, blocking UI thread for a moment - that's where Render thread animations work better, as they can be rendered and computed in parallel.
Breaking changes:
I also moved default properties from setters to the styled property definitions. Ideally, I would also avoid
"^:not(.no-transitions)"
selector, as it's going to be applied on each button, adding some styling overhead. But that's not in the scope of this PR.Math in this PR is a bit off, and the ripple effect doesn't fill whole parent. I guess the old code had Margin transition for that, but I haven't dive too deep.