Moonmile Solutions Blog

アニメーションの場合は、

1. Storyboard の場合は、Blend でちまちま編集して動作確認
2. プログラムコードに組み込んで、動作確認
3. もう一度、Blend に戻って修正。
4. またまた、プログラムコードに組み込んで、動作確認

っていう繰り返しになるので、Blend でデザイン、Visual Studio でビルドしてからシミュレーターで確認、ってのが定番…になると思うのですが、どうなんでしょう？そんなに複雑な Storyboard は作らないのかな？

■Storyboard.Clone を拡張メソッドで作る

リフレクションとか使って正確に書こうとも思ったのですが、さほど複雑な構造でもないし、入れ子になるクラスは決まっているのでだらだらと150行ほど書きます。

public static class StoryboardExtensions
{
	/// <summary>
	/// Storyboard をコピーする 
	/// </summary>
	/// <param name=&quot;src&quot;></param>
	/// <returns></returns>
	public static Storyboard Clone(this Storyboard src)
	{
		var sb = new Storyboard();
		sb.AutoReverse = src.AutoReverse;
		sb.BeginTime = src.BeginTime;
		sb.Duration = src.Duration;
		sb.FillBehavior = src.FillBehavior;
		sb.RepeatBehavior = src.RepeatBehavior;
		sb.SpeedRatio = src.SpeedRatio;
		foreach (var tl in src.Children)
		{
			var tld = tl.Clone();
			sb.Children.Add(tld);
		}
		return sb;
	}

	public static Timeline Clone(this Timeline src)
	{
		Timeline dest = null;
		if (src is ColorAnimationUsingKeyFrames)
			dest = ((ColorAnimationUsingKeyFrames)src).Clone();
		if (src is DoubleAnimationUsingKeyFrames)
			dest = ((DoubleAnimationUsingKeyFrames)src).Clone();
		if (src is ObjectAnimationUsingKeyFrames)
			dest = ((ObjectAnimationUsingKeyFrames)src).Clone();
		if (src is PointAnimationUsingKeyFrames)
			dest = ((PointAnimationUsingKeyFrames)src).Clone();
		if (dest != null)
		{
			Storyboard.SetTargetProperty(dest, Storyboard.GetTargetProperty(src));
			Storyboard.SetTargetName(dest, Storyboard.GetTargetName(src));
		}
		return dest;
	}
	public static ColorAnimationUsingKeyFrames Clone(this ColorAnimationUsingKeyFrames src)
	{
		var dest = new ColorAnimationUsingKeyFrames();
		foreach (var kf in src.KeyFrames)
		{
			dest.KeyFrames.Add(kf.Clone());
		}
		return dest;
	}

	public static ColorKeyFrame Clone(this ColorKeyFrame src)
	{
		ColorKeyFrame dest = null;
		if (src is LinearColorKeyFrame)
			dest = new LinearColorKeyFrame();
		if (src is DiscreteColorKeyFrame)
			dest = new DiscreteColorKeyFrame();
		if (src is EasingColorKeyFrame)
			dest = new EasingColorKeyFrame();
		if (src is SplineColorKeyFrame)
			dest = new SplineColorKeyFrame();
		if (dest != null)
		{
			dest.KeyTime = src.KeyTime;
			dest.Value = src.Value;
		}
		return dest;
	}

	public static DoubleAnimationUsingKeyFrames Clone(this DoubleAnimationUsingKeyFrames src)
	{
		var dest = new DoubleAnimationUsingKeyFrames();
		foreach (var kf in src.KeyFrames)
		{
			dest.KeyFrames.Add(kf.Clone());
		}
		return dest;
	}
	public static DoubleKeyFrame Clone(this DoubleKeyFrame src)
	{
		DoubleKeyFrame dest = null;
		if (src is LinearDoubleKeyFrame)
			dest = new LinearDoubleKeyFrame();
		if (src is DiscreteDoubleKeyFrame)
			dest = new DiscreteDoubleKeyFrame();
		if (src is EasingDoubleKeyFrame)
			dest = new EasingDoubleKeyFrame();
		if (src is SplineDoubleKeyFrame)
			dest = new SplineDoubleKeyFrame();
		if (dest == null)
			return null;

		dest.KeyTime = src.KeyTime;
		dest.Value = src.Value;
		return dest;
	}
	public static ObjectAnimationUsingKeyFrames Clone(this ObjectAnimationUsingKeyFrames src)
	{
		var dest = new ObjectAnimationUsingKeyFrames();
		foreach (var kf in src.KeyFrames)
		{
			dest.KeyFrames.Add(kf.Clone());
		}
		return dest;
	}
	public static ObjectKeyFrame Clone(this ObjectKeyFrame src)
	{
		ObjectKeyFrame dest = null;
		if (src is DiscreteObjectKeyFrame)
			dest = new DiscreteObjectKeyFrame();
		if (dest == null)
			return null;

		dest.KeyTime = src.KeyTime;
		dest.Value = src.Value;
		return dest;
	}
	public static PointAnimationUsingKeyFrames Clone(this PointAnimationUsingKeyFrames src)
	{
		var dest = new PointAnimationUsingKeyFrames();
		foreach (var kf in src.KeyFrames)
		{
			dest.KeyFrames.Add(kf.Clone());
		}
		return dest;
	}
	public static PointKeyFrame Clone(this PointKeyFrame src)
	{
		PointKeyFrame dest = null;
		if (src is LinearPointKeyFrame)
			dest = new LinearPointKeyFrame();
		if (src is EasingPointKeyFrame)
			dest = new EasingPointKeyFrame();
		if (src is DiscretePointKeyFrame)
			dest = new DiscretePointKeyFrame();
		if (src is SplinePointKeyFrame)
			dest = new SplinePointKeyFrame();
		if (dest == null)
			return null;

		dest.KeyTime = src.KeyTime;
		dest.Value = src.Value;
		return dest;
	}
}

■アニメーションの開始点と終了点を変更する拡張メソッドを作る

アニメーションをする対象と、開始終了点を指定するのですが、色々ややこしいので拡張メソッドを用意しておきます。本当は別クラスのほうがいいんでしょうが、面倒なので Storyboard にくっつけてしまいます。

/// <summary>
/// 各種の値を変えるための拡張メソッド
/// </summary>
public static class StorybaordValueExtentions
{
	/// <summary>
	/// ターゲット名を指定する
	/// </summary>
	/// <param name=&quot;sb&quot;></param>
	/// <param name=&quot;name&quot;></param>
	public static void SetTarget(this Storyboard sb, UIElement el)
	{
		foreach (var tl in sb.Children)
		{
			Storyboard.SetTarget(sb, el);
		}
	}
	public static void SetTargetName(this Storyboard sb, string name)
	{
		foreach (var tl in sb.Children)
		{
			Storyboard.SetTargetName(sb, name);
		}
	}
	public static void SetMovePoint(this Storyboard sb, Point start, Point end)
	{
		((DoubleAnimationUsingKeyFrames)sb.Children[0]).KeyFrames[0].Value = start.X;
		((DoubleAnimationUsingKeyFrames)sb.Children[1]).KeyFrames[0].Value = start.Y;
		((DoubleAnimationUsingKeyFrames)sb.Children[0]).KeyFrames[1].Value = end.X;
		((DoubleAnimationUsingKeyFrames)sb.Children[1]).KeyFrames[1].Value = end.Y;
	}
}

storyboard は複数のターゲットを同時に動かすこともできるので、一律で変えてしまうのは困るのですが、まあ、そのときはそのときで考えるということで。

■実際に動かしてみる

あらかじめ、コピー元の storyboard を blend で作っておきます。

<Page.Resources>
    <Storyboard x:Name=&quot;sbMove&quot;>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&quot;(UIElement.RenderTransform).(CompositeTransform.TranslateX)&quot; Storyboard.TargetName=&quot;pictAni&quot;>
            <EasingDoubleKeyFrame x:Name=&quot;sbStartX&quot; KeyTime=&quot;0&quot; Value=&quot;180.597&quot;/>
            <EasingDoubleKeyFrame x:Name=&quot;sbEndX&quot; KeyTime=&quot;0:0:1&quot; Value=&quot;182.09&quot;/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&quot;(UIElement.RenderTransform).(CompositeTransform.TranslateY)&quot; Storyboard.TargetName=&quot;pictAni&quot;>
            <EasingDoubleKeyFrame x:Name=&quot;sbStartY&quot; KeyTime=&quot;0&quot; Value=&quot;-152.239&quot;/>
            <EasingDoubleKeyFrame x:Name=&quot;sbEndY&quot; KeyTime=&quot;0:0:1&quot; Value=&quot;171.642&quot;/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

アニメーションする対象は、あらかじめ、Image.RenderTransform と CompositeTransform を書いておきます。
これは Blend が出力する Storyboard の癖なので、手作業で作れば Margin とか Canvas.Left あたりを直接変更することも可能でしょう。今は、Blend と Visual Studio の行き来を簡単にするということで、Blend のほうにあわせておきます。

<Image x:Name='pict1' HorizontalAlignment=&quot;Left&quot; Height=&quot;100&quot; 
            VerticalAlignment=&quot;Top&quot; Width=&quot;64&quot; Source=&quot;/Images/FC097-2.png&quot;  Margin=&quot;288,151,0,0&quot;>
    <Image.RenderTransform>
        <CompositeTransform/>
    </Image.RenderTransform>

</Image>

自作した Clone と拡張メソッドを使って、pict1 を移動させます。ここでは、Clone した storyboard は使い捨てになっていますが、実際は Initialize 時にキープしておきます。

private void SbClone2Click(object sender, RoutedEventArgs e)
{
	Storyboard sb = this.sbMove.Clone();
	// ターゲットを変える
	sb.SetTarget( this.pict1 );
	sb.SetMovePoint(new Point(0, 0), new Point(100, 200));
	sb.Begin();
}

これで、storyboard の XAML を量産しないでよくなるので（特に開始終了点の名前付けとかが面倒なので）、花札ゲームのアニメーションに活用できそう。なので、再び花札ゲーム製作に戻るということで。

WPF の XAML には Clone メソッドがあって、Storyboard とか UI のタグをコピーできたのですが、WinRT の XAML には Clone がありません。継承関係とかすっきりしてメソッドの整理もされいるので、同じ XAML とはいえ挙動が異なる…のが微妙なところですが、まあ、すっきりした分 XAML の描画は高速になっているんだろうなッ!!! と実験してみたいものです。当時、非力…でもないマシンを使っても WPF アプリは結構重かったわけで、では、現在の PC ならばどうでしょうってのが疑問なところですが、描画として XAML と C++/CX の DirectX が直結しているのか否か？そのうえで、GPU は有効に使われているのか？（なんか、CPU のパワーだけを使っている感じがするので）ってのを確かめたうえで、XAML の描画部分を C# のみで頑張るか、C++/CX のパワーを使ったほうが（内部的に DirectX に直結しているという点で）を探っていきたいと思っています。

3Dのアクション系のゲームアプリのように描画速度に完全に依存する場合には、C++/CX と DirectX の組みわせは外せないところなのですが、花札ゲームのような、

• それぞれのアニメーション以外、あまり画面が動かない

　→　けれども、アニメーション部分は、それなりにリッチにしたい。

• 3D ゲームのようにがっつり作るのではなく、手軽にリリースしたい（サンデープログラマー気分で）。

　→　ロジック部分は、C# を活用するとか、描画じゃない部分をバージョンアップとか。

な形で、View と Logic を完全に分離させた上で、それぞれの速度（描画速度と開発速度）を追求したいということで。

それを踏まえたうえで、リッチな View と作ろうとすると、Blend を使ったデザインが欠かせないわけで、デザイナさまに作っていただいた XAML をいかに、きれにプログラムに組み入れていくのか？ってのが課題。いやいや、デザインするのは自分自身だったりするわけですがね。

■XamlReader.Load を使って、丸ごとコピーする

private void SbCloneClick(object sender, RoutedEventArgs e)
{
	string xaml = @"
<Image 
	xmlns=&quot;&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;&quot;
	HorizontalAlignment=&quot;&quot;Left&quot;&quot; Height=&quot;&quot;100&quot;&quot; 
    VerticalAlignment=&quot;&quot;Top&quot;&quot; Width=&quot;&quot;64&quot;&quot; Source=&quot;&quot;/Images/FC097-2.png&quot;&quot;  Margin=&quot;&quot;288,151,0,0&quot;&quot;>
</Image>
&quot;;
	for (int i = 0; i < 10; i++)
	{
		object obj = XamlReader.Load(xaml);
		UIElement el = obj as UIElement;
		Image img = obj as Image;
		img.Margin = new Thickness(70 * i, 100, 0, 0);
		grid.Children.Add(img);
	}
}

XamlReader.Load を使うときに注意しないといけないのが、

• ルートは単一のタグであること。

　→ Xml の Load と同じなので、ルートタグはひとつ。

• xmlns で名前空間を指定しておく。
• x:Name=”…” のような名前を外しておく

　→ x の namespace が必須になるし、プログラムから参照できません。

　→ FindName を使っても見つかられないので、意味ないし。

• イベントハンドラは、後からプログラムで指定。

なところです。バインディングは、どうなるんだろう？今は試していません。
サンプルのコードでは、Image タグを10個作って、grid に追加しています。これぐらいならば new Image() で作っても手間は変わらないのですが、もうちょっと複雑な例があります。

■Storyboard を XamlReader.Load でコピーする

void SbClone()
{
	string xaml = @"
<Storyboard Name=&quot;&quot;sbMove&quot;&quot;
xmlns=&quot;&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;&quot;
>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&quot;&quot;(UIElement.RenderTransform).(CompositeTransform.TranslateX)&quot;&quot; Storyboard.TargetName=&quot;&quot;pictAni&quot;&quot;>
        <EasingDoubleKeyFrame KeyTime=&quot;&quot;0&quot;&quot; Value=&quot;&quot;180.597&quot;&quot;/>
        <EasingDoubleKeyFrame KeyTime=&quot;&quot;0:0:1&quot;&quot; Value=&quot;&quot;182.09&quot;&quot;/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&quot;&quot;(UIElement.RenderTransform).(CompositeTransform.TranslateY)&quot;&quot; Storyboard.TargetName=&quot;&quot;pictAni&quot;&quot;>
        <EasingDoubleKeyFrame KeyTime=&quot;&quot;0&quot;&quot; Value=&quot;&quot;-152.239&quot;&quot;/>
        <EasingDoubleKeyFrame KeyTime=&quot;&quot;0:0:1&quot;&quot; Value=&quot;&quot;171.642&quot;&quot;/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
&quot;;
	object obj = XamlReader.Load(xaml);
	Storyboard sb = obj as Storyboard;
	// Storyboard.Target を書き換える
	foreach (var tl in sb.Children)
	{
		Storyboard.SetTarget(tl, this.pict1);
	}
}

ある点からある点まで移動するためのアニメーションですが、これをプログラムで書き直すとちょっと手間ですね。複雑な Storyboard を Blend で作成した後に、それをちまちまとプログラムコードに直すのは避けたいところです。
なので、XAML から該当する Storyboard を「手動」でコピーしてきて、コードに貼り付けるって作業ならば、まあ、それなりに許容範囲かと。
ただ、これも問題があって、アニメーションさせる要素を指定するのを、Storyboard.SetTarget を使ってちまちまと書き換えないとダメなんですよね（SetTargetName を使っても名前が設定変更されないので、SetTarget じゃないとダメみたいです）。このあたり、Setter を使う方法もあるんでしょうが、Setter を使うということは、元の Storyboard の XAML に手をいれないといけなくなって、Storyboard を再修正したきの作業手順が多くなってしまうのが難点です。

なので、Storyboard に Clone がないならば、作ってしまおう、ってのが次。

連続したアニメーションをつなぐために、Completed イベントでつなげる | Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/4071

の続きで、storyboard の Completed イベントで連続させるのではなくて、async/await を使ってつなげてみます。

■開始 Image と 終了 Image を渡してアニメする関数を作る

モーダルダイアログを作ったときと同じように、Completed イベントの発生待ち（アニメーションの完了待ち）をします。Task.Delay() をループさせて待つので、ダサいと言えばダサんですが。他によい方法があったら、また検討するということで。
Task.Run に渡すラムダ式に async がついているという不思議なコードですが、これで動くのだからたいしたものです。WinRT の場合には Thread.Sleep がなくて、非同期の Task.Delay を使うためにこんな風になっています。このあたり、Sleep 相当のブロッキング用のタイマーを自作すればよいのか？ちょっと思案中。

/// <summary>
/// アニメーションする関数
/// </summary>
/// <param name=&quot;p1&quot;></param>
/// <param name=&quot;p2&quot;></param>
/// <returns></returns>
private async Task GoAnime( Image p1, Image p2 )
{
	SetMovePos(p1, p2);
	bool _complete = false;
	this.sbMove.Begin();
	this.sbMove.Completed += (s, e) => { _complete = true; };
	await Task.Run(async () =>
	{
		while (_complete == false)
		{
			await Task.Delay(100);
		}
	});
}

■アニメーションを羅列させる

アニメーションさせる GoAnime 関数ができたので、await を付けて羅列させてみます。Completed イベントで書くよりも、ちょっとは状態遷移がみやいかな、と。yeild return の場合はイテレーターを使う必要があって、ちょっとトリッキーな感じがするのですが、これだと自然かと。

/// <summary>
/// 札をクリックして連続アニメーションを開始
/// </summary>
/// <param name=&quot;sender&quot;></param>
/// <param name=&quot;e&quot;></param>
private async void pictAniClick(object sender, TappedRoutedEventArgs e)
{
	if (_moving == false)
	{
		_moving = true;
		await GoAnime(this.pict1, this.pict2);
		await GoAnime(this.pict2, this.pict3);
		await GoAnime(this.pict3, this.pict4);
		await GoAnime(this.pict4, this.pict1);
	}
	else
	{
		this.sbMove.Stop();
		_moving = false;
	}
}
bool _moving = false;

■汎用的にクラスのメソッドにしてみる

GoAnime メソッドは、画面の内部メソッドなので汎用性がありません。なので、クラスとして括りだすのが良かろうってことで、クラス化してみたのが、これです。

public class AnimeWaitable
{
    public Storyboard sb { get; set; }
    public EasingDoubleKeyFrame startPosX { get; set; }
    public EasingDoubleKeyFrame startPosY { get; set; }
    public EasingDoubleKeyFrame endPosX { get; set; }
    public EasingDoubleKeyFrame endPosY { get; set; }
    public Image pictAni { get; set; }
    public Image pictStart { get; set; }
    public Image pictEnd { get; set; }

    public bool IsCompleted { get; set; }
    public int Result { get; set; }
    public AnimeWaitable()
    {
    }
    public async Task<int> RunAsync(Image pictS, Image pictE)
    {
        this.pictStart = pictS;
        this.pictEnd = pictE;

        var ptS = this.pictStart.TransformToVisual(null).TransformPoint(new Point(0, 0));
        var ptE = this.pictEnd.TransformToVisual(null).TransformPoint(new Point(0, 0));
        this.startPosX.Value = ptS.X;
        this.startPosY.Value = ptS.Y;
        this.endPosX.Value = ptE.X;
        this.endPosY.Value = ptE.Y;
        sb.Completed += (s, e) =>
        {
            this.IsCompleted = true;
            this.Result = 1;
        };
        this.IsCompleted = false;

        this.sb.Begin();
        // アニメーションの完了待ち
        while (this.IsCompleted == false)
        {
            await Task.Delay(100);
        }
        return this.Result;
    }
    public void Stop()
    {
        this.sb.Stop();
        this.IsCompleted = true;
        this.Result = 0;
    }
}

storyboard に座標を設定していた SetMovePos メソッドをクラス内に展開しているので、冗長になっていますが、基本は GoAnime メソッドと同じで、Task.Delay() を使ってアニメーションの完了待ちをしています。
クラス名が AnimeWaitable なのは、awaitable パターンにすればよいのでは？って時の名残りです。最初 awaitable パターンを使おうと思ったのですが、そうする必要がなかったってことですね。awaitable については別途書こうと思います。

アニメーションを連続させるところは、次のように await ani.RunAsync を羅列していきます。ここでは、ぐるぐると回るように List を使っていますが。

async void GoAnime()
{
	var ani = new AnimeWaitable();
	ani.sb = this.sbMove;
	ani.startPosX = this.sbStartX;
	ani.startPosY = this.sbStartY;
	ani.endPosX = this.sbEndX;
	ani.endPosY = this.sbEndY;
	ani.pictAni = this.pictAni;
	ani.pictStart = this.pict1;
	ani.pictEnd = this.pict2;

	var lstS = new List<Image>();
	var lstE = new List<Image>();
	lstS.Add(pict1); lstS.Add(pict2); lstS.Add(pict3); lstS.Add(pict4);
	lstE.Add(pict2); lstE.Add(pict3); lstE.Add(pict4); lstE.Add(pict1);
	this.textMsg.Text = &quot;開始...&quot;;
	int i = 0;
	_go = true;
	_ani = ani;
	while (_go)
	{
		await ani.RunAsync(lstS[i], lstE[i]);
		i = ++i % 4;
		/* このように書き並べることができる
		await ani.RunAsync(pict1, pict2);
		await ani.RunAsync(pict2, pict3);
		await ani.RunAsync(pict3, pict4);
		await ani.RunAsync(pict4, pict1);
		*/
	}
	this.textMsg.Text = &quot;終了...&quot;;
	_go = false;

}

bool _go = false;
AnimeWaitable _ani;

private void StartClick(object sender, RoutedEventArgs e)
{
	if (_go == false)
	{
		GoAnime();
	}
	else
	{
		_ani.Stop();
		_go = false;
	}
}

ここでちょっと奇妙なのは、GoAnime メソッドの中で、while ループでぐるぐるしている間でも StartClick イベントが発生します。ええ、Start ボタンを押すことができます。一見すると while ループで画面が固まるのでは？と思えるのですが、ani.RunAsync は非同期メソッドなので、途中でボタンクリックイベントなどを入れられるんですよね。このあたりが、非同期な書き方 async/await の面白いところです。

逆にいえば、シーケンス図としてどう書き表すのか、というのが難しいところです。RunAsync という名前を付けてあるので非ブロッキングということがわかるので、手続きっぽい書き方をしても UI の各種イベントを阻害しないという不思議な≒ある意味で直感的な、書き方ができるかと。