「BallPicture − TrickyCubes」は、３Ｄ空間内に配置した立方体（以下、Cube と略）の周囲と内部で Ball を動かすアニメーション動画です。前半部分では Cube と Ball は各 1 個ですが、後半部分では 18 個の Cube に 3 個の Ball がからむアニメーションになります。
この動画は、YouTubeで公開しています。
|
アニメーション動画 「BallPicture」 シリーズ − 「Tricky Cubes」 |
「BallPicture − TrickyCubes」は、３Ｄ空間内に配置した立方体（以下、Cube と略）の周囲と内部で Ball を動かすアニメーション動画です。
前半部分では Cube と Ball は各 1 個ですが、後半部分では 18 個の Cube に 3 個の Ball がからむアニメーションになります。
この動画は、YouTubeで公開しています。
| 動画の作成方法 |
1．開発環境
IDE ： Visual Studio 2010 Professional Edition − WPF（C#）
.NET Framework ： .NET Framework 3.5 Client Profile
2．Ballの構成方法
「David Sackstein's Blog」で紹介されている SphereMeshGenerator クラスを使って、Ball の３Ｄオブジェクトを作成しました。
その Material に、TileModeで作成した市松模様の DrawingBrush を取り込んで、緑色、栗色、紺色の 3 種類の Ball を作成しました。
3．使用カメラ
BallPicture シリーズでは、通常 PerspectiveCamera を使用して遠近感を感じやすくしますが、この動画では OrthographicCamera を使用して、敢えて遠近感を感じにくくしました。
これは、この動画の狙いになっている「だまし絵」の錯覚効果をより高めるためのものです。
4．BGM
BGMには、フリー音楽素材サイト PeriTune の『Splash』を使用させていただきました。
| 動画の構成 |
BallPicture シリーズの「No.5 Torii」までのページでは、個々の工程で使用するアニメーションについての記載を行っていましたが、鬱陶しく感じるところもありますので、この動画以降のページでは、オブジェクトの標準的な移動、回転、サイズ拡縮のアニメーションについては、記載を省略します。
1．導入部
緑色の Ball を回転させながら、フェードインで表示し、続いて Cube をフェードインで表示します。
Ball と Cube のフェードインのアニメーションは、それぞれの表面 Material の Brush を、透明ブラシから不透明ブラシに変える ColorAnimation で行いました。
2．Ball の Cube 内通過
Cube の赤色面から橙色面へ Ball を 左右往復で貫通通過させます。
続いて Cube の緑色面から黄色面へも上下往復で、更に Cube の青色面から赤色面へ（片道で） Ball を貫通通過させます。
Ball が Cube 内を通過する際に、Cube の面上に Ball の投影画像が表示されるようにしました。
この Cube 面上への Ball 画像表示のアニメーションは、予め Ball の投影画像を別に作っておき、Ball の動きにあわせて Ball 投影画像を少しづつずらしたものが、Cube 面の Material に反映されるように、ObjectAnimationUsingKeyFrames を作成して行いました。
3．カメラのズームアウト
18 個の Cube が表示できるようにするため、カメラを後方にズームアウトします。
このアニメーションは、カメラの TranslateTransform3D の DoubleAnimation に、OrthographicCamera の Width プロパティの DoubleAnimation を加えて行いました。
4．全 18 個の Cube の配置
1 番目の Cube の上方に 5 個の新しい Cube を順次追加し、全 6 個になったところで、2 番目の栗色の Ball を投入します。
6 番目の Cube の右方向に次の 6 個の Cube を順次追加し、全 12 個になったところで、3 番目の紺色の Ball を投入します。
12 番目の Cube の手前方向に次の 6 個の Cube を順次追加し、これですべての Cube が揃います。
Cube 追加のアニメーションは、Timer を使って行いました。
5．Ball の Cube 内通過２
3 個の各 Ball が 18 個の全 Cube 内を通過していくように見せるため、各 Cube の面上に Ball の投影画像を表示します。
このアニメーションも、2 項で使用した手法で行いました。
6．Cube 周囲での Ball 回転と Cube 群全体の回転
3 個の Ball を Cube の外に取り出して、Cube の周囲で回転させます。
この Ball が回転している状態で、Cube 群全体を回転させます。
Cube 群全体の回転は、カメラを回転することで代替させ、緩−急−緩の速度調節をつけてカメラを回転させました。
そのため、カメラ回転のアニメーションには、DoubleAnimationUsingKeyFrames を使用しました。
7．「だまし絵」の種明かし
ここで「だまし絵」の種明かしを行いますが、その画像は省略します。
種明かしのアニメーションはカメラの回転で行い、DoubleAnimationUsingKeyFrames を使用しました。
8．フィナーレ
カメラのズームアウトでフィナーレ部分を作成しました。
このアニメーションには、OrthographicCamera の Width プロパティの DoubleAnimationUsingKeyFrames を使用しました。
| 公開・更新履歴 |
2017/09/01 ページを公開しました。
| ご質問・ご意見・ご感想 |
ご質問、ご意見、ご感想等の連絡は、
こちらへ