我在
Android上做了一些关于CSS3动画(用webkit转换的转换)的研究.
CSS3动画仍然是Webkit中的一个实验功能.如果您尝试同时进行翻译和缩放,您会在CSS Animation中找到一些毛刺和/或错误(例如,见 http://www.youtube.com/watch?v=vZdBVzN1B8Y).换句话说,在许多版本的Android中,属性-webkit-transform:matrix(…)无法正常工作.同时获得缩放和翻译的唯一正确方法就是按照这个顺序设置“-webkit-transform:scale(…)translate(…)”.
我会在这篇文章的底部收录我的结果.
CSS3动画仍然是Webkit中的一个实验功能.如果您尝试同时进行翻译和缩放,您会在CSS Animation中找到一些毛刺和/或错误(例如,见 http://www.youtube.com/watch?v=vZdBVzN1B8Y).换句话说,在许多版本的Android中,属性-webkit-transform:matrix(…)无法正常工作.同时获得缩放和翻译的唯一正确方法就是按照这个顺序设置“-webkit-transform:scale(…)translate(…)”.
我会在这篇文章的底部收录我的结果.
正如你可以看到,我已经克服了大多数.
但是,在Android 2.2(Froyo)的某些转换中,仍然存在一些“闪烁”.
现在我的问题是:有什么方法可以在Android 2.2上同时进行缩放和翻译,而不会闪烁?
我也试过-webkit-backface-visibility:hidden; -webkit-perspective:1000;和-webkit-transform:translate3d(..,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,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,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,1.4,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,1.2,100)'; // 2) scale then translate -- will spoil transition -- //trans = 'scale(1.2,1.2) translate(83.33px,83.33px)'; // 3) tranlate first,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',false); } document.addEventListener('touchmove',function(e){ e.preventDefault(); },false); </script> </body> </html>
解决方法
这是一个开放的bug.明星它投票决定它asap .: