Android 용 CSS3 애니메이션 (웹킷 전환을 사용한 변형)에 대한 연구를했습니다. CSS3 애니메이션은 여전히 Webkit의 실험적인 기능입니다. 동시에 번역 및 크기 조정을 시도하면 CSS 애니메이션에서 몇 가지 결함 및/또는 버그가 발견됩니다 (예 : http://www.youtube.com/watch?v=vZdBVzN1B8Y 참조). 즉, 안드로이드의 많은 버전에서 -webkit-transform : matrix (...)이 올바르게 작동하지 않습니다. 크기 조정 및 번역을 동시에 얻는 유일한 올바른 방법은 "-webkit-transform : scale (...) translate (...)"을이 순서대로으로 설정하는 것입니다. 나는이 게시물의 하단에 나의 결과를 세울 것이다.Android 2.2에서 CSS3 애니메이션 깜박임 (webkit-transform : 번역 (..) 스케일 (..) 동시에)
여기서 볼 수 있듯이 나는 대부분을 극복했습니다. 그러나 안드로이드 2.2 (Froyo)의 일부 전환에는 여전히 '깜박임'이 있습니다.
이제 내 질문 : 안드로이드 2.2에서 깜박임없이 동시에 크기와 변환을 수행 할 수있는 방법이 있습니까?
나는 또한 시도했다 -webkit-backface-visibility : hidden;, -webkit-perspective : 1000; 및 -webkit-transform : translate3d (.., 0) 그러나 이러한 속성은 전환시 일부 글리치를 발생시킵니다. 다음 비디오에서 확인할 수 있습니다. http://www.youtube.com/watch?v=Aplk-m8WRUE 전환이 중지 된 후 배율이 취소됩니다.
깜박임을 억제 할 수있는 다른 해결 방법이 있습니까? 아이디어가 있으십니까?
는 아래 (1.5 버전 < = < = 2.2) 안드로이드 CSS3 전이에 대한 내 결과이다. 파란색 상자에 동시에 크기 조정 및 변환을 사용합니다.
<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>
+1 정말 고마워요! 별표가 붙었습니다. –
1 년 후, 버그가 여전히 존재합니다. Sucks ... 그리고 나는 몇몇 안드로이드 사용자가이 시점에서 특정 결함에 익숙하다는 느낌을 갖게됩니다. – courtsimas