CSS3动画闪烁Android 2.2（webkit-transform：translate（..）scale（..）在同一时间） [英] CSS3 animation flicker on Android 2.2 (webkit-transform:translate(..) scale(..) at the same time)
问题描述
我在Android上做了一些关于CSS3动画（使用webkit转换的转换）的研究。
CSS3动画在Webkit中仍然是一个实验性功能。如果您尝试同时进行翻译和缩放，您会在CSS动画中发现一些小错误和/或错误（例如，请参阅 http://www.youtube.com/watch?v=vZdBVzN1B8Y ）。换句话说，在许多版本的Android中，属性 -webkit-transform：matrix（...）无法正常工作。同时进行缩放和翻译的唯一正确方法是按此顺序设置 - webkit-transform：scale（...）translate（...） 强>。
我会在这篇文章的底部查看我的结果。
I did some research on Android about CSS3 animation (transformation with webkit-transition). The CSS3 animation is still an experimental feature in Webkit. If you try to do translation and scaling at the same time, you'll find a few glitches and/or bugs in the CSS Animation (for example, see http://www.youtube.com/watch?v=vZdBVzN1B8Y ). In other words, in many versions of Android the property -webkit-transform:matrix(...) does not work correctly. The only correct way to get scaling and translation at the same time is to set "-webkit-transform:scale(...) translate(...)" in this order. I'll shere my results at the bottom of this post.
正如你可以看到，我已经克服了大部分。
然而，在Android 2.2（Froyo）上的一些转换中仍然有一些闪烁。
As you can see in it, I have overcome most of them. However, there's still some `flicker' in some transition on Android 2.2 (Froyo).
现在我的问题：有什么办法做缩放和翻译
Now my question: is there any way to do scaling and translation at the same time without flicker on Android 2.2?
我也尝试过 -webkit-backface-visibility：hidden; -webkit-perspective：1000; -webkit-transform：translate3d（..，0）但这些属性在转换中引入了一些故障。您可以在以下视频中查看该视频： http://www.youtube.com/watch?v=Aplk-m8WRUE
转换停止后缩放会被取消。
I've also tried -webkit-backface-visibility:hidden;, -webkit-perspective:1000; and -webkit-transform:translate3d(..,0) but these properties introduce some glitch in the transition. You can see it in the following video: http://www.youtube.com/watch?v=Aplk-m8WRUE The scaling is canceled after the transition stops.
是否有其他解决方法来抑制闪烁？
任何想法？
Is there any other workaround to suppress flicker? Any ideas?
以下是我在Android上的CSS3转换结果（1.5< = ver< ; = 2.2）。
它在蓝色框中同时使用缩放和翻译。
The below is my results about CSS3 transition on Android (1.5 <= ver <= 2.2). It employs scaling and translation at the same time on the blue box.
<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>
推荐答案
星号投票将其固定为asap。：
it's an open bug. star it to vote for it to be fixed asap.:
http://code.google.com/p/android/issues/detail?id=12451
这篇关于CSS3动画闪烁Android 2.2（webkit-transform：translate（..）scale（..）在同一时间）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
