2012年11月28日水曜日

PowerEaseを使った自由落下のアニメーション

自由落下のアニメーション」では、非同期処理で物体の落下をアニメーションしてみたが、
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 件のコメント:

コメントを投稿