Question

我正在尝试在一个SVG中的某些路径中模拟y轴之间的三维旋转。我找到了图书馆SVG3D https://code.google.com/p/svg3d/ 我试了一下。

问题是你只能控制每个“tick”的滴答间隔持续时间和增量（以弧度表示）（有一个setInterval定时函数调用执行旋转的transform（）函数。）

有一个toggleRotation函数，它的作用类似于播放暂停命令，但它不能让你控制路径的时间和旋转。

我的路径有以下示例代码：

<g id="anim_container" 
    z:xOrigin="0"
    z:yOrigin="0"
    z:zRatio="1000"
    z:sortAlgo="none" 
    z:rotationTime="60"
    onload="init(this);">
    <path
    d="M 460.2203,600.93365 248.25964,263.59573 C 248.63437,272.77915 249.10289,281.86852 249.66521,290.86388 250.03994,298.54799 250.32105,306.70032 250.50856,315.32088 250.88328,323.75461 251.07069,331.251 251.07079,337.81007 L 251.07079,600.93365 203.28125,600.93365 203.28125,204.84271 265.68876,204.84271 479.89835,544.42955 C 479.33579,535.24653 478.77356,526.06345 478.21166,516.88029 477.83651,509.00916 477.4617,500.48202 477.0872,491.29883 476.71206,481.92845 476.52465,473.02649 476.52497,464.59291 L 476.52497,204.84271 524.87674,204.84271 524.87674,600.93365 460.2203,600.93365"
    id="path_n">
        <z:translation x="364.0790100097656" y="402.88818359375"/>
        <z:rotation incRotY="0.5"/>
        <z:translation x="-364.0790100097656" y="-402.88818359375"/>
    </path>
</g>

那么，你怎么能控制物体的旋转和速度呢？是否可以包含一个缓动函数来控制每次旋转的速度？

Answer 1

我找到了解决此问题的方法。它需要三个步骤

首先，它需要您更改Svg3d库代码。

打开文件“svg3d_parsing.js”并在“init”函数中注释以下行
```
function init(g) {
    .......
    //clockRotation = window.setInterval("transform()", rotationTime);
    .......
}
```
我在这里做的是避免使用库中包含的“ticking”函数，因此我们将能够调用transform（）（执行旋转的函数，可用作全局函数）使用我们自己的滴答功能（仅在我们需要时）。然后，在同一个文件中找到“getAttrValue”函数并注释此处显示的行：
```
function getAttrValue(......
.....
if (incAttValue) {
   var incValue = parseFloat(incAttValue);
   //node.setAttribute(tag, returnedValue + incValue);
}
return returnedValue;
```
这是控制旋转的核心。当你执行init（this）并且每次调用transform（）时，属性rotX和/或rotY（取决于你是否设置了incRotX，incRotY或两者）包含在<z:rotation incRotY="0.5"/>标记中，导致{{1 （对于这个例子）。函数transform（）然后读取这些值，并使用它们作为每个轴的旋转角度（以弧度表示）计算变换矩阵。

同样，每次调用transform（）时，incRotX和/或incRotY都会增加rotX和/或rotY。所以，通过评论这一行（并按照下面的步骤），我们将能够按照自己的意愿控制旋转角度。
其次，通过包含ID来编辑<z:rotation incRotY="0.5" rotY="0.5"/>标签（我使用svg3d库文件中的一个函数“dom_utils.js”，但出于此解决方案的目的，我们将只设置一个易于访问的ID）---（你甚至可以删除incRotY属性）所以，我们得到
```
<z:rotation>
```
最后，获取补间和滴答功能，将rotY（和/或rotX，具体取决于您的情况）设置为z：rotation标记。这将是函数变换将应用于路径的旋转角度。

对于这个例子，我使用来自createjs套件的easeljs（用于滴答）和tweenjs（用于补间）：http://www.createjs.com/

将以下代码附加到svg结束标记之前的文件中。
```
<z:rotation id="rot" incRotY="0.5"/>
```
现在我们可以控制旋转的次数，动画的持续时间以及合并缓动功能。

可能必须有一个更整洁的解决方案。

我已在http://pastebin.com/fjPV4Gb4

请记住：不要使用toggleTransform函数！

注释：您可以取消注释在“init”函数（“svg3d_parsing.js”）中调用“transform（）”函数的clockRotation计时函数，并在“update”函数中删除对transform（）的调用，结果在相同的功能。但是，对transform（）的调用将导致无限制。

SVG3d：使用缓动函数控制路径的旋转

1 个答案: