问题标签 [vivus]

我正在尝试为这条线设置动画，使其从上到下开始，然后右转以使用 Vivus.js 绘制自身。但是，图形似乎没有动画，我不知道为什么..也许有人对 SVG 绘制动画有一些经验？这是笔：https ://codepen.io/anon/pen/mLzYyE

代码：

所以我有这个 GSAP 时间线，它应该首先为淡入文本设置动画，并且 onComplete 它应该触发它所做的 Vivus.js 构造函数。但是，SVG 元素在动画发生之前是可见的，这不是预期的效果。我试图以某种方式操纵它，但问题仍然存在 - 我会错过什么..？

所需的效果是在绘制自身时淡入..

这是一支笔：https ://codepen.io/anon/pen/ELGawo

我正在尝试在DocumentReady上绘制一个很棒的字体图标，但是我遇到了一些问题。

我想到的图书馆是Vivus。还有一个用于连接 Font Awesome 和 Vivus 的库：FontAnimate。

我认为简单的游戏，但我似乎无法填充我正在绘制的图标。此处示例：https ://jsfiddle.net/m1og17yz/

填充发生在动画结束之前，并且填充根本没有动画。这里有一个类似的 Github 问题，所以我尝试了一下，因为它已经解决了。

但这似乎仍然不起作用，因为我得到了这个https://jsfiddle.net/m1og17yz/2/，因为您可以看到绘图结束和填充之间存在延迟。

我有一个 Angular 6 项目，我想要 SVG 动画。

Vivus 是一个我想引入的 JavaScript 类。

第一步显然是在项目文件夹中运行“npm install vivus”。

我猜在那之后我需要在我的 app.module.ts 文件中添加这样的内容：“import * as Vivus from 'Vivus';” 和我的导入数组中的“Vivus”。

我需要采取哪些步骤才能在我的 Angular 项目中包含 Vivus SVG 动画？

我使用 vivus.js 为 SVG 制作动画。我想知道在性能方面将它与交叉点观察器结合使用的最佳方法是什么。

在我的页面上有几个部分，包括内联 svg。这些 svg 应该在向下滚动页面时进行动画处理，在离开视口时停止并在再次观察容器时重新启动。

它有效，但我不确定这是否是构建 vivus 对象并以这种方式一次又一次地播放它们的最佳方式。这些解决方案似乎使 Firefox 性能崩溃..

我欢迎所有意见、建议和改进建议。

我创建了一支笔：

https://codepen.io/Milenoi/pen/JBxgOG

请注意：没有 Polyfill 可以在 Chrome + Firefox 中使用

如您所见，动画没有按预期工作，svg 动画在离开观察者时应该停止并重新开始 wenn 元素再次相交..

是否存在使用 vivus.js 为参考背景 svg 设置动画的某种方法？我正在尝试使用它。我在官方文档中找到了这段代码，但我不知道这是否可能。看下面的代码：

有人有什么解决办法吗？如果您知道在没有 vivus.js 的情况下为参考背景 svg 设置动画，请告诉我。

编辑：此方法仅在我的 div 元素中注入 SVG 文件。

我正在为 vivus.js 库使用 react 组件，但不知道如何使用它的方法，例如，我想在幻灯片更改时调用 myVivus.play()，但不确定如何使用。我只是在学习反应，因为我知道我需要公开组件的方法才能在渲染中使用它，但到目前为止我所有的尝试都没有成功。任何帮助深表感谢！谢谢你。

最近开始学习 JavaScript 并决定查看一些动画，然后我找到了 VivusJS。我得到了一个简单的 SVG 图像来做一些测试，看看它是如何工作的。我正在尝试使用最简单的示例，但似乎什么也没发生。

控制台中没有错误，当我调试时，据我所知，一切似乎都很好。console.table(myVivus.map)似乎也打印了正确的信息，但在一天结束时，没有动画发生。我不知道一切是否正常，并且说动画真的很快，或者我应该在我的代码中添加其他东西。

这是我所拥有的（style.css为空）：

JAVASCRIPT：

HTML：

任何帮助，将不胜感激！

我正在尝试为 SVG 线设置动画，当我在使用 Vivus 对其进行动画处理后尝试修改线的坐标时会出现问题。我的目标是修改线的坐标（例如改变它的大小、位置）然后对其进行动画处理，并多次执行上述过程。

更改 SVG 线的属性的问题

1. 创建 Vivus 对象 (new Vivus("win_line_svg", {type: 'oneByOne', duration: 30});)
2. 尝试更改 SVG 行的属性（x1，y1，x2，y2）出错（无法读取未定义的属性 'baseVal'）

在创建 Vivus 对象之前尝试调整线条的大小会起作用。

您可以在 JSFiddle 中重现该问题：

1. 点击播放按钮
2. 单击“调整大小”按钮 =>（无法读取未定义的属性“baseVal”）

我正在使用vivusjs库为 SVG 设置动画，我想为图像文件或形状沿动画 SVG 设置动画。如下所示：

白线是动画 SVG 路径，绿笔是我的图像文件。Vivusjs我在图书馆需要它。