Question

我有一个类似于股市图表的折线图，该线在一段时间内上下波动。我在折线图的顶部覆盖一个窄的垂直条（svg / rect），并通过动画＆＃34;左＆＃34;沿着X轴滑动条。值。它很棒。

我刚刚被问到，当它沿着x轴滑动时，条形图的高度是否可以跟随折线图的高度。我有数据，所以我每隔1/10秒设置一个间隔来改变svg / rect的高度。

因此，条形图通过jquery.animate（）从左向右滑动，条形图的高度根据数据值通过javascript：setInterval和jqeury.css（）进行更改。这也很有效。

现在我被问到是否可以让酒吧的高度变得不那么生涩。通常我会使用.animate（）更改高度，但是使用.animate（），条形图已经从左向右移动。我基本上想要一个嵌套的动画。当条形图从左到右动画时，我想设置条形图的高度。

.animate（）的步骤函数参数是我能看到的最接近的事情，但是它确实没有用。它主要用于修改现有动画，而不是添加新动画。

还有其他想法吗？

编辑：我想到的是从左到右动画外部SVG，然后设置内部<rect>高度的动画。这样它可以在高度变化时滑动。但是，动画是针对CSS样式和“高度”的。 CSS样式不适用于<rect>。例如：

<rect height='100'/>
<rect style='height:100px;'/>

第一个<rect>将正确绘制100（单位）高的矩形。第二个<rect>将忽略高度样式，高度将为0，就像我没有指定它一样。因此，我无法设置<rect>的高度。

Answer 1

Jquery方法animate允许以json格式在其参数中使用“step”，这是在动画间隔ex的每个步骤中调用的函数：

$('selector').animate({
height: '+=10px'
 }, {
duration: 400,
step: function() {
    $(this).children('selector').animate({
        width: '+=10px'
    });
}

   });

步长函数可以是任何东西，但它可以是相同选择器上的嵌套动画或在动画的每个间隔调用的不同selctors

Answer 2

在SVG SMIL的早期，它似乎比基于JavaScript的动画有点急躁，但大约在2008年停止了。如果您不关心IE支持，那么SMIL可能会比基于javascript的软件包（如JQuery等）提供更平滑的效果。它还可以更容易地使用不同的时序循环和周期性动画，并且可以附加新的动画子项。 DOM相对容易。 SMIL动画模块目前比尝试借鉴其思想的CSS堂兄更加稳定和富有表现力。

我可以为当前正在运行的动画添加动画吗？

2 个答案: