CSS3 animation flimmern auf Android 2.2 (webkit-transform:translate (..) - Skala(..) in der gleichen Zeit)
Habe ich einige der Forschung auf Android über CSS3 animation (transformation mit webkit-transition).
Die CSS3-animation ist noch ein experimentelles feature in Webkit. Wenn Sie versuchen, translation und Skalierung zur gleichen Zeit, finden Sie ein paar glitches und/oder bugs in der CSS-Animation (siehe beispielsweise http://www.youtube.com/watch?v=vZdBVzN1B8Y ). In anderen Worten, in vielen Android-Versionen die Eigenschaft -webkit-transform:matrix(...) funktioniert nicht richtig. Der einzig richtige Weg, um die Skalierung und translation zur gleichen Zeit zu setzen, ist "-webkit-transform:scale(...) übersetzen, (...)" in dieser Reihenfolge.
Ich werde shere meine Ergebnisse am Ende von diesem post.
Wie Sie sehen können, es, das ich überwunden zu haben, die meisten von Ihnen.
Es gibt jedoch noch einige "flimmern" im übergang auf Android 2.2 (Froyo).
Nun meine Frage: gibt es eine Möglichkeit zu tun, Skalierung und translation gleichzeitig und ohne flackern auf Android 2.2?
Ich habe auch versucht -webkit-backface-visibility:hidden;, -webkit-perspective:1000; und -webkit-transform:translate3d(..,0) aber diese Eigenschaften stellen einige Fehler in der transition. Sie können sehen Sie im folgenden video: http://www.youtube.com/watch?v=Aplk-m8WRUE
Die Skalierung wird abgebrochen, nachdem der übergang beendet.
Gibt es irgendeinen anderen workaround zu unterdrücken flimmern?
Irgendwelche Ideen?
Die unten ist meine Ergebnisse über CSS3 übergang auf Android (1.5 <= ver <= 2.2).
Es beschäftigt Skalierung und translation gleichzeitig auf das Blaue Feld.
<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>InformationsquelleAutor Keigo Imai | 2010-11-24
Du musst angemeldet sein, um einen Kommentar abzugeben.
es ist ein offener bug. star ist es, für ihn zu Stimmen, um sofort behoben werden.:
http://code.google.com/p/android/issues/detail?id=12451
Ein Jahr später, und der bug ist immer noch vorhanden. Scheiße... und ich habe das Gefühl, dass einige android-Nutzer werden verwendet, um bestimmte Störungen zu diesem Zeitpunkt.
InformationsquelleAutor Nadav
In den meisten Fällen das flackern ist verursacht durch verschachtelte Elemente, die animiert wird.
Reduzieren Sie die Menge von verschachtelten Elementen, könnte schwierig sein, in einigen Fällen, aber es hilft meistens.
InformationsquelleAutor Barry
auf dem übergeordneten element könnte helfen, je nachdem, was Sie tun
InformationsquelleAutor Andrew Bullock