Выдвижной ящик плохой FPS на мобильном телефоне

Question

Выдвижной ящик плохой FPS на мобильном телефоне

0

У меня есть меню ящика в моем приложении, которое отлично работает на рабочем столе, но на любом мобильном устройстве я вижу уродливый jank.

В заголовке У меня есть логическое значение, которое получает значение истины/ложь по щелчку гамбургера, который добавит out класса в .container выталкивания. Ящик является абсолютным для страницы, расположенной вверху справа, и когда класс out находится на контейнере, он перемещает 280 пикселей вправо, открывая ящик.

здесь упрощены html и css:

<div class="landing-page-container" ng-class="isMenuOut ? 'out' : ''">
<header/>
<main/>
<footer/>
</div>

<sidebar>

CSS:

.home-slide-menu{
  width: 280px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  overflow:hidden;
}

.landing-page-container{
  right:0;
  position: relative;
  transition: right 0.2s ease-in 0s;
}

.landing-page-container.out{
  right:280px;
  overflow: hidden;
}

Этого может быть недостаточно, чтобы помочь отладить это, но если есть какие-либо красные флажки, пожалуйста, дайте мне знать, и если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Luca 26 июнь 2015, в 15:33

Источник

Теги:

angularjs

performance

css

3 ответа

0

Рассмотрите возможность использования TweenMax. Это JS-анимационная библиотека, которая хорошо работает с Angular и определяет приоритетность производительности. Вы можете проверить это здесь:

http://greensock.com/

Даже Google рекомендует: https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript?hl=ru

Например, вот как вы будете делать то, что делаете в TweenMax в Angular

function(){
    TweenMax.to(someDomElementAsVariable, 0.3, {
        right:"350px"
    });
};

Эта функция изменит "правильное" значение someDomElementAsVariable на 350 пикселей в течение 0,3 секунды.

alloy 26 июнь 2015, в 11:48

0

Вы можете попробовать с преобразованием 2d, оно должно быть более жидким

-ms-transform: translate(-280px,0); /* IE 9 */
-webkit-transform: translate(-280px,0); /* Safari */
transform: translate(-280px,0); /* Standard syntax */

Sarcadass 26 июнь 2015, в 11:34

0

Это на самом деле заставило его работать хуже всего. Это увеличилось с 40 до 25 кадров в секунду.
Luca 26 июнь 2015, в 14:17
0

Вы хотите использовать 3d-преобразования, а не 2d. Это гарантирует, что ваши устройства используют аппаратное ускорение и помещают их в графический процессор.
Matt Derrick 26 июнь 2015, в 14:37
0

Как я могу использовать 3d-трансформации?
Luca 26 июнь 2015, в 14:39
0

Я думаю, что 3D-преобразования определенно приводят к увеличению производительности на настольном компьютере, но я не уверен, что это будет иметь огромное значение для мобильных устройств.
alloy 26 июнь 2015, в 14:40
0

3D-трансформации имеют огромное значение на мобильных устройствах!
Matt Derrick 26 июнь 2015, в 14:41

Показать ещё 3 комментария

Ещё вопросы

Это на самом деле заставило его работать хуже всего. Это увеличилось с 40 до 25 кадров в секунду.
Вы хотите использовать 3d-преобразования, а не 2d. Это гарантирует, что ваши устройства используют аппаратное ускорение и помещают их в графический процессор.
Как я могу использовать 3d-трансформации?
Я думаю, что 3D-преобразования определенно приводят к увеличению производительности на настольном компьютере, но я не уверен, что это будет иметь огромное значение для мобильных устройств.
3D-трансформации имеют огромное значение на мобильных устройствах!

Matt Derrick · Accepted Answer · 2015-06-26T12-42-00.000Z

Вам нужно использовать 3D-преобразования.

http://www.kirupa.com/html5/animating_movement_smoothly_using_css.htm

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

Как обеспечить, чтобы ваши анимации выполнялись в аппаратном режиме на графическом процессоре? Используя translate3d! Когда вы трансформируете элемент с помощью translate3d, этот элемент находится в стране GPU в браузерах на основе Webkit, таких как Chrome и Safari (что и используется вашим iPhone и iPad).

Вот простой пример, который я сделал:

https://jsfiddle.net/asmsomtw/

Важный CSS-фрагмент из скрипки

/* Transition effect and timing */
div {
    transform: translate3d(0, 0%, 0);
    transition: transform 500ms ease-in;
}

/* The transform applied by appended class that toggles drawer to hide */
.hide {
    transform: translate3d(-100%, 0, 0);
}

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

Никогда не злоупотребляйте графическим процессором, но будьте осторожны в том, что ускоряется.