Привязка SVG Анимация Производительность

Question

Проблема:

Я использую оснастку SVG рисовать, а затем анимировать 4 графика (настольный компьютер, ноутбук, планшет, телефон), так что они превращаются друг в друга через каждые 5 секунд. Устройства построены с использованием основных линий и форм, а также скриншот PNG для каждого устройства. Вы можете увидеть это в действии here. Мой исходный код выглядит следующим образом:

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; 
}; 

Я также попытался переформатирования использовать набор:

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

Мой вопрос

Seeing, как продолжительность каждого Animation является 1000мс и имеет ту же кривую ослабления, есть ли менее дорогой способ достижения такого же эффекта? Есть ли преимущества в производительности от использования набора в этом экземпляре, поскольку он значительно снижает удобочитаемость.

Answer 1

Его трудно догадаться, не видя jsfiddle, чтобы поиграть с различными опциями и отделить его от остальной части веб-страницы. Сначала я играл с ним отдельно.

Преимущество «должно быть» в том, что вы используете только один таймер, а не таймер для каждого элемента, что, безусловно, может создать накладные расходы.

С большим количеством элементов это будет иметь эффект, я думаю, в вашем случае его граница. Он может немного улучшиться, но я не уверен, что это будет заметно. Только вы можете это сказать. Одна вещь, которую я бы сказал, проверяет их как на мобильных устройствах, так как это часто самый низкий результат для анимации svg.

Другие вещи, которые могут быть стоит посмотреть в ...

Существуют ли множественные преобразования, применяемые к элементу (например, трансформированный элемент внутри группы или в другой контейнер Thats преобразованной), так как это будет замедлить ход событий.

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 имеют одинаковые анимации атрибуты.