問題タブ [gsap]

TweenLite [アクションスクリプト 3 ライブラリ] を使用して、オブジェクトを (startX、startY) から (destinationX、destinationY) に円運動で移動させる方法はありますか?

I'm still relatively new to OpenGL/OpenCV, so I'm still unfamiliar with the multitudes of libraries available for use, particularly for animation. Where I'm from (the Flash world), we have access to several 3rd-party tweening engines that make life very easy for us when we want to programmatically move things around the stage without relying on the (vastly inferior) built-in Adobe tween APIs. One of the most popular is Greensock's TweenMax.

Javascript のアニメーション スクロールの問題に頭を悩ませています。

Greensock JS トゥイーン ライブラリの上に構築された SuperScrollorama Jquery プラグインを使用しています。

私が求めている基本的な効果は、セクションを「固定」してから、垂直スクロールを使用して一部のコンテンツを展開し、コンテンツが完全に展開されたらセクションを「固定解除」して、ユーザーがスクロールできるようにすることです-つまりhttp:// blueribbondesign.com.au/example/

しかし、この同じ効果を複数のセクションに次々と適用しようとすると、すべてが壊れてしまいます。固定された要素の下の「固定されていない」コンテンツが画面から押し出され、アニメーションを実行するときに要素の高さを誤って計算しているようです。逆に（つまり、ページを上にスクロールします）。- すなわちhttp://blueribbondesign.com.au/example2/

「position:fixed」と「pin-spacer」の div を際限なくいじり、Superscrollorama プラグインをさまざまな要素に接続しようとしましたが、それを機能させる方法がまだわかりません。

Web の優れたクラウドソーシングの頭脳からの助けをいただければ幸いです。

乾杯、

TN。

私は比較的新しい JavaScript ですが、他の言語には慣れています。Greensock タイムラインを使用してモジュラー シーケンスを構築し、コードの重複を削減しようとしています。すべての関数からアクセスできるシングルトン タイムラインを作成しようとしています。グローバル変数を使用して to() メソッドをそれに接続してみました。これは chrome と iexplorer では機能しましたが、Firefox では機能しませんでした。Firefox エラー コンソールに「this.timeline is null」というエラーが表示されました。それから私はこれを試しました：

これにより、必要なシングルトンが作成されましたが、FFでのみ同じエラーが発生します。以下のコードは、chrome と iexplorer の両方で正常に動作します。

dev.html:

foo.js:

したがって、これにより #bar と #canv が同時に入ります (do2(0) を呼び出すと、#bar が完了した後に #canv が入ります)。

私が間違っていること、またはFFがコードを別の方法で処理している理由について何か洞察はありますか?

ご協力いただきありがとうございます。

編集1

ブラウザのバージョン: Chrome(19.0.1084.56) Internet Explorer(9.0.8112.16421) Firefox(13.0)

EDIT2

エラーは、TweenMax.min.js ファイル内から生成されます。

EDIT3

グローバル タイムラインとシングルトンを使用する前に、TimelineMax 参照を各関数に渡し、更新された TimelineMax を返すことで、目的の機能を実装しました。したがって、私のコードは次のようになりました。

foo.js

これは Firefox では問題なく動作するように見えましたが、タイムライン オブジェクトでホットポテトをするのは少し面倒です。それは好ましい方法ですか？整形式のコーディング標準と JavaScript のベスト プラクティスはどこにありますか?

EDIT4

完全な非動作コードは次のとおりです。Chrome と IE の両方で期待どおりに動作しますが、TweenMax.js ライブラリからの FF でエラーが発生します。

dev_page2.html:

dev2.js:

背景（B）と前景（F）の2つの画像を使用したプロジェクトに取り組んでいます。

私の目標は、（F）を「焼き払って」（B）を明らかにすることです。現時点では、円形のマスクを使用してこれを実行しようとしています。マスクを静的に表示することはできますが、何を試しても、マスクを成長させて（B）をさらに表示することはできません。何か案は？これは私が今持っているコードです

何か提案や代替方法はありますか？

ありがとうございました！

問題を作成してから問題を認識するまでに 6 か月のギャップがあるため、深刻な問題を抱えています。今年の初めに、Flash のみの Web サイトにグラフィックの追加とテキストの変更を依頼されました。サイトは非常に複雑で、私はそのようなコードをゼロから作成するレベルに達していませんでしたが、Flash の経験があり、グラフィックを追加して内部テキストの一部を更新できたようです。グラフィックを追加する過程で、新しい要素を含むすべての要素を含む main_mc を拡大する必要がありました。当時は不明でしたが、main_mc シンボルのプロパティを変更すると、別の Main.ac ファイルで作成された複雑な Tweening アクションが無効になったようです。メインには触れませんでした。

これに関連していると思われるクラスファイルのコードは次のとおりです。

私自身と私のクライアントに公の場で恥をかかせる危険がありますが、私は本当に助けを使うことができたので、ここにライブのウェブサイトがあります: (削除されました)

(英語で) [サービス] -> [サンプル] に移動します。法務などのボタンをクリックすると、サンプル トピックにドリルダウンします。古い作業バージョンでは、訴訟などの最後のトピックをクリックすると、画面が右側にアニメーション化し、プリンターから出てきたように見える英語の文書の画像が表示されます。次に、ユーザーが翻訳ボタンを押すと、ドイツ語の 2 番目の画像が表示されます。[Choose Again] をクリックすると、ステージ左のアニメーションでプライマリ画面に戻ります。もちろん、これはうまくいきません。

