AnimationClock を使ってアニメーション動画を作る(7) |
AnimationClock を使用したアニメーションの紹介 |
1.DoubleAnimationUsingKeyFrames を使用したアニメーション(2D)
2.Transform を使った円のアニメーション(2D)
3.指定された経路上で円を運動させるアニメーション(2D)
4.TileMode で描画された画像のアニメーション(2D)
5.自公転する立方体のアニメーション(3D)
6.立方体の表示にタイムラグを設けるアニメーション(3D)
7.ClockGroup を使ったアニメーション−基本編(2D) (このページ)
8.ClockGroup を使ったアニメーション−応用編(2D)
9.残像を形成するアニメーション(2D)
なお、これらの動画は、「ソフト関連Trial−No.109」で紹介しています。
ClockGroupを使ったアニメーション動画の作成方法−基本編(2D) |
1.作成するアニメーションの内容
Canvas 上に配置した 4 個の Rectangle を、1 秒の時間差をつけて左右に動かすアニメーションです。
各 Rectangle の左右移動のアニメーションは DoubleAnimation で作成し、その BeginTime プロパティを 1 秒づつずらすことによって、左右移動に時間差をつけます。
各 DoubleAnimation を ParallelTimeline に取り込んだ後、このParallelTimeline から ClockGroup を生成します。
各 Rectangle の Canvas.LeftProperty を、ClockGroup の子要素となる AnimationClock に関連付けます。
アニメーション作成の画面は以下のようになります。
2.使用した開発環境
第1例 と同じく、以下の開発環境を使用しました。
開発環境:Visual Studio 2010 Professional Edition
.NET Framework:.NET Framework 4 Client Profile
古いバージョンを使いましたが、最新の開発環境でも問題なく使用できると思います。
3.XAMLコード
XAMLコードは 第1例 と同じなので、省略します。
4.C#コード
C#コードで、4 個のRectangle を Canvas上に配置して、左右に動かすアニメーションを記述します。
// usingによって名前空間を参照するコードの部分は省略
public partial class MainWindow : Window
{
// コンストラクター
public MainWindow()
{
InitializeComponent();
InitializeWindow();
}
private const int NUM = 4; // Rectangleの数
private const int TIME = 4; // アニメーション(片道)の所要時間
private ClockGroup _cgroup;
// [Avi]ボタンクリックイベント
private void btnAvi_Click(object sender, RoutedEventArgs e)
{
var filepath = GetAviFilePath();
if (0 < filepath.Length)
{
SaveAsAvi(filepath);
MessageBox.Show("OK");
}
}
// [開始]ボタンクリックイベント
private void btnStart_Click(object sender, RoutedEventArgs e)
{
_cgroup.Controller.Begin();
}
// [停止]ボタンクリックイベント
private void btnStop_Click(object sender, RoutedEventArgs e)
{
_cgroup.Controller.Stop();
}
// Aviファイル保存パス取得
private string GetAviFilePath()
{
// 省略
}
// Rectangleの配置とRectangleへのアニメーションの適用
private void InitializeWindow()
{
var pt = new ParallelTimeline();
Rectangle[] rect = new Rectangle[NUM];
Color[] color = { Colors.Red, Colors.Blue, Colors.Magenta, Colors.Green };
for (int i = 0; i < NUM; i++)
{
// Rectangleの生成
rect[i] = new Rectangle();
rect[i].Width = 60;
rect[i].Height = 60;
Canvas.SetLeft(rect[i], 10);
Canvas.SetTop(rect[i], i * 65 + 10);
rect[i].Fill = new SolidColorBrush(color[i]);
cvs1.Children.Add(rect[i]);
// アニメーション生成
var da = new DoubleAnimation(10, 460, new Duration(TimeSpan.FromSeconds(TIME)));
da.BeginTime = TimeSpan.FromSeconds(i);
da.AutoReverse = true;
//da.RepeatBehavior = new RepeatBehavior(2);
pt.Children.Add(da);
}
_cgroup = pt.CreateClock();
for (int i2 = 0; i2 < NUM; i2++)
{
rect[i2].ApplyAnimationClock(Canvas.LeftProperty,
(AnimationClock)_cgroup.Children[i2]);
}
_cgroup.Controller.Stop();
}
// Aviファイル作成
private void SaveAsAvi(string filepath)
{
var fps = 48; // フレームレート
var totalFrames = fps * (TIME * 2 + 4); // 全フレーム数
var secs = Enumerable.Range(0, totalFrames).Select(t => (((double)t) / fps));
var aviManager = new AviFile.AviManager(filepath, false);
AviFile.VideoStream aviStream = null;
var tempFile = "frame.png";
foreach (var sec in secs)
{
_cgroup.Controller.SeekAlignedToLastTick(TimeSpan.FromSeconds(sec),
TimeSeekOrigin.BeginTime);
cvs1.UpdateLayout();
cvs1.SaveImage(tempFile); // cvs1の画像をファイルに保存する
var bmp = new System.Drawing.Bitmap(tempFile);
if (aviStream == null)
aviStream = aviManager.AddVideoStream(true, fps, bmp);
else
aviStream.AddFrame(bmp);
bmp.Dispose();
}
aviManager.Close();
_cgroup.Controller.Stop();
System.IO.File.Delete(tempFile);
}
}
Rectangle とそのアニメーションの生成は[InitializeWindow]メソッドで行います。
アニメーションの開始は、[開始]ボタンクリックイベントの以下のコードで行います。
_cgroup.Controller.Begin();
アニメーションの停止は、[停止]ボタンクリックイベントの以下のコードで行います。
_cgroup.Controller.Stop();
Aviファイル作成のためにフレーム画像を取り出す操作は、[SaveAsAvi]メソッド中の以下のコードで行います。
_cgroup.Controller.SeekAlignedToLastTick(TimeSpan.FromSeconds(sec),
TimeSeekOrigin.BeginTime);
[SaveAsAvi]メソッドの中間付近にある cvs1 の SaveImage 拡張メソッドについては、第1例 の記載を参照してください。
ダウンロード |
ここで紹介したアニメーションを作成するプロジェクトファイルは、以下のリンクからダウンロードすることができます。
「Example07_Clockgroup1」プロジェクトファイルのダウンロード
なお、このプロジェクトでは、AVIファイル化用クラスライブラリとして、Code Project の「
A Simple C# Wrapper for the AviFile Library 」からダウンロードして入手した[AviFile.dll]を使用しています。
ダウンロードしたファイルの利用は、全て利用される方の責任で行っていただきます。
作者は十分な注意を払って本ファイルを作成していますが、もし万一、本ファイルの内容に誤りがあっても、
またその利用によって使用パソコンに問題が発生しても、作者は一切責任を負いません。
公開・更新履歴 |
2017/09/01 ページを公開しました。
ご質問・ご意見・ご感想 |
ご質問、ご意見、ご感想等の連絡は、
こちらへ