ストアアプリでの動的アニメーションの生成方法

備忘録程度の殴り書き

FullHD解像度の画像多め

Blendでストーリーボードを作成する。名前は適当に
スクリーンショット (24)

今回作成するアニメーションは以下の通り。

  • 0.5秒かけて透過値(Opacity)を0にしていく
  • 0.5秒かけてXY両方向に2倍に伸ばす

作るとこんなかんじになるはず
スクリーンショット (29)ここで保存してVisualStudioに戻って変更を適用します。
スクリーンショット (31)そうするとXAMLの上の方にStoryboardが追加されてるはずなのでこれを元にコードを書く。
スクリーンショット (33)

書くとこんな感じになる。

Duration duration = new Duration(TimeSpan.FromSeconds(0.5));
// ストーリーボード
Storyboard sb = new Storyboard();
sb.Duration = duration;
// 透過
DoubleAnimation daOpacity = new DoubleAnimation();
daOpacity.Duration = duration;
daOpacity.To = 0;
sb.Children.Add(daOpacity);
Storyboard.SetTarget(daOpacity, rect);
Storyboard.SetTargetProperty(daOpacity, "(UIElement.Opacity)");
// X軸スケール
DoubleAnimation daScaleX = new DoubleAnimation();
daScaleX.Duration = duration;
daScaleX.To = 2;
sb.Children.Add(daScaleX);
Storyboard.SetTarget(daScaleX, rect);
Storyboard.SetTargetProperty(daScaleX, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)");
// Y軸スケール
DoubleAnimation daScaleY = new DoubleAnimation();
daScaleY.Duration = duration;
daScaleY.To = 2;
sb.Children.Add(daScaleY);
Storyboard.SetTarget(daScaleY, rect);
Storyboard.SetTargetProperty(daScaleY, "(UIElement.RenderTransform).(CompositeTransform.ScaleY)");
sb.Begin();

出来上がりはこんな感じ。(青いブロックが半透過で大きくなってるところ)screenshot_10082013_090935

 

実際はもうちょっとイジる必要があるんだけど、こんな感じ。

RenderTransform = new CompositeTransform();
rect.RenderTransformOrigin = new Point(0.5, 0.5);

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中