0

Android 2.2 ブラウザーで、単純な変換アニメーション (小さな四角形) がフレームをスキップしているのは非常に驚くべきことです。毎秒10フレームにもなりません。端末は Samsung 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

これはハッキーな回避策です。

変換ルールに追加

rotateZ(0deg);

となるように

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

これにより、Webkit は可能な場合はハードウェア アクセラレーションを強制的に使用し、ビット単位でパフォーマンスを向上させます。

これが機能するための保証はありませんが。

そして、アニメーションは Android 3.x の後に滑らかになります。試してみてください。

于 2012-07-17T08:09:31.133 に答える