android2.2 animation,CSS3动画闪烁在Android 2.2(webkit-transform：translate(..)scale(..)的同时)...

旧城等待， 2022-10-05 06:46 36阅读 0赞

我在

Android上做了一些关于CSS3动画(用webkit转换的转换)的研究.

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).

它同时在蓝框上使用缩放和翻译.

css3test

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+'  
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);

android2.2 animation,CSS3动画闪烁在Android 2.2(webkit-transform：translate(..)scale(..)的同时)...

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Android View闪烁动画AlphaAnimation，Kotlin

相关 Android基础#22：Android handler用法详解2，例2

相关 Android Shimmer微光闪烁shimmer-android

相关 android2.2 animation,CSS3动画闪烁在Android 2.2(webkit-transform：translate(..)scale(..)的同时)...

相关 android图片闪烁或帧动画

相关 Android Animation（3）-Android的动画框架

相关 android学习笔记(22)listview初步

相关 Android Studio22-NDK-LLDB调试

相关【工作计划】3.22-3.30

相关 3.22（上）