oil-oil/oil-motion

中国語英語

オイルモーションはエージェント向けの汎用インタラクティブアニメーションスキルです。動きの設計、連続フレームの生成、アニメーションリソースの整理、そして最終効果をページスクロール、マウス、ドラッグ、タッチ、デバイスの向きに統合する役割を担います。

使用時は、表現したいこと、提供するアセット、アニメーションが従うべき動作を指定するだけで済みます。特定の生成、チェック、圧縮、フロントエンドの実装はエージェントが処理します。

デモンストレーション

https://github.com/user-attachments/assets/08e26ad6-ca23-4f31-ac53-44c7692ba99d

設置

エージェントにリポジトリアドレスを伝えます:

コマンドでインストールし、完了後にエージェントにスキルを再ロードさせることもできます:

適用される境界

被写体自体が変化する必要があるインタラクティブアニメーションに適しています:キャラクターターン、製品の分解、素材の変更、カメラの切り替え、あるいは既存のグリーンスクリーン動画やスプライト画像をウェブページのリソースに整理し、コントロールで制御できる。

CSS、JS、SVG、Lottie、リアルタイム3Dだけで可能なインターフェーストランジション、ボタンのフィードバック、レイアウトアニメーションは、通常のフロントエンドで直接処理でき、このマテリアルワークフローを必要としません。独立したビデオ編集や単一画像の配置も除外されています。

実装に適したアニメーション

• スクロールダウン時:製品は徐々にブラスト画像に展開し、カメラは内部構造に入るか、複数の状態を切り替えます。
• 複数のシーンをスクロールする際:複数の連続した映像セグメントを使って連続テイクを作成します。例えば、都市のパノラマからチップの内部まで進む、あるいは前景の障害物や似た形の物体を使って次のシーンに移行するなどです。
• マウスが動くとき:キャラクターの顔は常に画面の方を向いており、視線はカーソルを追います。またはハードウェア製品が引きずられてブースを360度回転させます。
• 進行状況をドラッグする際:アニメーションは前進、後退、または指定された位置で停止するジェスチャーに従います。
• 携帯電話で:タッチやデバイスの傾きを使って被写体の向きやレベルをコントロールします。
• クリック、ホバー、ステータス変更時:対応するアクションの切り替えを再生します。アクションを逆にすると、現在の画面から退出します。
• 動作なしのとき:ユーザーは入力を始めるとすぐにフォローに切り替え、自然なマイクロムーブメントやループを維持します。

これらのアニメーションは、製品紹介、キャラクターとのやり取り、操作デモンストレーション、データ変更、章の移行などに利用できます。Oil Motionはモーションの一貫性、画像の鮮明さ、ロードボリューム、モバイルパフォーマンスを同時に管理します。

作業原理

AI生成の動画は安定したタイムラインに整理され、操作方法がインタラクション目標に基づいて選択されます。入力値はアニメーションの進行状況に連続的に対応したり、通常の再生トランジションのみをトリガーしたり、時間に応じてアニメーションを自律的に再生させることができます。スクロール、マウス、ステータス切り替えは入力源に過ぎず、直接再生モードを決定するものではありません。

全過程は以下の通りです:

このプロセスは三つの部分に分かれています。

まずはキー画面を確認しろ

重要な画像とは、製品の完全性、部品展開、最終分解など、動作中に維持しなければならない正確な状態を指します。エージェントはこれらの画像を作成・検査し、被写体のアイデンティティ、構造、ロゴ、構図、スタイルが変わらないことを確認します。

もし動画全体を直接生成した場合、モデルはプロセス中に製品構造、キャラクターの比率、またはアクションのエンドポイントを変更することがあります。キーショットを最初に確認することで、連続アクションに明確な出発点、プロセス、エンドポイントが設定されます。