AnimationClock を使ってアニメーション動画を作る(3)

トップページへ

 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」で紹介しています。

 指定された経路上で円を運動させるアニメーション動画の作成方法(2D)

1.作成するアニメーションの内容
Canvas 上に設けられた通路に沿って円を移動させるアニメーションを作成します。
今回のアニメーションでは、PointAnimationUsingPath を使用します。
円の通路の形状を PathGeometry で作成し、この PathGeometry を使って PointAnimationUsingPath を作成します。

アニメーション作成の画面は以下のようになります。


2.使用した開発環境
第1例 と同じく、以下の開発環境を使用しました。
開発環境:Visual Studio 2010 Professional Edition
.NET Framework:.NET Framework 4 Client Profile
古いバージョンを使いましたが、最新の開発環境でも問題なく使用できると思います。

3.XAMLコード
XAMLコードは 第1例 と同じなので、省略します。

4.C#コード
C#コードでアニメーションを記述します。

  // usingによって名前空間を参照するコードの部分は省略
  
  public partial class MainWindow : Window
  {
    // コンストラクター
    public MainWindow()
    {
      InitializeComponent();
      InitializeWindow();
    }

    private const double TIME = 6;     // アニメーションの所要時間
    private AnimationClock _clock;     // [InitializeWindow]で初期化

    // [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)
    {
      _clock.Controller.Begin();
    }

    // [停止]ボタンクリックイベント
    private void btnStop_Click(object sender, RoutedEventArgs e)
    {
      _clock.Controller.Stop();
    }

    // 円の通路用PathGeometry生成
    private PathGeometry GetPathGeometry()
    {
      var ptA = new Point(60, 140);
      var ptB = new Point(260, 140);
      var ptC = new Point(460, 140);
      
      var fig1 = new PathFigure();
      
      fig1.StartPoint = ptA;
      fig1.Segments.Add(new ArcSegment(ptB, new Size(50, 50), 180, false,
                    SweepDirection.Clockwise, true));
      fig1.Segments.Add(new ArcSegment(ptC, new Size(50, 50), 180, false,
                    SweepDirection.Counterclockwise, true));
      fig1.Segments.Add(new ArcSegment(ptB, new Size(50, 50), 180, false,
                    SweepDirection.Counterclockwise, true));
      fig1.Segments.Add(new ArcSegment(ptA, new Size(50, 50), 180, false,
                    SweepDirection.Clockwise, true));

      var pg = new PathGeometry();
      pg.Figures.Add(fig1);

      return pg;
    }

    // Aviファイル保存パス取得
    private string GetAviFilePath()
    {
      // 省略
    }

    // 円の通路描画
    private void DrawPath(PathGeometry pg)
    {
      var path = new Path();
      path.Stroke = Brushes.Blue;
      path.StrokeThickness = 2;
      path.Data = pg;
      cvs1.Children.Add(path);
    }

    // 円とその通路の設定
    private void InitializeWindow()
    {
      const double RADIUS = 20;
      
      var pg = GetPathGeometry();  // 円の通路用PathGeometry生成
      DrawPath(pg);         // 円の通路描画

      // 円の生成(EllipseGeometry使ってPathとして生成する)
      var circle = new Path();
      var gscollect = new GradientStopCollection();
      gscollect.Add(new GradientStop(Colors.White, 0));
      gscollect.Add(new GradientStop(Colors.Red, 1));
      circle.Fill = new RadialGradientBrush(gscollect);
      var eg = new EllipseGeometry(new Point(60, 140), RADIUS, RADIUS);
      circle.Data = eg;
      cvs1.Children.Add(circle);

      // EllipseGeometryへのPointAnimationUsingPath設定
      pg.Freeze();
      var pa = new PointAnimationUsingPath();
      pa.PathGeometry = pg;
      pa.Duration = TimeSpan.FromSeconds(TIME);
      pa.RepeatBehavior = RepeatBehavior.Forever;
      _clock = pa.CreateClock();
      eg.ApplyAnimationClock(EllipseGeometry.CenterProperty, _clock);
      _clock.Controller.Stop();
    }

    // Aviファイル作成
    private void SaveAsAvi(string filepath)
    {
      var fps = 48;              // フレームレート
      var totalFrames = (int)(fps * TIME);  // 全フレーム数
      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)
      {
        _clock.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();
      _clock.Controller.Stop();
      System.IO.File.Delete(tempFile);
    }
  }

[GetPathGeometry]メソッドで、円の通路形状となる PathGeometry を作成します。
この PathGeometry を使って、[DrawPath]メソッドで Canvas 上に通路を描画します。
円は、EllipseGeometry を使った Path オブジェクトとして、[InitializeWindow]メソッドで生成します。
この EllipseGeometry に、PathGeometry を使った PointAnimationUsingPath を[InitializeWindow]メソッド内で適用します。

アニメーションの開始、停止の操作、Aviファイル作成のための操作は、第1例 の場合と同様に、[開始]ボタン、[停止]ボタンのクリックイベント、[SaveAsAvi]メソッドで行います。
[SaveAsAvi]メソッドの中間付近にある cvs1 の SaveImage 拡張メソッドについては、 第1例 の記載を参照してください。

 ダウンロード

ここで紹介したアニメーションを作成するプロジェクトファイルは、以下のリンクからダウンロードすることができます。
「Example03_PointAnimationUsingPath」プロジェクトファイルのダウンロード
なお、このプロジェクトでは、AVIファイル化用クラスライブラリとして、Code Project の「 A Simple C# Wrapper for the AviFile Library 」からダウンロードして入手した[AviFile.dll]を使用しています。

ダウンロードしたファイルの利用は、全て利用される方の責任で行っていただきます。
作者は十分な注意を払って本ファイルを作成していますが、もし万一、本ファイルの内容に誤りがあっても、 またその利用によって使用パソコンに問題が発生しても、作者は一切責任を負いません。

 公開・更新履歴

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

 ご質問・ご意見・ご感想

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

トップページへ