F2 icon indicating copy to clipboard operation
F2 copied to clipboard

多个图表渲染时由于动画机制导致渲染错误

Open oustn opened this issue 5 years ago • 3 comments

  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

点击 update, 第二个单图渲染没有完成且结果错误

What is expected?

正确渲染单图

What is actually happening?

单图未正确渲染

Environment Info
f2 3.4.4
System Window10 17763.864
Browser Chrome 78.0.3904.108

怀疑是 src/animation/detail.js / src/animation/group.js 两个插件问题, timeline 使用了模块级别的 scopes,但是每个插件又会重新创建一个 timeline。当其中一个销毁时 timeline 会停止,如果这个时候有其他单图使用 timeline 且动画没有完成时,实际上销毁的 timeline 是其他单图的 timeline. 会造成渲染停止,渲染结果错误。

临时解决方案,修改源码打包:

  1. 使用一个引用计数器
let referenceCharts = 0
  1. 单图初始化时
timeline = timeline || new Timeline();
referenceCharts  += 1
  1. 单图销毁时
referenceCharts -= 1

if (referenceCharts <= 0) {
  timeline.stop();
}

oustn avatar Dec 09 '19 03:12 oustn

看其他的插件一般会创建独立的 controller, 但是不知道为什么动画 timeline 要使用模块级别的变量,如果是为了性能,写法又错误了。

像我这样使用同一个 timeline 会不会有问题?

oustn avatar Dec 09 '19 03:12 oustn

这个问题修复没,我现在3.8.10-beta.1版本多个图表动画也会异常

bluesEnao avatar Dec 20 '21 08:12 bluesEnao

这个问题修复没,我现在3.8.10-beta.1版本多个图表动画也会异常

这个库还有人维护吗。。。两年过去了

oustn avatar Dec 20 '21 09:12 oustn