一時停止して再開できるモバイル用のアニメーションを作成する最善の方法OnClick

Question

私は、音楽を再生し、アニメーション自体をクリックしてから再びクリックすると停止します。これを行う最善の方法は何ですか？

私の最初のアイデアはGIFになっていましたが、一時停止してonclickイベントを開始するのが難しくなりました（私はhtml5を使ってGIFから静止フレームを描画するスクリプトを見つけました）。

私はMP4（h264）にしてhtml5ビデオを使用することができました。ポーズとスタートはすべて組み込まれていますが、これはファイルサイズが大きくなり、わかりません。モバイルで？私は多くの背景ビデオがモバイルでサポートされていないことを知っています、そして、それは静止画に落ちます...私はこれについて間違っていますか？

Adob​​e Animateを使用してJavaScriptアニメーションとしてエクスポートし、HTML5キャンバスで使用できます。これに互換性の問題はありますか？ HTML5のキャンバスアニメーションを簡単に一時停止して再開できますか？

Answer 1

jsからこのイメージの位置とクリッピングを使ってこのイメージの一部を表示するよりも、スプライトイメージ（アニメーションのすべてのフレームを持つイメージ）を作成できます。

また、フレームごとにCSSのエントリをバックグラウンドで作成することもできます.JSではいくつかの要素のクラスを定期的に変更するだけです。

この場合、アニメーションを完全に制御できるため、アニメーションを遅くすることも、一時停止することもできます。