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

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

「BallPicture − TileMode 2」は、運動する 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 の『Summer sky −夏空−』を使用させていただきました。

4.十二支画像
この動画の後半部で使用した十二支画像には、フリー素材サイト いらすとや の画像を、自作の梅花形状の画像中に以下のように組み込んで使用させていただきました。




 動画の構成

1.導入部
緑色とマゼンタ色の正方形要素を市松模様状に組み合わせた画像を Ball の表面に取り入れます。
このアニメーションでは、各色の正方形要素を RectangleGeometry として生成し、その RectAnimation でサイズを大きくしていきました。

2.正方形要素統合のアニメーション
 
半数の正方形要素のサイズを拡大し、残りの半数のサイズを縮小していくことによって、正方形要素のサイズを 2 倍にします。
このアニメーションは、前項と同様の RectAnimation で、Rect のサイズと位置を変えていくことによって行いました。

3.正方形要素を巡回させるアニメーション
各正方形要素に、四角形のルート上を巡回させるアニメーションです。
このアニメーションは、四角形のルートを読み込んで作成した RectAnimationUsingKeyFrames を使って行いました。

4.正方形要素再統合のアニメーション
 
正方形要素のサイズを更に拡大して、正方形要素のサイズを 2 倍に、色をマゼンタ単色にし、市松模様から全面配置にします。
このアニメーションは、前々項と同様の RectAnimation で行いました。

5.正方形要素の四色化アニメーション
 
マゼンタ色の正方形要素の上に、橙・緑・水色・黄色の正方形要素を重ねて、正方形要素を四色化します。
このアニメーションは、前項までのRectAnimation に、若干の修正を加えて行いました。

6.正方形要素から十角形要素への形状変更アニメーション
橙・緑・水色・黄色の正方形要素の形状を変更して、同色の十角形要素に移行します。
このアニメーションは、下地として配置した四色の正方形要素の上に十角形要素を重ねて配置し、正方形要素の不透明度を 0 にしていく ColorAnimation で行いました。

7.十角形形状から星型形状への移行アニメーション
 
四色の十角形要素の形状を星型形状へ移行させます。
このアニメーションは、星型を含んだ十角形の形状を規定する PentaPathGeometry を自作して、その形状を変えていく ObjectAnimationUsingKeyFrames を作成して行いました。

8.星型要素から五芒星要素への移行アニメーション
四色の星型要素を回転させながら、Pen のみで描画する五芒星の要素へ移行するアニメーションです。
このアニメーションは、前々項と同様に、下地として配置した四色の五芒星形状の要素の上に星型要素を重ねて配置し、星型要素の不透明度を 0 にしていく ColorAnimation で行いました。


9.五芒星要素でのScaleAnimation
 
五芒星要素 を回転させながら、ScaleAnimation を行います。
このアニメーションは、五芒星オブジェクトの RotateTransform に DoubleAnimation を、ScaleTransform に DoubleAnimationUsingKeyFramse を適用して行いました。

10.五芒星要素を星型要素へ戻すアニメーション
8 項の逆のプロセスで、五芒星要素を星型要素へ戻します。

11.星型要素統合のアニメーション
 
星型要素のサイズを 2 倍に拡大し、また色を橙に揃えて、4 個の要素を 1 個に統合します。
このアニメーションは、星型要素の TranslateTransform と ScaleTransform に DoubleAnimation を適用し、また星型要素の Brush に ColorAnimation を適用して行いました。

12.星型要素から梅花型要素への形状変更アニメーション
星型要素の形状を梅花型形状へ変更していきます。
梅花型要素は、その画像を png ファイルとして作成しておき、これを ImageBrush に取り込んで、GeometryDrawing で描画しました。
このアニメーションは、下地として配置した梅花型要素の上に星型要素を重ねて配置し、梅花型要素の不透明度を 0 から 100 %にするアニメーションで行いました。

13.十二支の画像を読み込んだ梅花型要素でのアニメーション
梅花型要素に十二支の画像を順番に読み込み、画像を回転させながら、Ball を移動させます。
Ball 上に描画された梅花型要素の Tile 画像は、以下のようになります。

 
 
 

 公開・更新履歴

 2017/09/01 ページを公開しました。

 ご質問・ご意見・ご感想

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

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