2

HTML5 ビデオに動きのアニメーションを追加しようとしていますが、結果は非常に不安定で、まったくスムーズではありません。

HTML は次のとおりです。

<div id="video">
    <video width="320" height="240" controls="controls">
        <source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4"/>
    </video>
</div>

そしてCSS：

@-webkit-keyframes movement {
    0%  { -webkit-transform: translate3d(0px, 0px, 0); }
    50% { -webkit-transform: translate3d(100px, 100px, 0); }
    100%  { -webkit-transform: translate3d(0px, 0px, 0); }
}

#video {
    -webkit-animation: movement 20s linear infinite;
}

フィドルのリンクは次のとおりです: http://jsfiddle.net/LSAm5/

動きは非常に不安定で、ビデオの境界線とコントロールで非常に目立ちます。私は主にクロムとiPadでテストしています。

このようなアニメーションをより滑らかに見せる方法はありますか?

ありがとう。

4

2 に答える 2

0

クリス私はあなたがデバイスとブラウザの限界にぶつかっていると感じています。

MacBookProとChromeのSafariであなたのリンクを表示しました。iPad1のページもチェックしました。SafariはChromeよりも動きをうまくレンダリングすると思います。SafariコントローラーバーはQuicktimeバーであり、小さくて暗いため、大きな青いプログレスバーがあるChromeよりも動きが目立ちません。

つまり、パフォーマンスを向上させる他の方法でコードを記述できるとは思いません。

また、プラットフォームによってもパフォーマンスが異なると思います。ブラウザはコーデックを介してビデオをデコードし、結果のビデオフレームを画面に描画し、画面上でビデオフレームを常に移動する必要があることを忘れないでください。

于 2011-08-21T14:50:11.143 に答える