Как исправить лаги / срезы на мобильных устройствах с динамическим фоновым положением?

0

Я работаю над небольшим приложением, где пользователь перемещает фон пальцем по экрану.

background-position определяется положением пальца.

Я использую угловой, поэтому у меня есть такие теги:

<div class="main-container" ng-touchmove="onTouchmove($event)">
    <div class="image" ng-style="{ 'background-position': bgPosition }"></div>
</div>

И в моем контроллере:

$scope.onTouchmove = function (e) {
    $scope.bgPosition = e.touches[0].pageX + 'px ' + e.touches[0].pageY + 'px';
};

Тем не менее, у меня есть значительные задержки на мобильном телефоне, а фон - "отсечение". Проблема, похоже, распространена, и люди часто предлагают использовать transform сравнению с background-position.

Но как я могу использовать transform если позиция основана на движениях пользователя? В глобальном масштабе, как я могу избежать этих лагов?

Теги:
mobile
css-animations

1 ответ

0

Я думаю, вы захотите этого:

$scope.bgPosition = e.touches[0].pageX + 'px ' + e.touches[0].pageY + 'px';

быть чем-то вроде

$scope.transform = 'translate(' + e.touches[0].pageX + 'px, ' + e.touches[0].pageY + 'px)';

(и измените { 'background-position': bgPosition } на { 'transform': transform} или аналогичный.)

Вам также может потребоваться добавить еще один элемент html между .main-container и .image если вы не хотите использовать основной контейнер для обрезки изображения. Что-то вроде

.crop-image {
    overflow: hidden;
}

или

.crop-image {
    clip: rect(/* dimensions offset from top and left. */)
}

(переполнение может работать для ваших нужд, но если не проверить https://developer.mozilla.org/en-US/docs/Web/CSS/clip и https://developer.mozilla.org/en-US/docs/Web/CSS/клип-путь).

Ещё вопросы

Сообщество Overcoder
Наверх
Меню