Canvas 上に配置した 4 個の Rectangle を、1 秒の時間差をつけて左右に動かすアニメーションです。
各 Rectangle の左右移動のアニメーションは DoubleAnimation で作成し、その BeginTime プロパティを 1 秒づつずらすことによって、左右移動に時間差をつけます。
各 DoubleAnimation を ParallelTimeline に取り込んだ後、このParallelTimeline から ClockGroup を生成します。
各 Rectangle の Canvas.LeftProperty を、ClockGroup の子要素となる AnimationClock に関連付けます。
アニメーション作成の画面は以下のようになります。
2．使用した開発環境
第１例 と同じく、以下の開発環境を使用しました。
開発環境：Visual Studio 2010 Professional Edition
.NET Framework：.NET Framework 4 Client Profile
古いバージョンを使いましたが、最新の開発環境でも問題なく使用できると思います。
3．XAMLコード
XAMLコードは 第１例 と同じなので、省略します。
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 拡張メソッドについては、第１例 の記載を参照してください。