Блог

Мне трудно создавать анимацию масштабирования, которая не является изменчивой в Safari (мобильный). Под изменчивостью я имею в виду, что вы можете ясно видеть, что это не плавная анимация 60 кадров в секунду. Я должен сказать, что этот элемент абсолютно позиционирован, поэтому он не должен влиять на макет, не так ли?

Первое, что я попробовал, — это анимировать элемент, создав CSS-анимацию с 2 ключевыми кадрами, начиная с transform: scale(0); transform: scale(1); . Для эффекта, которого я хочу достичь, я также использовал transform-origin: top right; . Я также попытался оптимизировать его, установив will-change: transform; , но он был неустойчивым.

Я списал его и переработал, чтобы он использовался transition: transform . Таким образом , по умолчанию элемент имеет transform: scale(0); , когда к нему присоединяется определенный класс, он получает transform: scale(1); , какой переход анимируется, но он все еще прерывистый.

После некоторых исследований я выяснил, что вы хотите избежать анимации свойств, которые требуют, чтобы браузеры пересчитывали макет. Я нашел этот сайт, на котором говорится, что WebKit (который, насколько мне известно, использует Safari) в значительной степени пересчитывает макет для каждого изменения свойств. Это правда, и если да, то как вы делаете плавную анимацию 60 кадров в секунду на мобильном Safari (на других платформах, использующих Safari, это не так заметно, потому что у них гораздо больше ресурсов для пересчета всего, и это выглядит немного более плавно, чем на мобильных устройствах)?

Есть 2 вещи, которые вы можете попробовать:

• избегайте использования шкалы(0). В некоторых браузерах это создает проблемы. масштаб(0,01) почти такой же, и будет лучше для браузера.
• Попробуйте сделать так, чтобы анимация обрабатывалась графическим процессором, а не процессором. это можно сделать с помощью следующего кода

  от: {преобразование: масштаб(0,01) перевод(1 пиксель);}

  кому: {преобразование: масштаб(1) перевод(1 пикселей);}

В связи с этим разделом статьи Animate Changes in CSS Properties вы можете анимировать с помощью ключевых кадров , но вам нужно использовать такой процент, как этот:

Больше примеров в статье w3s.

PD: если вы добавите пример, я постараюсь вам помочь.

 function animateStart(){
  document.getElementById('ball').classList.add('bounce');
}

function animationPause(){
  document.getElementById('ball').style.webkitAnimationPlayState='paused';
}

function animationContinue(){
  document.getElementById('ball').style.webkitAnimationPlayState='running';
} 

 @-webkit-keyframes bounce {
    0% {top: 100px; left: 1px; -webkit-animate-timing-function: ease-in;}
    25% {top: 150px; left: 76px; -webkit-animate-timing-function: ease-out;}
    50% {top: 100px; left: 151px -webkit-animate-timing-function: ease-in;}
    75% {top: 150px; left: 226px -webkit-animate-timing-function: ease-out;}
    100% {top:100px; left: 301px;}
    }
 
.bounce {
    -webkit-animation-name: bounce;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    }
    
.ball-style {
    position:absolute; top: 100px; left: 10px;
    height:100px; width:100px; border-radius:50px;
    background:-webkit-radial-gradient(30% 30%, white, red 10%, black);;
}

.wall {
    position:absolute; left: 400px; top: 100px;
    height: 150px;
    background: black;
} 

 <input type="button" value="Animate alternative"
       onclick="document.getElementById('ball').classList.add('bounce');">
       
<input type="button" value="Animate" onclick="animateStart()">
<input type="button" value="Pause" onclick="animationPause()">
<input type="button" value="Continue" onclick="animationContinue()">

<div id="ball" class="ball-style"></div>
 
<div class="wall">amp;nbsp;</div> 

Я не знаю, поможет ли это, но используете ли вы javascript для добавления класса и запуска анимации с изменением класса? Например, jQuery может вызвать длительный анализ глубины в dom при манипулировании элементами, это, вероятно, повлияет на производительность, необходимую для достижения желаемого fps.