New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[charts] smoother path animation #12918
Conversation
Deploy preview: https://deploy-preview-12918--material-ui-x.netlify.app/ |
Didn't notice. With the points data, adding the mask back would be quite simple: |
I'm not in favor for two reasons: maintenance and performances MaintenanceI'm not sure about this PR, because it seems more complex than the dummy clipping and I fear it adds more edge cases to handle. Maybe it's because I don't have a strong design sensibility, but the ratio UI improvement vs the risk of adding something complex to maintain does not feel good. PerfIt seems to deteriorate performances when rendering the line chart for the first time: I checked in the docs preview performances when resetting a demo and it shows some blocking time that I don't see in production I tried in codesandbox with a state to toggle with/without data and this PR adds a delay to show the data
|
…into feat-path-animation-smooth
I have added a commit to compute the points lazily as the animation runs, and the performance is terrible. It's at least 2ms for each point, very ugly, doesn't run smoothly. Not sure why it's so slow. The geometry browser APIs are all terrible. The best solution to get a smooth animation would be to use a JS math library (like 2d-geometry) but that's too big to include here. I'll close it, feel free to pick it up for scatter plot if you think it's worth it. |
Thanks for the additional investigation 🙏 |
I was checking the charts and I noticed the path is animated via a clipping mask rather than a path animation. You could use this technique to animate it more smoothly. It uses
SVGPath.getPointAtLength(n: number)
to create an animated path from a set of linear segments that sample the original path every N pixels.