Question

我现在正在使用Vivus.js处理svg动画。

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

因为vivus.js无法处理文本动画，所以我只是先将文本的不透明度设为0，然后在svg线动画完成后，将文本的不透明度设为1使其可见。

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

  ImageView mImageView;
  PhotoViewAttacher mAttacher;
  mImageView = (ImageView) findViewById(R.id.iv_photo);
// Set the Drawable displayed

  Drawable bitmap = getResources().getDrawable(R.drawable.wallpaper);
  mImageView.setImageDrawable(bitmap);

// Attach a PhotoViewAttacher, which takes care of all of the zooming functionality.
// (not needed unless you are going to change the drawable later)

   mAttacher = new PhotoViewAttacher(mImageView);

// If you later call mImageView.setImageDrawable/setImageBitmap/setImageResource/etc then you just need to call

   mAttacher.update();

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

我认为代码不起作用，因为我写的“if条件”是在页面加载的最开始时评估的， False 。

因此我的问题是，如何正确追踪svg行的 strokeDashoffset ，这样我就可以在 window.getComputedStyle（line）.strokeDashoffset <之后将文本的不透明度设为1 / strong>变为“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文本

1 个答案: