我正在使用 javascript 在动画 (vivus.js) 完成后显示 svg 文本

Question

我现在正在使用 Vivus.js 制作 svg 动画。

这是一个 SVG 线条动画，在 svg 的文本标签内有一些文字描述。

因为vivus.js无法处理文字动画，我干脆先把文字的不透明度设置为0，等svg线条动画结束后，再把文字的不透明度设置为1，使其可见。

这是我在 codepen 中导入 vivus.min.js 后放置的 .js 代码的主要部分：

// Making a svg line animation through Vivus.js, which works fine

var svg_product =
new Vivus('product', {
    type: 'scenario',
    duration: 100
});

// Make the <g id="text"> invisible before the animation is finished

var hidefirst = document.getElementById("text");
hidefirst.style.opacity = 0;

// Detect if the line animation is finished using strokeDashoffset

var line = document.getElementById("XMLID_202_");
var lineDetect = window.getComputedStyle(line).strokeDashoffset;

// After the line animation is finished, make <text> visible
// But the code seems doesn't work

if (lineDetect == "0px") {
    hidefirst.style.opacity = 1;
}

代码的最后一部分是我的问题。

我认为代码不起作用，因为我写的 "if condition" 是在页面加载的最开始评估的，即 False。

因此我的问题是，如何正确追踪 svg 行的 strokeDashoffset，这样我就可以在 [= 之后将文本的不透明度设置为 1 40=](line).strokeDashoffset 变为“0px”?

谢谢！

Answer 1

您不需要检测动画是否结束，Vivus 构造函数采用第三个参数，它是在动画结束时调用的函数。

var svg_product =
  new Vivus('product', {
              type: 'scenario',
              duration: 100 },
            function() {
              // called after the animation completes
  })

您可以使用那个或播放方法，例如

svg_product.play(function() {
  // called after the animation completes
})

全部来自Vivus github documentation

我正在使用 javascript 在动画 (vivus.js) 完成后显示 svg 文本

I'm using javascript to make svg text show up after the animation (vivus.js) is finished

javascript

svg

vivus