Рисование анимированных изображений внутри SVG в Safari занимает много времени - PullRequest
Новая
       73

Рисование анимированных изображений внутри SVG в Safari занимает много времени

0 голосов
/ 25 мая 2020

Я использую аниме. js, чтобы изменить свойство transform css на моих изображениях. Хотя анимация работает плавно как на Chrome, так и на Firefox (суммарная отрисовка ~ 50 мс на одно изменение слайда), в Safari требуется около 100 мс на кадр, чтобы нарисовать . Я заметил, что чем ниже разрешение окна сафари, тем меньше времени требуется для рисования (поэтому при меньшем разрешении все работает плавно). Также кажется, что проблема не в разрешении картинки, потому что черные прямоугольники тоже отстают. Есть ли какая-то общая проблема с производительностью в моем коде или это просто способ обработки Webkit в этом конкретном случае c? Если это проблема Webkit, как я могу ее обойти?

Есть несколько групп изображений, по одной для каждого слайда. 

<g clip-path="url(#bottom-quadrilateral-crop)" id='bottom-quadrilateral-group'>
    <image class='bottom-quadrilateral-1' x="775" y="7" width="1085" height="750" xlink:href="https://images.unsplash.com/photo-1483683804023-6ccdb62f86ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format" preserveAspectRatio="xMinYMin slice" />
    <image class='bottom-quadrilateral-0' x="775" y="7" width="1085" height="750" xlink:href="https://images.unsplash.com/photo-1581955944403-01fe458ac398?ixlib=rb-1.2.1&auto=format&q=80" preserveAspectRatio="xMinYMin slice" />
</g>

И я анимирую каждое изображение внутри группы примерно так 

const element = sliderElement.querySelector(querySelector);
const offsetX = Number(element.getAttribute("width"));

anime({
    targets: element,
    translateX: [offsetX, 0],
    delay,
    duration: 300,
    easing: "spring(1, 40, 10, 0)",
});

Вот ссылка на полный код: https://jsfiddle.net/filipw01/ajpquo60/7/

...