[GitHub] [echarts] echarts-bot[bot] commented on issue #16302: [Bug] Animation issue when using bar-race and timeline together 动态排序柱状图+timeline

[GitBox <gi...@apache.org>]

echarts-bot[bot] commented on issue #16302:
URL: https://github.com/apache/echarts/issues/16302#issuecomment-1002483935


   @ixonya It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
   <details><summary><b>TRANSLATED</b></summary><br>
   
   **TITLE**
   
   [Bug] Animation issue when using bar-race and timeline together Dynamic sorting histogram + timeline
   
   **BODY**
   
   ### Version
   
   5.2.2
   
   ### Link to Minimal Reproduction
   
   https://codepen.io/ixonya/pen/dyVdGba
   
   ### Steps to Reproduce
   
   1. Use timeline to achieve dynamic sorting of histograms (that is, put data at different time points in the option.options array in advance, instead of using setInterval/setTimeout to dynamically update the data)
   2. To make the dynamic sequence animation smooth, set option.animationDuration, option.animationDurationUpdate, option.timeline.playInterval to be consistent,
   That is, every time the timeline switches to a point in time, the histogram starts to render the data at that point in time. After the animation of the data change is completed, the timeline just cuts to the next point in time, seamlessly connecting with the next data change animation. Suppose these three are 2000.
   3. According to the official dynamic sorting histogram tutorial, set the Y-axis sorting time option.yAxis.animationDuration and animationDurationUpdate to 300. From the perspective of animation effects, 300 is also a more appropriate value.
   
   ### Current Behavior
   
   Two problems were found:
   1. When timeline is switching time points, the time interval is often greater than timeline.playInterval (2000), resulting in stagnation of the entire animation. In this example, there was a significant pause between 2008-2009 and 2009-2010. I guess this is related to the Y-axis sorting. The timeline may need to wait for all sorting animations to complete before switching. However, when calculating the sorting time, 2000 is used instead of the actual value of 300. As a result, the sorting has actually been completed, but the timeline is still waiting. After changing the animation time of yAxis to 2000, the bug disappeared and the animation became smoother. But the sort animation set to 2000 is a bit too slow.
   2. When the timeline is switching time points, there are often problems with the animation of the time axis part. The big dot does not have an animation and jumps directly to the next time point, and then the axis has a lagging coloring animation.
   
   ### Expected Behavior
   
   1. Timeline switches the time on time at timeline.playInterval (2000), so that the whole sequence animation is smooth and without stagnation.
   2. The animation at the time when the timeline is switched remains normal.
   
   ### Environment
   
   ```markdown
   -OS: win 10
   -Browser: chrome
   -Framework: none
   ```
   
   
   ### Any additional comments?
   
   _No response_
   </details>


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org