我有这个网站,我需要能够“快照”的动画SVG在其动画的不同阶段(缓慢的过程)。同时,动画正在运行(快速处理)。因此,我正在创建一个克隆,在后台,我在不同的动画阶段序列化SVG,并将生成的图像上传到服务器。
但是,在后台运行的所有这些都非常慢,而且往往会减慢原始SVG的动画速度。在一个网络工作者身上能做到这一切吗?如果有必要,工作人员可以自行获取SVG源文件。
我已经知道传递DOM元素是不可能的:
//main.js
var s = new XMLSerializer();
worker.postMessage(s.serializeToString(svg))
//worker.js
par
我现在正在使用Vivus.js制作svg动画。
它是一个svg的线条动画,带有一些文本描述,在SVG的文本标签内。
因为vivus.js无法处理文本动画,所以我只需先将文本的不透明度设置为0,而在svg行动画完成后,我将文本的不透明度设置为1以使其可见。
以下是我在.js中导入vivus.min.js后的主要代码
// Making a svg line animation through Vivus.js, which works fine
var svg_product =
new Vivus('product', {
type: 'scenario
是否存在用vivus.js动画化参考背景的方法?我在试着用它。我在官方文档中找到了这段代码,但我不知道这是否可能。请看下面的代码:
HTML
<section id="svg-bg" class="materiais-topo">
<!-- some elements here -->
</section>
CSS (SASS)
.materiais-topo {
background-color: $green-fluo;
background-image: url('../im
我有一个非常简单的svg.js动画,只要页面打开,我就想在循环中运行。在浏览、或页面时,我都找不到任何东西。没有循环的动画的工作版本可以找到。重要的js是:
//create the svg element and the array of circles
var draw = SVG('canvas').size(300, 50);
var circ = [];
for (var i = 0; i < 5; i++) {
//draw the circles
circ[i] = draw.circle(12.5).attr({
fill
如何使SVG.js路径动画在移动和调整大小时遵循直线?
有两个部分的动画。首先,对SVG路径中的文本进行放大并移动到矩形的中心。之后,它需要缩小到原始大小,并移动到矩形的另一角。
第一部分根据需要进行动画,但第二部分文本移出查看区域,然后返回。
let draw = SVG('reading-area');
var group = draw.group();
original = group.svg(getSvgText());
original.animate(1000, '-', 0).move(229, 164).scale(3);
original.a