問題タブ [spritely]

HTMLと を使用して回転するアニメーションを作成しようとしていますjQuery。

私は2つの異なる方法を試しました：

1）アニメーションを発生させるカスタムアニメーション関数を作成しました。

2.元気に

どちらの場合も、私のアニメーションはひどく遅くなります。ではvfx_1_anim30 フレームまでしか行っていませんが、実際には 100 フレームあります。png シーケンス イメージのサイズは、コードで約 55000 x 400 spritely、カスタム アニメーション コードで約 5500x4000 です。

画像をアップロードして自動的に縮小しない無料の画像ホスティング サイトが見つからなかったため、フィドルを作成できませんでした。

私の質問: 画像サイズが大きく、フレーム数が多いために影響を受けないアニメーションを作成するにはどうすればよいですか。キャンバスは良い選択肢でしょうか? スプライトアニメーションに使用している画像へのリンク。

画像

ありがとう！

「Spritely」という JS プラグインを使用して背景画像をアニメーション化しています。すべてが機能します (背景が動いています)。しかし、div(スプライト)をクリックしたときに関数をアクティブにすることはできません。

（script.js、jquery、spritelyが含まれています）。

HTML はたった 2 つの div (#container と #hills)

CSS

JavaScript

すべてのフレームを最初に再生した後、フレームの後半を無限にループする必要がある Spritely の実行を実装しています。これはコールバックで実行できますか? - 「on_frame:」を見ましたが、これは関数として実行されていないようです。

最初のクリックで順方向に再生 (フレーム 0 --> X) し、フレーム X で停止するクリック可能なスプライト アニメーションを作成しようとしています。完了したら、クリックすると逆方向に再生され (フレーム X --> 0)、フレーム 0 で停止します。リンス/繰り返し。

この jsFiddle にはかなり近いものがあります: http://jsfiddle.net/ahainen/njHAC/3/

しかし、問題があります。中央の円をクリックすると、順方向に再生されます。しかし、完了時に円をクリックすると再生されますが、間違ったフレームで終了します。そこから、壊れたままです。

私はこれを学んでいるので（ここではグラフィックデザイナー）、クリックしてアニメーション化して巻き戻すことでCSSスプライトアニメーションを理解しようとしています。これよりも良い方法があれば教えてください。

また、現在、アニメーション中にクリックできないようにするタイマーがあります。ユーザーがクリック (またはホバー) すると、方向が逆になり、フレーム 0 またはフレーム X で停止するようになれば幸いです。

さらに情報を提供できる場合はお知らせください。

関連するコード:

私が開発している JQM/PhoneGap アプリでアニメーションを使用することを主張するクライアントがいます。元のアニメーションは Flash (.swf) とビデオでした。私は、基本的な Web サイトで作成されたトレーニング マニュアルを取得し、JQM と PhoneGapping を使用してアプリにしています。その部分は問題ありません。現在のアニメーションとビデオを配置することは、私が迷っているところです。Spritely.net を調べましたが、アプリでの使いすぎについて警告されています。一部のチャプターには、最大 10 個の異なるアニメーション/ビデオがあります。キッカーは、このアプリがオフラインで動作する必要があることです。

返信ありがとうございます。

グリフ