Принудительно перерисовывать браузер Android каждую секунду - PullRequest
1 голос
/ 02 декабря 2011

Я перемещаю очень длинное изображение, используя -webkit-transform: translate(-958px, 0); анимацию

Изображение обрезается очень скоро после того, как оно начинает двигаться горизонтально, но если я слегка переместлю экран планшета, он перерисовает экран ион отображает все изображение, одновременно перемещаясь и очень плавно.

Но как мне смоделировать это в коде?

Ответы [ 4 ]

2 голосов
/ 10 декабря 2011

Некоторые предложения:

  1. Предоставьте модель планшета и версию для Android, которые могут помочь
  2. Информация, такая как размер и размер изображения, продолжительность анимации или демонстрационная страница на jsfiddle / jsbin очень поможет

Вернуться к вопросу:

  1. в плане производительности, используя translate3d получит лучшую производительность, поскольку она не работает, главное узкое место в другом месте.
  2. из моего опыта работы с мобильным веб-комплектом, когда есть большое изображение (с точки зрения размера или размера),у вас могут возникнуть проблемы:

    • проблема с оперативной памятью
    • высокая сетевая задержка
    • достаточно длительное время загрузки и рендеринга

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

Решение:

  1. Установить разумную задержку дляВаша анимация animation-delay или setTimeout
  2. Точнее: предварительно загрузить изображение, а затем запуститьЕсли анимация завершена, прослушивая событие onload: jQuery .load объяснение поведения события загрузки изображения
  3. Если вышеописанное не работает для вас, попробуйте: Force-перерисовать технику DOM для браузеров на основе WebKit

Для 2 и 3 код будет выглядеть следующим образом:

$("<img>")
.attr({ src: " /* image url */ " })
.load(function(){
    /* i. use class or animationName to set animation */
    /* ii. force redraw go there if needed */

    /* wrap i & ii into a setTimeout function inside this callback
    if more delay is needed */
})

удачи.

0 голосов
/ 06 декабря 2011

Простите, если я не правильно читаю ваш вопрос.

Планируете ли вы использовать гироскоп планшета для панорамирования большого изображения? Это должно быть возможно в коде.

Однако, насколько мне известно, принудительный переход к более быстрому обновлению находится вне контроля разработчика. Лучшее, что вы можете сделать, - убедиться, что это все, о чем может беспокоиться планшет.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                padding:0px;
                overflow:hidden;
            }
            #img {
                position:absolute;
                left:0px;
                top:20px;
                -webkit-transition:left 0.5s;
            }
            </style>
    </head>
    <body>
        <img id="img" src="img.png" />
    </body>
    <script>
        function onOrientationChange(e) {
            var img = document.getElementById("img"); 
            var maxWidth = img.clientWidth - document.body.clientWidth;

            img.style.left = ((e.gamma-90) * maxWidth / 180 ) + "px";
        }
        window.addEventListener('deviceorientation', function(e){onOrientationChange(e)}, true);
        </script>
</html>
0 голосов
/ 08 декабря 2011

Вы пробовали использовать переводчик 3d?Графический процессор начинает работать, когда его используют.

HTML5 приложение / производительность анимации

0 голосов
/ 05 декабря 2011

Этот небольшой фрагмент кода и сообщения в блоге от Пола Айриша может быть вам полезен:

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

И это почти кросс-браузер, если он плывет на вашей лодке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...