matrix.translate vs matrix.translate3d webkit ipad - PullRequest
Новая
       21

matrix.translate vs matrix.translate3d webkit ipad

0 голосов
/ 15 ноября 2010

Следующий код является частью перехода webkit для приложения Ipad: 

#canvas {
        -webkit-transition-property: -webkit-transform;;
        -webkit-transition-duration: 1s;
        -webkit-transition-timing-function: ease-out;
        position:absolute;  
        z-index:1;  
    }

... 

var containerTrsfrm = window.getComputedStyle(currentCanvas).webkitTransform;
    var matrix = new WebKitCSSMatrix(containerTrsfrm);
    matrix = matrix.scale(1.5, 1.5);
    currentCanvas.style.webkitTransform = matrix.translate(100, 100);

Но если я изменю matrix.translate(x,y) на matrix.translate3d(x,y,z)перестает работатьТеперь я хочу внести это изменение, потому что я прочитал в нескольких местах, что это будет поддерживаться аппаратным ускорением, и мерцание, возникающее при выполнении кода, приведенного выше, исчезнет.

Ответы [ 2 ]

1 голос
/ 06 мая 2011

Я только что потратил несколько часов на эту проблему мерцания в конце анимации в преобразованиях webkit / ipad / iOS / webWiew.

Что я обнаружил, так это то, что преобразуемый объект помещается поверх других объектов в окне во время преобразования, а в конце преобразования все объекты с более высоким z-индексом перерисовываются, что вызывает мерцание. .

Так что просто дайте преобразованному div более высокий z-индекс, чем у других объектов, и мерцание исчезнет.

Jet

0 голосов
/ 04 апреля 2011

В javascript 2d и 3d используются одинаковые методы.Если вы хотите сделать 3d-преобразование, вам просто нужно использовать matrix.translate (x, y, z).Но если вы не используете значение z, нет смысла использовать translate таким образом.

Как вы сказали, css translate3d аппаратно ускоряется.Но я на самом деле не знаю о матрице против matrix3d.

При применении к стилю (currentCanvas.style.webkitTransform) javascript выбирает, должен ли он возвращать 2d или 3d матрицу в зависимости от значения.Чтобы действительно заставить его, вы все равно можете добавить перевод в 1 пиксель по оси Z.

...