「BallPicture − Temari 1」 は、手鞠の画像を表面に貼り付けた 6 個の Ball を、中央の回転子の周囲で自公転させるアニメーション動画です。この動画は、YouTubeで公開しています。
|
アニメーション動画 「BallPicture」 シリーズ − 「Temari 1」 |
「BallPicture − Temari 1」 は、手鞠の画像を表面に貼り付けた 6 個の Ball を、中央の回転子の周囲で自公転させるアニメーション動画です。
この動画は、YouTubeで公開しています。
| 動画の作成方法 |
1．開発環境
IDE ： Visual Studio 2010 Professional Edition − WPF（C#）
.NET Framework ： .NET Framework 3.5 Client Profile
2．Ballの構成方法
「3-D ソリッドのサンプル」からダウンロードした［sphere3d.cs］の［Sphere3D］クラスを使用して、Ball の３Ｄオブジェクトを作成しました。
その Material に自作の画像ファイルを読み込んで、以下の 6 個の手鞠 Ball 作成しました。
3．BGM
BGMには、フリー音楽素材サイト DOVA-SYNDROME の『惑星』を使用させていただきました。
| 動画の構成 |
1．導入部
中央の八面体回転子をフェードインで描画します。
回転子の回転は、AxisAngleRotation3D の DoubleAnimation で行いました。
回転子のフェードイン部分は、ColorAnimation で作成しました。
2．Ball 導入部
1 番目の手鞠 Ball を、画面右上方向から中心部へ導入します。
Ball 移動のアニメーションは、予め Ball の軌道座標を読み込んでから、Timer を使って行いました。
3．使用 Ball の紹介
Ball の Material 画像を切り替えて、6 個の手鞠 Ball を紹介します。
Material 画像の切り替えは、MaterialAnimationを使って行いました。
4．Top View への移行
画像表示を、Front View から Top View へ移行させるため、Camera の位置変更と、Camera の回転を行います。
Camera の位置変更（後退）は、PerspectiveCamera の PositionProperty に、Point3DAnimation を適用して行いました。
Camera の回転は、AxisAngleRotation3D の DoubleAnimation で行いました。
5．5 個の Ball を追加導入
5 個の Ball を 5 つの方向から追加導入します。
Ball の追加導入は、TranslateTransform3D の DoubleAnimation で行いました。
6．斜め上方視野への変更
斜め上方からの視野に変更するため、Camera の位置と向きを変更します。
Camera の位置変更は、PerspectiveCamera の PositionProperty に、Point3DAnimation を適用して行いました。
Camera の向き変更は、PerspectiveCamera の LookDirectionProperty に、Vector3DAnimation を適用して行いました。
7．Ball 公転
Ball 公転軌道の位置へ Ball を移動してから、Ball を公転させます。
このとき、Ball の回転軸を、地球の地軸の傾きと同じ 23.4 度に傾けます。
Ball 回転軸の傾斜は、QuaternionRotation3D の QuaternionProperty に、QuaternionAnimation を適用して行いました。
Ball の公転は、公転軌道の PathGeometry を作成してから、DoubleAnimationUsingPath を使って行いました。
8．Ball 公転軌道面を傾斜
Ball の公転軌道面を当初の水平面から、右側が高く傾斜した面へ移行させ、その後、左側が高く傾斜した面へ移行させます。
このような Ball 公転面の移行アニメーションは、前項の DoubleAnimationUsingPath に、Ball の Y 方向の位置をアニメートする DoubleAnimationUsingKeyFrames を加えて行いました。
9．公転中の Ball の動きに縦方向の振動を追加
公転している Ball の動きに、縦方向の振動を加えます。
縦方向振動の振幅は段階を追って大きくし、また段階を追って振動のない状態にまで減少させます。
このアニメーションは、前項と同様に、DoubleAnimationUsingPath と DoubleAnimationUsingKeyFrames の組み合わせで行いました。
10．フィナーレ
公転運動を終了して、6 個の Ball を画面から退場させます。
DoubleAnimationUsingPath を使用した Ball 公転のアニメーションに、Ball 退場のアニメーションを DoubleAnimation で加えました。
| 公開・更新履歴 |
2017/09/01 ページを公開しました。
| ご質問・ご意見・ご感想 |
ご質問、ご意見、ご感想等の連絡は、
こちらへ