アニメーション動画 「BallPicture」 シリーズ − 「Tile Mode 1」 |
「BallPicture − TileMode 1」は、運動する Ball の表面、内面に Tile 画像を貼り付けて作成したアニメーション動画で、Tile 画像の動きを楽しむものです。
この動画は、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 の3Dオブジェクトを作成しました。
その Material に、TileModeで作成した画像の DrawingBrush を以下のコードで取り込んで、Ball を作成しました。
myBall.Material = new DiffuseMaterial(GetDrawingBrush());
Tile 画像とそのアニメーション、および GetDrawingBrush() に関しては、「TileMode で描画された画像のアニメーション動画の作成方法」 を参照してください。
3.BGM
BGMには、フリー音楽素材サイト DOVA-SYNDROME の『夕陽〜君に幸あれ〜』を使用させていただきました。
動画の構成 |
1.動画の基本的な構成
この動画は、以下のような前半部と後半部とから構成されています。
前半部
Ball の運動 : 自転と振り子運動
自転のアニメーション : AxisAngleRotation3D((1, 1, 1)軸)の DoubleAnimation
振子運動のアニメーション
X、Y 方向の運動 : TranslateTransform3D の DoubleAnimationUsingKeyFrames
Ball 軸傾斜 : QuaternionRotation3D の QuaternionAnimationUsingKeyFrames
Tile 画像の適用 : Ball 表面と内面
後半部
Ball の運動 : 自転と水平面内の公転運動
自転のアニメーション : AxisAngleRotation3D((1, 1, 1)軸)の DoubleAnimation
公転運動のアニメーション : TranslateTransform3D の DoubleAnimationUsingPath
Tile 画像の適用 : Ball 表面のみ
2.ツートーン・ストライプの導入
緑・赤ツートーンカラーのストライプを、最初は Ball の表面部に、続いて Ball の内面部に導入します。
このアニメーションでは、Tile 画像の DrawingBrush の Viewport プロパティに、RectAnimation を適用しました。
3.ピンク単色ストライプへの置換
緑・赤ツートーンカラーのストライプを、ピンク単色のストライプに置換します。
このアニメーションでも、前項と同様に、RectAnimation を使用しました。
4.水色ストライプの追加
ピンク色のストライプと直行する方向に、水色ストライプを追加します。
このアニメーションでは、ピンク色のストライプと直行する方向に、予め透明色のストライプを配置しておき、ColorAnimation によって透明色を水色に置き換えました。
5.ストライプから四菱要素への置換
二色のストライプを消して、中央に白丸を配した四菱要素を追加します。
二色のストライプを消すアニメーションは、各色を透明色へ置き換える ColorAnimation によって行いました。
白丸と四菱要素を追加するアニメーションは、予め透明色で配置した各要素をそれぞれの色に置き換える ColorAnimation によって行いました。
6.前半部から後半部への切替え
前半部で使用した Ball を退場させ、後半部用の Ball を導入します。
後半部の最初の Tile 画像は、小さな円環です。
この円環は、EllipseGeometry の Pen で描画しました。
Ball がその公転軌道を一周する間、ColorAnimationUsingKeyFrames を使って、Tile 画像の色を、赤〜緑〜青〜マゼンタ〜赤に変えるアニメーションを行いました。
この ColorAnimation は、この場面から小さいハートの Tile 画像の場面まで、同様に行いました。
7.小円環 Tile 画像のアニメーション
Ball が一周する間に小円環画像を横方向に縮めてまた戻すアニメーションを、次の一周で横方向または縦方向に縮めてまた戻すアニメーションを行います。
このアニメーションは、小円環を構成する EllipseGeometry の RadiusX プロパティと RadiusY プロパティの DoubleAnimation で行いました。
8.小円環画像の大円への統合
四個の小円環を一つの大きな円に統合します。
このアニメーションは、小円環の EllipseGeometry の Thickness プロパティを大きくする DoubleAnimation と、その Center プロパティを統合円の中心へ移動する PointAnimation で行いました。
9.円形状からハート形状へのアニメーション
Tile 画像を円からハート形状へ移行するアニメーションです。
このアニメーションは、ハート形状を得る PathGeometry を自作し、それに基づいた GeometryDrawing に ObjectAnimationUsingKeyFrames を適用して行いました。
10.ハート画像のサイズを縮小するアニメーション
次項の四ハート画像を得る準備として、ハート画像のサイズを縮小します。
このアニメーションも、前項と同様に、ハート用の PathGeometry に基づいた GeometryDrawing に、ObjectAnimationUsingKeyFrames を適用して行いました。
11.四ハート画像構成へのアニメーション
Ball が一周する間に色の異なる小ハート画像を追加して、四ハート画像を構成します。
このアニメーションは、4 個の小ハート用 PathGeometry を生成してから、その回転変換( RotateTransform )に DoubleAnimation を適用して行いました。
12.四ハート画像でのアニメーション 1
四ハート画像の各ハート要素を、各要素の中心の周りに回転するアニメーションです。
このアニメーションは、各ハート要素がその中心の周りに回転するように、PathGeometry の回転変換( RotateTransform )を設定して行いました。
13.四ハート画像でのアニメーション 2
四ハート画像の中心の周りに、各ハート要素を風車の様に回転させるアニメーションです。
このアニメーションは、ハート要素を Tile 画像として配置した後、前々項と同種の方法で行いました。
公開・更新履歴 |
2017/09/01 ページを公開しました。
ご質問・ご意見・ご感想 |
ご質問、ご意見、ご感想等の連絡は、
こちらへ