アニメーション動画 「BallPicture」 シリーズ − 「Tile Mode 1」

トップページへ、 BallPicture トップへ

「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 ページを公開しました。

 ご質問・ご意見・ご感想

ご質問、ご意見、ご感想等の連絡は、 こちらへ

トップページへ、 BallPicture トップへ