-
Notifications
You must be signed in to change notification settings - Fork 19.6k
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
introduce new keyframe based animation to graphic component and custom series #16225
Conversation
support multiple keyframe animation
Thanks for your contribution! The pull request is marked to be Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the This PR depends on ZRender changes. Please update the ZRender dependency to the latest nightly version including this change, which takes place everyday at 8:00 UTC (16:00 Beijing Time). |
Seems the unit test didn't pass for some type errors. |
UT is fixed |
@plainheart Seems it's because keyframe animation is conflicted to the state animation. |
Clean the code a bit
@plainheart Improved it a bit in the PR ecomfe/zrender#859. Now the behavior is: hover.mov |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good!
Congratulations! Your PR has been merged. Thanks for your contribution! 👍 |
This pull request is in the type of:
What does this PR do?
This PR includes two major features:
Transition in graphic component.
We introduced property transition in custom series in #12775.
It allow us applying complex transform/shape/style transition to the elements when data is updated. Even more, we can use
enterFrom
andleaveTo
to configure theenter
andleave
animation.In this PR we also brings this flexible transition option to the
graphic
component. Here is an simple example:As we can see, the option keeps the same as the custom series. To make the transition more usable. We add enhancement:
transition: 'all'
to configure all properties can have transition animation.Enumerate the properties in the transition option can be tedious. We can now use the keyword
'all'
on thetransition
configuration if we don't wan't to care about which property can have the animation.style
,shape
,extra
in the top levelenterFrom
andleaveTo
For example:
We provide
enterAnimation
,updateAnimation
,leaveAnimation
to configure the animationduration
,easing
,delay
per element.For example:
All these three enhancements will be available in both graphic component and custom series.
New keyframe animation API
Transition animation only applies when data is created, changed or removed. It only has start and end state and will only run once.
In order to providing more complex multiple keyframe looped animations. We introducing a brand new keyframe animation API to the custom series and graphic components in this PR.
We can use it to do things like:
Interface
Examples
Text animation
Code:
Result:
logo.mov
Procedural wave animation
Code:
Result:
wave.mp4
Marker jump effect
Use keyframe based animation in the custom series to have more complex marker effect.
Code:
Result:
Screen.Recording.2021-12-17.at.2.45.54.PM.mov
Lottie animation
TBD
Misc