代码之家 › 专栏 › 技术社区 › Keigo Imai

Android 2.2上的CSS3动画闪烁(webkit转换:同时平移(..)缩放(..)

css3 webkit animation android

Keigo Imai · 技术社区 · 15 年前

我在Android上做了一些关于CSS3动画(webkit转换转换)的研究。 CSS3动画仍然是Webkit中的一个实验特性。如果您尝试同时进行转换和缩放,则会在CSS动画中发现一些小问题和/或错误(例如,请参见 http://www.youtube.com/watch?v=vZdBVzN1B8Y ). 换句话说,在Android的许多版本中,属性 -webkit转换:矩阵(…) 无法正常工作。同时获得缩放和平移的唯一正确方法是设置 “-webkit转换:缩放(…)转换(…)” 按这个顺序 . 我会在这篇文章的底部公布我的结果。

如你所见,我已经克服了大部分困难。然而,在Android 2.2(Froyo)上的一些过渡中仍然存在一些“闪烁”。

现在我的问题是:在Android 2.2上有没有办法在不闪烁的情况下同时进行缩放和转换?

我也试过 -webkit背面可见性:隐藏; , -webkit透视图:1000; 和 -webkit转换:转换3d(…,0) 但是这些性质在转换过程中引入了一些小问题。您可以在以下视频中看到它: http://www.youtube.com/watch?v=Aplk-m8WRUE 转换停止后取消缩放。

有没有其他方法来抑制闪烁? 有什么想法吗?

下面是我关于Android上CSS3转换的结果(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>

3 回复 | 直到 15 年前

Nadav 15 年前

这是一只开着的虫子。投票决定尽快修复

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

Barry 15 年前

在大多数情况下,闪烁是由正在设置动画的嵌套元素引起的。减少嵌套元素的数量,在某些情况下可能很困难,但它在大多数情况下都有帮助。

Andrew Bullock 13 年前

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

取决于你在做什么