WPFのアニメーション機能を使えば、もっと簡単に自由落下をシミュレートできる。
PowerEase クラスは、プロパティの変化を時間のn乗(y=t^n)に応じた値に計算してくれる。
たとえば、プロパティの値を、3秒間に0から9まで変化させたい場合、nを2とすると、
1秒後 ・・ 1^2 = 1
2秒後 ・・ 2^2 = 4
3秒後 ・・ 3^2 = 9
となる。
物体の落下距離も時間の2乗に比例するので、PowerEaseのPowerプロパティの値を 2 にしている。
<PowerEase Power="2" EasingMode="EaseIn"/>
物体の運動の始点と終点は、PointAnimation で指定する。
ここでは、円の中心座標を PointAnimation で指定した座標間を移動するようにしている。
円は EllipseGeometry で作成する。円の中心座標は EllipseGeometry の Centerプロパティの値なので、これを Storyboard.TargetProperty に指定する。
始点(100,0)から 終点(100,300) までを1秒間に移動させたい場合はつぎのようになる。
<PointAnimation Storyboard.TargetName="MyEllipseGeometry"
Storyboard.TargetProperty="Center"
From="100,0" To="100,300" Duration="0:0:1"
AutoReverse="true" RepeatBehavior="Forever">
同じ動作を繰り返しアニメーションしたい場合は、RepeatBehaviorプロパティに Forever を指定する。また、AutoReverseプロパティを true にすると、アニメーションが逆再生されるので、ボールが跳ね返るような動作になる。
MainWindow.xaml
<Window x:Class="AnimationTest.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="350" Width="200">
<Canvas>
<Path Name="myPathShape" Fill="WhiteSmoke" Stroke="Black">
<Path.Data>
<EllipseGeometry x:Name="MyEllipseGeometry" RadiusX="5" RadiusY="5" />
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<PointAnimation Storyboard.TargetName="MyEllipseGeometry"
Storyboard.TargetProperty="Center"
From="100,0" To="100,300" Duration="0:0:1"
AutoReverse="true" RepeatBehavior="Forever">
<PointAnimation.EasingFunction>
<PowerEase Power="2" EasingMode="EaseIn"/>
</PointAnimation.EasingFunction>
</PointAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Window>
0 件のコメント:
コメントを投稿