[C#] Storyboard を使ってばねのような動きをつける

投稿日: 2013/03/29 作成者: masuda

CSS3アニメーションで心地良いモーションを作る｜1 pixel｜サイバーエージェント公式クリエイターズブログ
http://ameblo.jp/ca-1pixel/entry-11497184837.html
[Windows8]XAMLアニメーションで心地よいモーションを作る
http://blogs.wankuma.com/hatsune/archive/2013/03/29/323879.aspx

つながりで、タップしたときにモーションを付ける方法を紹介しておきます。
HTML+CSS のパターンはモーションを付けるのに、@keyframes を付けるので、そのまま XAML の Storyboard を使ったときも同じノウハウが使えます…が、XAML の場合には、もうひとつ仕掛けがあって、ばねのような動きがあらかじめ EasingFunction という形で用意されています。

これを使うと「物理的な動きを内部で高速化されたルーチンをつかって手軽に」…という謳い文句を昔聞いたことがあるのですが、高速化されるかどうかはさておき（調べてないので）、ばねとか重力とかそういうのを意識した作りができます。
Easing Function 早見表 にあるのは、Javascript の Easing 処理ですが XAML でも同じことができます。

動きとしては http://youtu.be/Lqhn8DbERlg な感じに作れます。

<Storyboard x:Name=&quot;sbBound&quot;>
	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&quot;(UIElement.RenderTransform).(CompositeTransform.ScaleX)&quot; Storyboard.TargetName=&quot;ellipse&quot;>
		<EasingDoubleKeyFrame KeyTime=&quot;0:0:0.1&quot; Value=&quot;1.2&quot;/>
		<EasingDoubleKeyFrame KeyTime=&quot;0:0:0.5&quot; Value=&quot;1&quot;>
			<EasingDoubleKeyFrame.EasingFunction>
				<BounceEase/>
			</EasingDoubleKeyFrame.EasingFunction>
		</EasingDoubleKeyFrame>
	</DoubleAnimationUsingKeyFrames>
	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&quot;(UIElement.RenderTransform).(CompositeTransform.ScaleY)&quot; Storyboard.TargetName=&quot;ellipse&quot;>
		<EasingDoubleKeyFrame KeyTime=&quot;0:0:0.1&quot; Value=&quot;1.2&quot;/>
		<EasingDoubleKeyFrame KeyTime=&quot;0:0:0.5&quot; Value=&quot;1&quot;>
			<EasingDoubleKeyFrame.EasingFunction>
				<BounceEase/>
			</EasingDoubleKeyFrame.EasingFunction>
		</EasingDoubleKeyFrame>
	</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name=&quot;sbRotate&quot;>
	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&quot;(UIElement.RenderTransform).(CompositeTransform.Rotation)&quot; Storyboard.TargetName=&quot;ellipse2&quot;>
		<EasingDoubleKeyFrame KeyTime=&quot;0:0:0.1&quot; Value=&quot;23.95&quot;/>
		<EasingDoubleKeyFrame KeyTime=&quot;0:0:0.5&quot; Value=&quot;0&quot;>
			<EasingDoubleKeyFrame.EasingFunction>
				<BounceEase/>
			</EasingDoubleKeyFrame.EasingFunction>
		</EasingDoubleKeyFrame>
	</DoubleAnimationUsingKeyFrames>
</Storyboard>

吹き出しの回転は、元ネタのように吹き出しの突起のところに中心を置きたいのですが…ちょっと実力不足で単なる回転で実装しています。参照点を変えられるので、あとからわかったら変更します。

追記、回転の中心点 RenderTransformOrigin を左下のポイントに移動させれば、吹き出しの角で回転できますね。

<Storyboard x:Name=&quot;sbRotate&quot;>
	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&quot;(UIElement.RenderTransform).(CompositeTransform.Rotation)&quot; Storyboard.TargetName=&quot;ellipse2&quot;>
		<EasingDoubleKeyFrame KeyTime=&quot;0:0:0.1&quot; Value=&quot;-16.163&quot;/>
		<EasingDoubleKeyFrame KeyTime=&quot;0:0:0.5&quot; Value=&quot;0&quot;>
			<EasingDoubleKeyFrame.EasingFunction>
				<ElasticEase/>
			</EasingDoubleKeyFrame.EasingFunction>
		</EasingDoubleKeyFrame>
	</DoubleAnimationUsingKeyFrames>
	<PointAnimationUsingKeyFrames EnableDependentAnimation=&quot;True&quot; Storyboard.TargetProperty=&quot;(UIElement.RenderTransformOrigin)&quot; Storyboard.TargetName=&quot;ellipse2&quot;>
		<EasingPointKeyFrame KeyTime=&quot;0&quot; Value=&quot;0,1&quot;/>
	</PointAnimationUsingKeyFrames>
</Storyboard>

■これをボタンに適用するのはどうやるのか？

円とか吹き出しは普通に Tapped イベントで拾ってきます。Mouse イベントで拾うとタブレットPCでタップをしたときにイベントが拾えなくなるので、Tapped イベントを使いましょう。

        <Ellipse x:Name=&quot;ellipse&quot;
            Tapped=&quot;Ellipse_Tapped_1&quot;
            Fill=&quot;#FFF4F4F5&quot; HorizontalAlignment=&quot;Left&quot; Height=&quot;166&quot; Margin=&quot;221,210,0,0&quot; Stroke=&quot;Black&quot; VerticalAlignment=&quot;Top&quot; Width=&quot;166&quot; RenderTransformOrigin=&quot;0.5,0.5&quot;>
        	<Ellipse.RenderTransform>
        		<CompositeTransform/>
        	</Ellipse.RenderTransform>
        </Ellipse>

デスクトップPCの場合は、これにマウスの hover を付けないといけないのですが、タブレットPCの場合はこのままで十分です。が、動かしてみると問題があって、Tapped イベントだと、タップして指を離したときに（マウスを離したときに）イベントが発生するので、押した瞬間にアニメーションしたい場合は、PointerPressed イベントのほうを使います。このあたり、深みにはまると本格的なボタン作りになってしまうので、アプリごとに使い分けるのがよいかと。

■複数のボタンに割り当てる場合にはどうするのか？

これ、XAML の Storyboard の問題で、アニメーションのターゲットがひとつしか選択できません。なので、複数のボタンを画面に並べる場合は、Storyboard 部分を手作業でコピーして Storyboard.TargetName を書き換えるか、<a href=”http://www.moonmile.net/blog/archives/4087″>[WinRT] Storyboard.Clone を作る </a> のようにクローンを作ります。Silverlight や WPF の場合には Clone メソッドが用意されているですが、何故か WinRT には Clone メソッドがないので拡張メソッドとして自作します。これはいずれ、きれいに直して nuget あたりにアップします。
先の記事にある開始点、終了点を指定するとか、アニメーションの長さを指定するとかあるので、バリエーションが多く出てくると思いますが、そのあたりはアプリごとに作ったいったほうが手間は少ないかと。KeyFrames の位置が固定ってのが難点ですが。

カテゴリー: C#, WinRT パーマリンク