Флеш анимации CSS3 на Android 2.2 (webkit-transform: translate (..) scale (..) в то же время)

Я провел некоторое исследование по Android о анимации CSS3 (преобразование с помощью webkit-перехода). Анимация CSS3 все еще является экспериментальной функцией в Webkit. Если вы попытаетесь одновременно выполнить перевод и масштабирование, вы найдете несколько сбоев и / или ошибок в анимации CSS (например, см. Http://www.youtube.com/watch?v=vZdBVzN1B8Y ). Другими словами, во многих версиях Android свойство -webkit-transform: matrix (…) работает некорректно. Единственный правильный способ получить масштабирование и перевод в одно и то же время – установить «-webkit-transform: scale (…) translate (…)» в этом порядке . Я получу результаты в нижней части этой публикации.

Как вы можете видеть в этом, я преодолел большинство из них. Тем не менее, в некоторых переходах на Android 2.2 (Froyo) все еще есть «мерцание».

Теперь мой вопрос: есть ли способ сделать масштабирование и перевод в одно и то же время без мерцания на Android 2.2?

Я также попробовал -webkit-backface-visibility: hidden; , -webkit-perspective: 1000; И -webkit-transform: translate3d (.., 0), но эти свойства вносят некоторый сбой в переход. Вы можете увидеть это в следующем видео: http://www.youtube.com/watch?v=Aplk-m8WRUE Масштабирование отменяется после остановки перехода.

Есть ли еще способ обхода мерцания? Есть идеи?


Ниже приведены мои результаты о переходе CSS3 на Android (1.5 <= ver <= 2.2). Он использует масштабирование и перевод одновременно на синем поле.

<html> <head> <title>css3test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width"> </head> <body> <div id='log'></div> <div id='box' style="background-color: blue; width:100; height:100;"></div> <script language='JavaScript'> function mesg(str) { document.getElementById('log').innerHTML = str; } var e = document.getElementById('box'); e.style['-webkit-transition-property'] = '-webkit-transform'; e.style['-webkit-transform-origin'] = "0 0"; e.style['-webkit-transition-duration'] = '350ms'; e.style['-webkit-transition-timing-function'] = 'linear'; // These properties will suppress flicker, but spoiles scaling on Android 2.2 ... // see http://www.youtube.com/watch?v=Aplk-m8WRUE e.style['-webkit-backface-visibility'] = 'hidden'; e.style['-webkit-perspective'] = '1000'; var b = 0; function doAnim() { var trans; switch(b){ case 0: // step 0. translate and scale at the same time // 1) matrix // On Android 1.5, we get no translation, but the box is only enlarged. Broken. // On Android 2.2, the transition does not occur but the box moves instantly. //trans = 'matrix(2,0,0,2,100,100)'; // 2) scale first, then translate // On Androi2.2, there's some glitches. //trans = 'scale(2,2) translate(50px,50px)'; // 3) tranlate first, then scale -- CORRECT trans = 'translate(100px,100px) scale(2,2)'; break; case 1: // step 1. translate // 1) matrix //trans = 'matrix(1,0,0,1,35,35)'; // 2) translate only -- will spoil transition -- // On Android 1.5, the transition corrupts and the box repeatedly moves in a wrong direction. Bug? // see http://www.youtube.com/watch?v=vZdBVzN1B8Y //trans = 'translate(35px,35px)'; // 3) tranlate first, then scale with (1,1) -- CORRECT trans = 'translate(35px,35px) scale(1,1)'; break; case 2: // step 2. scaling // 1) matrix -- nope. //trans = 'matrix(1.4,0,0,1.4,0,0)'; // 2) scale only -- will spoil transition -- //trans = 'scale(1.4,1.4)'; // 3) tranlate with (0px,0ox), then scale -- CORRECT trans = 'translate(0px,0px) scale(1.4,1.4)'; break; case 3: // step 3. again, translate and scale at the same time // 1) matrix -- nope. //trans = 'matrix(1.2,0,0,1.2,100,100)'; // 2) scale then translate -- will spoil transition -- //trans = 'scale(1.2,1.2) translate(83.33px,83.33px)'; // 3) tranlate first, then scale -- CORRECT trans = 'translate(100px,100px) scale(1.2,1.2)'; break; } e.style['-webkit-transform'] = trans; mesg('move '+b+'<br/>transform:'+trans); b=(b+1)%4; } var isAndroid = (new RegExp("android","gi")).test(navigator.appVersion); if(isAndroid) { e.addEventListener('touchstart', doAnim, false); } else { e.addEventListener('mousedown', doAnim, false); } document.addEventListener('touchmove', function(e){ e.preventDefault(); }, false); </script> </body> </html> 

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

http://code.google.com/p/android/issues/detail?id=12451

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

  -webkit-transform-style: preserve-3d; transform-style: preserve-3d; 

На родительский элемент может помочь в зависимости от того, что вы делаете