Question

问题：

我正在使用Snap SVG绘制并随后为4个图形（台式机，笔记本电脑，平板电脑，手机）制作动画，以便它们每5秒变换一个。这些设备使用基本线条和形状构建，以及每个设备的PNG屏幕截图。您可以在行动here中看到它。我的原始代码如下：

org.apache.activemq.store.PersistenceAdapter

我也尝试重新格式化以使用集合：

var makeDesktop = function() {
    deviceOuter.animate({width: 420, height: 300, rx: 20, ry: 20, transform: 'T0,0'}, 1000, mina.easeinout);
    screenOuter.animate({width: 380, height: 220, transform: 'T0,0'}, 1000, mina.easeinout);
    screenImageDesktop.animate({width: 380, height: 220, transform: 'T0,0', opacity: 1}, 1000, mina.easeinout);
    screenImageLaptop.animate({width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout);
    screenImageTablet.animate({width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout);
    screenImagePhone.animate({width: 380, height: 220, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout);
    camera.animate({r: 2.5, transform: 'T0,0'}, 1000, mina.easeinout);
    desktopDivider.animate({d: "M0,260, 420,260", opacity: 1}, 1000, mina.easeinout);
    laptopMidDivider.animate({d: "M20,300, 400,300", opacity: 0}, 1000, mina.easeinout);
    laptopMidLeft.animate({d: "M20,300, 20,300", opacity: 0}, 1000, mina.easeinout);
    laptopMidRight.animate({d: "M400,300, 400,300", opacity: 0}, 1000, mina.easeinout);
    deviceBaseLeft.animate({d: "M165,300 Q160,340 140,340", opacity: 1}, 1000, mina.easeinout);
    deviceBaseRight.animate({d: "M255,300 Q260,340 280,340", opacity: 1}, 1000, mina.easeinout);
    deviceBaseBottom.animate({d: "M140,340, 280,340", opacity: 1}, 1000, mina.easeinout);
        mobileButton.animate({r: 10, transform: 'T0,0', opacity: 0}, 1000, mina.easeinout);
    $("#btn-desktop").addClass("active");
    devicePosition = 0;
};

我的问题

看到每个动画的持续时间为1000毫秒且具有相同的缓动曲线，是否有更便宜的方式来实现相同的效果？在这种情况下使用集合是否有任何性能优势，因为它大大降低了可读性。

Answer 1

如果没有看到一个jsfiddle来玩不同的选项并将其与网页的其他部分分开，很难猜到。我先是单独玩它。

优势＆＃39;应该＆＃39;是的，你只运行一个计时器，而不是每个元素的计时器，这肯定会产生开销。

对于很多元素，这会产生影响，我认为在你的情况下，它的边界线。它可能表现得更好，但我不确定它会不会引人注意。只有你能说出来。我要说的一件事是在移动设备上测试它们，因为这通常是svg动画表现最差的情况。

其他可能值得研究的事情......

是否有多个转换应用于一个元素（例如，一个组内的转换元素或另一个转换后的容器），因为这会减慢速度。

CSS转换/动画通常可以表现得更好，但您需要检查对浏览器/设备的支持。 Velocity.js值得一看。

让viewBox影响性能，如果一切都是正确的大小，那么图像会更快吗？

关于可读性，在替代版本中，所有内容都不必保留在2行上，您仍然可以让我认为可读（如果不是更易读的话）。例如它可以改写为..

var deviceOuterChanges = [{width: 420, height: 300, rx: 20, ry: 20, transform: 'T0,0'}, 1000, mina.easeinout];
var screenOuterChanges = [{width: 380, height: 220, transform: 'T0,0'}, 1000, mina.easeinout];
....

var set = Snap([deviceOuter, screenOuter.... mobileButton])
              .animate([ deviceOuterChanges,
                         screenOuterChanges,
                         ...
                        ]);

您也可以重复使用其中一些，因为所有的screenImage对象都具有相同的动画属性。

Snap SVG动画性能

1 个答案: