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 ページを公開しました。
ご質問・ご意見・ご感想 |
ご質問、ご意見、ご感想等の連絡は、
こちらへ