問題タブ [spritely]

スプライトをアニメーション化するためにSpritelyを使用しています。私はうまくパンすることができましたが、私の最終的な仕事は、フェードインおよびフェードアウトする「スター」を作成することです。スプライトシートを作成しました：

ここにあるドキュメントに従い、フレーム数と1秒あたりのフレーム数を変更しました。

私の問題は、スプライトのアニメーションがぎくしゃくしていて、スプライトの画像に沿っていないように見えることです。スプライトの画像はフェードインしてからフェードアウトするはずです。現在、それは半可視と完全の間でぎくしゃくしています。

Chromeのコンソールを使用してフレームをログに記録しましたが、フレーム0、1、2しか取得されていないようです。12フレーム（スプライトの画像ごとに1つ）を期待していましたが、これは初めてなので、間違っている可能性があります。ログによると、最後のフレームにも到達していないようです。

これが私のコードの全文です：

1 つの問題に 2 日間固執した後、最終的に複数のフレームからアニメーションを作成するはるかに簡単な方法を見つけました...それはSpritelyと呼ばれます。

私がこれまでに持っているもの

• マウスオーバーするとアニメーションが始まります。

• マウスアウトすると、アニメーションが巻き戻されます。

問題

アニメーションが終了する前にマウスアウトしたり、巻き戻しが終了する前にマウスオーバーしたりすると、行き過ぎて同期が取れなくなります。

私がしたいこと

• マウスアウト時に、フレーム 1 まで巻き戻し、そこで停止します。
• マウスオーバーで、最後のフレームまでのみ再生し、そこで停止します。
• フレーム x で (アニメーション中に) マウスアウトすると、フレーム x からフレーム 1 に巻き戻されます。
• フレームxで（巻き戻し中に）マウスオーバーすると、フレームxから最後のフレームまで再生したい。

前もって感謝します！

http://jsfiddle.net/reveries/9Dt7n/ http://www.reveriesrefined.com/test/

ドアをかざすと、アニメーション化されるはずです... jsfiddleでは見事に機能しますが、このコードをWebサイトに配置すると、機能しなくなります。画像は引き続き表示されますが、画像にカーソルを合わせるとアニメーションは表示されません。js fiddleに、私が含めていない隠しコードがあるのではないかと思いますか？

jQuery（w / srpitely）

Spritelyスクリプトを使用してアニメーション化するキャラクターをページに配置しようとしています。私が使用しているスプライトシートには、合計92フレームが含まれています。アニメーションをクリックできるようにしたいと思います。

初めてクリックするときは、フレーム70まで再生して停止させたいです。次にクリックしたときに、アニメーションをフレーム70から92まで再生して停止したいと思います。

コードはどのように書くべきですか？

これまでのところ、アニメーションをフレーム70まで再生して停止することができます。初心者のWeb開発者でさえ、これはかなり簡単でした。

これが私がこれまでに持っているものです：

このコードでは、キャラクターをクリックすると、フレーム1-70が再生されて停止します。それは良い。ただし、次にクリックすると、フレーム70からピックアップされ、さらに70フレーム続きます。アニメーションが2回目のクリックでフレーム70から92のみを再生するように、これを変更するにはどうすればよいですか？

PS：最終的には、クリックごとに異なるフレームシーケンスをキャラクターに実行させたいと思います。

あなたがこれで私を助けることができれば私はとても感謝するでしょう！ありがとう！

熱気球の .png 画像を 3 つ作成しました。それぞれ大きさが違うので「奥行き」が感じられます。これらの .png をコーディングして、熱気球のようにコンテナの周りを移動したり浮かんだりする最良の方法は何ですか?

私はSpritelyのウェブサイトから次のコードを試しました。

このコードを他の 2 つのバルーン (#balloon1) と (#balloon2) に配置し、それぞれの DIV を「#sky」というラベルの付いたコンテナー DIV に配置します。

速度を 10000 にすると、フロートがずっと遅くなると思いました。

しかし、それは私が望んでいたようにまったく機能していません。まず、ページが読み込まれると、3 つのバルーン (最初はコンテナーに沿って 3 つの別々の場所に配置されていました) がすべて、同じ正確な場所にすぐに浮かび、その後、その場所からあまり移動していないように見えます。

3 つのバルーン イメージをコンテナー内でランダムかつリアルに移動させる、より簡単で効果的な方法はありますか?

少しでもお役に立てることがありましたら、よろしくお願いします！

マウスをオブジェクトの上に置いたときに再生したいスプライトアニメーションがあり、マウスがオブジェクトから離れるたびに逆方向に再生して最初のフレームで停止します。

これは私がマウス入力アニメーションのために持っているものです：

基本的に、バナーにカーソルを合わせると、フレーム34で完了するまで口ひげが「成長」します（ただし、フレーム1では口ひげはありません）。

この口ひげを逆再生して、マウスがホバー状態を離れるたびにフレーム1に戻るようにします。

問題は、再生を逆にするいくつかの方法を試しましたが、常に最初のフレームに戻るとは限らないことです。

どうすればこれを達成できますか？

ご意見をお寄せいただき、誠にありがとうございます。

オブジェクトをクリックすると、2 つのことが起こります...テキストを含む div が表示され、キャラクターが短いスプライト アニメーションを再生します。ただし、最初の再生後にスプライト アニメーションを完全に削除したいと考えています。div テキスト ボックスを引き続きクリックで切り替えたい。

これは私が持っているものです:

この時点で、「#chalkboardweare」オブジェクトをクリックするたびに、「#boxweare」と「#dude」が切り替わります...

クリックするたびに「#boxweare」divを切り替えたい。

最初のクリック後にのみ「#dude」divを切り替えたい。

誰かがこれで私を助けることができますか?

ありがとう！

私は少しクロスプラットフォームのアニメーションをやろうとしてきたので、ウェブキットのフレームやキャンバスなどはなく、svg(Androidの問題)もありません

私は 7 つの png を持っていて、(setTimeOuts の束を使用せずに) それらをアニメーション化したいと考えています。

私が見たものにはsprite.js、spritelyなどが含まれますが、7つのフレームすべてを単一のスプライトに結合したくありません

考えられる 7 つの個別の png をクロスプラットフォームで簡単にアニメーション化できるライト アニメーション ライブラリはありますか?