動作中のバージョンを dev の場所に置きました: (削除済み)

おそらく 1 日かそこらで dev コピーを削除します。

これを整理するための助けをいただければ幸いです。

[編集] 古い main_mc は 2359x1692 で、新しい main_mc は 2967.65x1939.35 であることを付け加えておく必要があります。ステージ上の位置は同じです: -800 x 0. 6 か月前の現在のように、新しい寸法がどのように達成されたのか正確にはわかりませんが、余分なグラフィック要素に合わせて拡大する必要がありました. クライアントは、ワイドスクリーン モニターで見栄えを良くするために、元の開発者に広い領域を要求しました。

ありがとう。

私はこのコードを持っています：

この2つのトゥイーンをループする方法は？2番目のアニメーションが終了すると、停止します。無限ループでタイムラインを次々に実行することは可能ですか？

Tnx

写真のズームインとズームアウトに Greensock の TweenLite (AS3) を使用しています。コーナー付近でズームアウトするときは注意が必要です。トゥイーン中に幅/高さ/x/yをクランプして、範囲外にならないようにする方法があるかどうか疑問に思っています。

現時点では、トゥイーンが完了したときに呼び出す「フィクサー」メソッドがありますが、理想的ではありません。

私が何を意味するかを示すためにデモを作成しました。コーナーの近くでズームアウトしてみてください。(マウスでスクロールしてズーム、クリックしてパン...)

http://cloudchamber.knapnokgames.com/CCMedia/CCImageViewer/CCImageViewer.html

更新: トゥイーン コードは次のとおりです。

X と Y の計算は最適ではないかもしれませんが、うまくいきます。彼らは理解するのにしばらく時間がかかりました;）

ほとんどのソーシャル ゲーム (CastleVille (c) Zynga や Magic Land (c) Woogaなど) には、木を切るなどの単純なアクションに対してプレーヤーに与えられるコインやスターなどのドゥーバーがあります。

doobers は、いくつかのトゥイーンを実行しているようです。

1. 最初に彼らは飛び出して跳ねます。そして、それらの次元も跳ねます。
2. その後、ベジエ曲線でスコアバーまで飛んでいきます。

非常に単純なテスト ケースと質問用のスクリーンショットを用意しました。テスト ケースは Flex です。これは私が最近使用したものだからですが、私の質問はより一般的です (ActionScript、Tween)。com.greensock.TweenMaxライブラリを使用しています。

私の問題: 2 番目のベジェ部分を実行する方法を理解しました。しかし、最初の跳ねる部分をどうやって行うのかわかりません。

MyApp.mxml (Flex である必要はなく、Flash でもかまいません):

Star.fxg:

また、最後に「ポラロイドカメラのフラッシュ」エフェクトを追加するにはどうすればよいですか？

アップデート：

LondonDrugs_MediaServices の助けを借りて (ありがとう!) ドゥーバーは今すぐスクイーズしてジャンプします (コードは以下にあります) が、まだ 3 つの未解決の問題があります:

1. マウスオーバーイベントでflyTweenを実行するには?
2. 最後に「ポラロイドブリッツ」トゥイーンを追加するにはどうすればよいですか?
3. 最後にマウスオーバーハンドラーを削除する方法がわかりません-匿名のクロージャーであるため

また、GreenSock フォーラムに質問を投稿しました。

ヒントをありがとう

更新 2: LondonDrugs_MediaServices に感謝します。更新されたスクリーンショットとコードが再び表示されます。

doobers で遊ぶのは楽しいですが、まだ 2 つの小さな問題があります。

1. （遅延した）フライトゥイーンを本当に殺さなければならないのですか？代わりに、マウスオーバーで遅延を変更する (0 に設定する) ことはできませんか?
2. 最後に「カメラのフラッシュ」効果があるといいですね。それがどのように行われたか思い出せません - いくつかの標準的な Flash MX エフェクト...

MyApp.mxml:

私はGreensockのTweenMaxJSとThree.jsを試してきました。どちらのライブラリもrequestAnimationFrame（rAF）を使用しているため、どちらのライブラリでこれを処理するかを決定する必要がありました。

に組み込まれているrAFを使用するThree.jsと、約30 fpsで実行され、非常にスムーズです。

たとえば、使用する場合TweenMax：TweenMax.ticker.addEventListener('tick', animate);約55〜60 fpsで動作しますが、少し途切れがちです。

Three.jsrAFバージョンと同様に期待どおりに実行されるfpsを変更できますTweenMax。TweenMax.ticker.fps(30);

私の質問は、どちらの方法が好まれ、一方が他方よりもベストプラクティスと見なされるかということです。また、Three.jsを選択した場合、rAF実装のfpsを変更できますか？

最後に、より多くのオーディエンスに合うようにfpsをどのように決定しますか？30 fpsに制限することは問題ないように見えますが、少し恣意的です。一部のユーザーは、私が許可しているよりもはるかに高いレートを使用できる場合があります。

アップデート ：

mrdoobとjackからのフィードバックから、私はthree.jsのrAFとTweenMaxを使用したrAFの両方を、アンチエイリアスをオンまたはオフにして試しました。

アンチエイリアス：

http://jsfiddle.net/cR7Lx/21/

http://jsfiddle.net/cR7Lx/23/

http://jsfiddle.net/cR7Lx/24/

アンチエイリアスオフ：

違いを説明するためにrequestAnimationFrameが内部でどのように機能するかを知っている人と一緒に行うことができます。今のところ、アンチエイリアスをオンにしてTweenMax30fpsまたはThree.jsのいずれかを使用します。