CSS3 animation de scintillement sur Android 2.2 (webkit-transform:translate (..) (..) en même temps)
J'ai fait quelques recherches sur Android sur CSS3 animation (transformation avec webkit-transition).
Le CSS3 animation est encore une fonctionnalité expérimentale dans Webkit. Si vous essayez de faire de la traduction et de mise à l'échelle dans le même temps, vous trouverez un peu de pépins et/ou des bugs dans le CSS Animation (voir, par exemple,http://www.youtube.com/watch?v=vZdBVzN1B8Y ). En d'autres termes, dans de nombreuses versions d'Android la propriété -webkit-transform:matrice(...) ne fonctionne pas correctement. La seule façon d'obtenir de mise à l'échelle et à la traduction dans le même temps est de mettre en "-webkit-transform:scale(...) traduire(...)" dans cet ordre.
Je vais shere mes résultats en bas de ce post.
Comme vous pouvez le voir, j'ai vaincu la plupart d'entre eux.
Cependant, il ya encore quelques "flicker" dans certains de transition sur Android 2.2 (Froyo).
Maintenant, ma question: est-il possible de faire de mise à l'échelle et à la traduction dans le même temps, sans scintillement sur Android 2.2?
J'ai aussi essayé de -webkit-backface-visibility:hidden;, -webkit-point de vue:1000; et -webkit-transform:translate3d(..,0) mais ces propriétés introduire quelques glitch dans la transition. Vous pouvez le voir dans la vidéo suivante: http://www.youtube.com/watch?v=Aplk-m8WRUE
La mise à l'échelle est annulée après la transition s'arrête.
Est-il une autre solution pour supprimer le scintillement?
Des idées?
Voici mes résultats sur CSS3 transition sur Android (1.5 <= ver <= 2.2).
Il emploie à la mise à l'échelle et de la traduction en même temps sur la case bleue.
<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>OriginalL'auteur Keigo Imai | 2010-11-24
Vous devez vous connecter pour publier un commentaire.
c'est un bug ouvert. star il de voter pour elle à être fixé le plus tôt possible.:
http://code.google.com/p/android/issues/detail?id=12451
Un an plus tard, et le bug est toujours présent. Suce... et j'ai le sentiment que certains utilisateurs d'android sont utilisés pour certains pépins à ce point.
OriginalL'auteur Nadav
Dans la plupart des cas, le scintillement est causée par des éléments qui sont en cours d'animation.
Réduire la quantité d'éléments imbriqués, pourrait être difficile dans certains cas, mais il aide la plupart du temps.
OriginalL'auteur Barry
sur l'élément parent peut aider en fonction de ce que vous faites
OriginalL'auteur Andrew Bullock