8

Android WebView で CSS3 アニメーションを使用しようとしていますが、アニメーションの開始時に非常に厄介な遅延 (約 500 ミリ秒) が発生します。

アニメーションはスムーズに実行され、遅延はありませんが、開始時に遅延があります。遅延がないので、パフォーマンスの問題ではないと思います。それともそうかもしれませんか？

これはデフォルトの 300 ミリ秒の onclick 遅延ではありません。すでに ontouchstart に変更しており、アニメーション/トランジション以外のことを行う場合、遅延はありません。この二人だけで。

これは animation-delay プロパティでもありません。既に 0 に設定しています。

考えられる説明/解決策はありますか？

PS: 実行しようとしているアニメーション/トランジションは、transform: translateX()プロパティを使用しています。以前、 で試してleft: Xpxいたのですが、アニメーション中にラグがありました。変換ではラグはありませんが、遅延があります。

4

3 に答える 3

4

私は同じ問題を抱えていて、合理的な解決策を見つけることができませんでした。私はさまざまなアプローチを試しましたが、これらは私の結論です:

  • アニメーションを長くすると滑らかに見えますが、最初の遅延は減りません
  • ハードウェア アクセラレーションをオフにすると、アニメーションが速くなります (遅延も減少します) が、一部のフレームがドロップされ、アニメーションがスムーズではなくなります
  • すべてtranslate3dをtranslateX/ translateY/に変更translateZ- 視覚的な違いなし
  • アニメーションを JavaScript で制御される複数のトランジション (transitionEndイベント) に変更すると、途中で複数の問題が発生して ( が起動されるたびに) 速度が低下しtransitionEndます。

私の推測では、CSS アニメーションは Android では単に遅く、それらを表示するには事前計算が必要です。したがって、最初の遅延。おそらく、Chrome が Android のデフォルト ブラウザになるまで待つ必要があります。

于 2013-06-17T07:35:14.903 に答える
0

遅延に役立つかどうかはわかりませんが、3D 変換はハードウェア上で実行されるため、translate3d(x,0,0)代わりに を使用する必要があります。translateX

そのリファレンスは今のところ見つかりませんが、Google Android HTML Developers サイトでそれに関する記事を読んだことを覚えています。

于 2013-05-16T18:51:53.663 に答える
0

ストックブラウザでも同じ問題が発生していました。アニメートしているブロックにこれを追加できることがわかりました。

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

これにより、アニメーションが滑らかになり、アニメーションの開始が早くなり、アニメーションの前後のちらつきがなくなります。

于 2014-08-29T00:55:02.540 に答える