0

一个简单的翻译动画（在一个小矩形上）在 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>
4

1 回答 1

-1

这是 hacky 解决方法。

在转换规则中添加

rotateZ(0deg);

使它变成

-webkit-transform:rotateZ(0deg) translate(30,40);

这迫使 webkit 在可用的情况下使用硬件加速，并按位提高性能。

虽然没有保证这个工作。

并且动画在 android 3.x 之后变得更加流畅，试试看。

于 2012-07-17T08:09:31.133 回答