手鞠の画像を表面に貼り付けた Ball を、リングの周囲で回遊させるアニメーション動画です。初めは 1 組であった Ball とリングの組み合わせを 7 組に増やし、Ball とリングは、ときには一体で、 またときには別々に、回転運動をします。
この動画は、YouTubeで公開しています。
|
アニメーション動画 「BallPicture」 シリーズ − 「Temari 2」 |
手鞠の画像を表面に貼り付けた Ball を、リングの周囲で回遊させるアニメーション動画です。
初めは 1 組であった Ball とリングの組み合わせを 7 組に増やし、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 に自作の画像ファイルを読み込んで、以下の 7 個の手鞠 Ball 作成しました。
3．リングの構成方法
リングを構成するための Geometry には、Jack Xu 著「 Practical WPF Graphics Programming 」 p.497 の TorusGeometry Class をカスタマイズしたものを使用しました。
カスタマイズした点は、リングを円周方向に分割して、表示できるようにした点です。
4．BGM
BGMには、フリー音楽素材サイト PeriTune の『Resort2』を使用させていただきました。
| 動画の構成 |
1．リングの導入
画面中央部分に1 番目のリングを描画します。
Timer を使って、リングの形状が円周方向に伸びて徐々に現われるように描画しました。
2．Ball 導入部
1 番目の手鞠 Ball を、画面左上方向からリング部へ導入します。
Ball 移動のアニメーションは、予め Ball の軌道座標を読み込んでから、その座標を使った DoubleAnimationUsingKeyFrames を生成して行いました。
3．リング周囲の Ball 回転
手鞠 Ball が、リングの周囲を回りながら、リングの円周を一周するように動かします。
Ball 移動のアニメーションは、三角関数を使って Ball の軌道座標を求め、これを使った DoubleAnimationUsingKeyFrames を生成して行いました。
4．Ball 回遊（回転するリング内通過）
Ball が無限大記号（∞）の軌道をとって、回転するリング内を通過するように、動かします。
Ball 移動のアニメーションは、無限大記号軌道の PathGeometry を作成してから、DoubleAnimationUsingPath を使って行いました。
5．リング追加
1 番目のリングの周囲に 6 個のリングを追加配置します。
Timerを使って、リング追加のアニメーションを行いました。
6．Ball 回遊（7 個のリング間回遊）
Ball が 7 個のリング間を回遊するように動かします。
Ball 回遊のアニメーションは、Ball の軌道座標を Point3DCollection に読み込んでから、その座標を使った DoubleAnimationUsingKeyFrames を生成して行いました。
7．Ball 追加
7 個のリングの各々に Ball が配置されるように、Ball を追加します。
各リングへ各 Ball を配置するアニメーションは、Ball 毎に軌道座標を Point3DCollection に読み込んでから、その座標を使った DoubleAnimationUsingKeyFrames を生成して行いました。
8．7 個のリングの Y 軸を中心にした回転
7 個のリングを、Y 軸を中心にして回転させます。
7 個の Ball の Y 軸を中心にした回転は、前半部分では、リングの回転に同期して行い、後半部分では、回転をやめます。
これらリングと Ball の回転は、AxisAngleRotation3D の DoubleAnimation で行いました。
9．7 個のリングの X 軸を中心にした回転
7 個のリングを、X 軸を中心にして回転させます。
7 個の Ball の X 軸を中心にした回転は、前半部分では、リングの回転に同期して行い、後半部分では、回転をやめます。
これらリングと Ball の回転は、AxisAngleRotation3D の DoubleAnimation で行いました。
10．7 個の Ball とリングの Z 軸を中心にした回転
7 個の Ball とリングを、Z 軸を中心にして回転させます。
これらリングと Ball の回転は、AxisAngleRotation3D の DoubleAnimation で行いました。
11．フィナーレ
Z 軸を中心にした回転運動を終了して、7 個の Ball とリングを画面から退場させます。
これらのアニメーションは、移動変換（TranslateTransform3D）の DoubleAnimation で行いました。
| 公開・更新履歴 |
2017/09/01 ページを公開しました。
| ご質問・ご意見・ご感想 |
ご質問、ご意見、ご感想等の連絡は、
こちらへ