Fatal编程技术网
  • android/
  • CSS3关键帧平移动画-Android中严重的帧跳过

CSS3关键帧平移动画-Android中严重的帧跳过

android html css jquery-mobile

CSS3关键帧平移动画-Android中严重的帧跳过,android,html,css,jquery-mobile,css-animations,Android,Html,Css,Jquery Mobile,Css Animations,在Android 2.2浏览器上，一个小矩形上的简单平移动画会跳过帧，这是非常令人惊讶的。甚至每秒不到10帧。这款手机是三星Galaxy Ace S5830。图像上没有其他动画。下面附上代码。我是不是做错了什么，因为我从来没想过这么简单的翻译动画会如此糟糕。请建议一些可接受的平滑度的解决方法 <html> <head> <style type="text/css"> #di1, #ci1 {position: absolute;left:

在Android 2.2浏览器上，一个小矩形上的简单平移动画会跳过帧，这是非常令人惊讶的。甚至每秒不到10帧。这款手机是三星Galaxy Ace S5830。图像上没有其他动画。下面附上代码。我是不是做错了什么，因为我从来没想过这么简单的翻译动画会如此糟糕。请建议一些可接受的平滑度的解决方法

<html>
  <head>
    <style type="text/css">

    #di1, #ci1 {position: absolute;left:0px;top:0px;-webkit-transform-origin: 0% 0%;}

.anim1{
    -webkit-animation-duration: 5s;
    -webkit-animation-name: animation1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:1 ;

}

@-webkit-keyframes animation1
{
    0%{ -webkit-transform: translate(25px, 25px) }
    50%{ -webkit-transform: translate(200px, 00px) }
    100%{ -webkit-transform: translate(0px, 200px) }
}

</style>

<script type="text/javascript">

    window.addEventListener("load",win_load,false);

    function win_load()        
    {
        var c=document.getElementById("ci1");var ctx=c.getContext("2d");
        ctx.fillStyle="#ff0000";
        ctx.fillRect(25,25,30,30);

    }

</script>
这是一个很难解决的问题

在转换规则中添加

rotateZ(0deg);
使它成为

-webkit-transform:rotateZ(0deg) translate(30,40);
这迫使webkit使用硬件加速（如果可用），并通过位临时提高性能

尽管这项工作并没有什么值得夸耀的地方

android 3.x之后，动画变得流畅，请尝试。

但只有一个方向的动画，即仅在x方向或y方向进行平移，质量可以接受。当有一个斜坡时，一切都完了，动画是可悲的，什么版本的Android变得更好和可接受。这个技巧不起作用，因为硬件加速在三星Galaxy Ace S5830上不起作用，有Android 2.2是的，我试过了，虽然trickit在Galaxy Y上工作的有用信息。另一个信息是，当我移除50%的关键帧时，没有问题。那么为什么不使用css转换和JavaScript来实现这一点呢？你可以让它在帧中转换，然后应用其他帧，是的，这听起来非常愚蠢，但可能会起作用，因为它不需要计算整个动画，只需要1个过渡或1个过渡方法，因为我发布的只是一个示例。我有更复杂的动画，有100个关键帧，将其分解为通过javascript应用的过渡，将使动画变慢。100s的关键帧当然会减缓你的动画下降，考虑设备规格！