オーバーラップするアクションとアニメーションのデザインパターン？
重複するUIアクションとアニメーションを処理するためのデザインパターンはありますか？いくつかの例：
- ユーザーがクリックすると追加のコントロールが表示されるように展開するインタラクティブなテーブル行があり、ユーザーがもう一度クリックするとその逆になります。展開アニメーションの進行中にユーザーが行をクリックした場合、アニメーションを停止し、停止した場所から元のサイズに縮小して戻したいと思います。
- グループ内に例1の行のセットがあります。最後の行が削除されたら、グループを縮小してからコールバックで自分自身を削除します。ただし、グループが縮小している間も、ユーザーはグループに別の行を追加できます。その場合は、グループの縮小を停止し、正しいサイズに展開して、行を追加してください。
- 例2のUIの並べ替え機能がある場合はどうなりますか？ユーザーが並べ替えボタンをクリックすると、行がシャッフルされ、新しい位置にアニメーション表示されます。ただし、ユーザーがテーブルの行をクリックしたり、行を削除したり、UIで許可されているすべてのことを実行したりできるようにしたいのですが。 UIは、シャッフルアニメーションが優先され、適切に動作する必要があります。
新しいアクションが実行されたときに、UI要素のすべてのアニメーションを自動的に早送りしたり、すべてのアニメーションUI要素でユーザー入力をブロックしたりできます。しかし、それは私にはエレガントではないようです。ユーザーとして、私は自分がやりたいことを妨げたり妨げたりしないUI、つまり実際のオブジェクトのように動作するUIを本当に尊敬しています。また、自分のアプリケーションでも同じことをしたいと思っています。
これを堅牢なシステムにするためには、アクション/アニメーションごとに制約を設ける必要があるようです。たとえば、データ/状態/モデルへの変更が発生する前にではなく、アニメーションへのコールバックでonlyが発生することを確認する必要がある場合があります。例2では、ユーザーがボタンをクリックして最後の行を削除するとすぐに、モデル内のグループを削除することはできません。アニメーションの最後に、アニメーションの最後にのみ行う必要があります。 （そうでない場合、ユーザーがアニメーションの削除中に別の行を追加することを決定した場合、グループの削除を元に戻すことは非常に困難です。）また、2つの異なるアクションからの2つのアニメーションが重なる場合に、相互に排他的なプロパティは、以前と同じようにアニメーションを継続します。 （つまり、行がクリックで拡大しているときにユーザーがテーブルをソートした場合、行が新しい位置に移動しているからといって、幅の拡大が止まってはなりません。）そして、各アニメーションのデフォルトの開始はどうでしょうか？行が削除されたときにフェードアウトし、別のアクションが暗黙的に削除をキャンセルした場合、他のアクションが必ずしもそれを認識していなくても、フェードアウトは停止してアニメーションで戻ります。
また、アニメーション（視覚的なプロパティの変更）とアクション（アニメーションを含む、潜在的なモデルの変更を伴うイベントのシーケンス）の上位レベルの問題もあります。例2では、「最後の行を削除」は明らかにアクションです。これは、最終的にグループが削除されるためです。ただし、ほとんどのUIライブラリでは、アニメーションにコールバックを追加して、2つを混同します。これもゲームの問題です。キャラクターのスローアニメーションが終了した後に手榴弾スローをトリガーする必要がある場合、コードでそれをどのように表現しますか？モデルとビューコードを混在させずに、外部要因に基づいてアニメーションの速度を遅くしたり速くしたりしながら、手榴弾をタイムラインに配置するにはどうすればよいですか？
これについて考えれば考えるほど、頭が痛くなり、誰かが私よりもずっと慎重にこれを考えてきたと確信しています。何か案は？
（現時点では、主にWeb UIのこれに興味がありますが、将来の非Webプロジェクトの一般的なアプローチにも興味があります。）
デザインパターン
Rucamzuが言及デコレータパターンが適合しているようです。 visitorパターンは、アニメーションを実行するオブジェクトがDOM要素のプロパティ/スタイリングを更新するためにアニメーションの過程全体でDOM要素に複数回アクセスするため、適合する場合があるようです視覚的な変化。
Web UI内での実装（JS/CSS/HTMLを想定）
同時/連続非同期操作キューイングを特徴とするライブラリがいくつかあります。 （プログラミングしているターゲットクライアントで）通常探すものには、次のものが含まれます。
- 連鎖機能を提供します（プレーヤーの腕を動かしてから手榴弾を投げるのに役立ちます）
- 非常に詳細なレベルおよびグループベースのレベルでイベント/コールバックを発生させます（腕がいつ終了し、手榴弾のアニメーションがいつ終了し、手榴弾が着弾したかを知るために、ダメージ計算を実行できます）
- シングルアクションまたはグループアクションを逆にします（アニメーションの開閉に役立ちます）
私が検討できるライブラリがいくつかあります。
- Greensock TweenMax/TimelineMax
Greensockには、最も堅牢なアニメーションパッケージの1つがあります。軽量でペアリングするオプション、または多数のプラグイン（およびその間のどこか）を完全に吹き飛ばすオプションがあります。 TweenMaxは単一のアニメーションを可能にし、TimelineMaxはより高度なチェーン/シーケンスを可能にします。 - CreateJS
クレイジーなアニメーションがある場合は、キャンバスを使用して行うのが最善かもしれません。 2Dトゥイーン機能を備えたライブラリーがあり、ブラウザーがあればそれをWebGLでサポートすることができます。より詳細なアニメーションのためのスプライトシートもサポートします。 - jQuery Deferredオブジェクト/プロミスとしての実装。
遅延オブジェクトは、成功するまでに任意の時間がかかる場合があります。 jQueryのほとんどのAJAXリクエストは、成功と失敗のために遅延オブジェクトを実装します。また、これらのアクションは即時でも可能です。これは、複数のアニメーションと関数呼び出し、および非同期操作を連鎖させるのに役立ちます。私は信じていません。 Deferredは操作を元に戻すことも、再実行することもできません。新しいインスタンスを作成する必要がありますが、非常に強力です。
選択はおそらく、アニメーションの強度と、サポートする必要のあるブラウザとデバイスに基づいて行われます。
Web UIの実装に関する推奨事項
あなたはおそらくフラッシュプロジェクトを構築していませんが、彼らは当時の複雑なアニメーションで知られていました。上記の上位2つのアイテムは、フラッシュの世界にルーツがあるため、数年以上前から存在しています。 Greensockのライブラリを使用して、ほぼすべてのフラッシュプロジェクトを6年間実装しました。彼のドキュメントはしっかりしていて、例もたくさんあります： Greensock JS入門 。
animationsを、それらの対話機能に影響を与えずに、テーブルの行にアタッチする必要があります。 デコレータ ここに収まります：ユーザーインタラクションイベントを装飾されたオブジェクトに転送しながら、アニメーションを管理します。ここではアニメーション自体は重要ではなく、デコレータオブジェクトの（単なる）パラメータであれば十分です（したがって、同じデコレータクラスを任意のアニメーションで再利用できます）。また、この方法では、デコレータをネストするだけで、同じ行で任意の数のアニメーションを同時にアクティブにすることができます。視覚的な結果は別の話です:)
しかし、一歩下がって全体像を探すと、ユーザーインターフェイスの観点から見ても、アニメーションは詳細だけです-多かれ少なかれ対処するのが難しい場合優れたユーザーエクスペリエンスを提供するために、そして間違いなく非常に関連性があります。しかし、それらは焦点ではありません。一般的なスキームは次のようになります。
- ユーザーasks事前定義された入力イベントによって実行されるアクションのシステム。
- システムスケジュールユーザーのコマンド。 明示的な要件がない限り、ここでは即時実行を想定しないでください。
- システムexecutesユーザーのコマンド。これには、実行するのに任意の時間とタスク（アニメーションをカウントできるタスク）が必要です。ここで、システムは、スケジューラーおよび要求されたアクション間の依存関係に応じて、コマンドを順次または同時に実行（開始）できます。