WPFサンプル:イージング関数(easing function)を使用する (1):Gushwell's Dev Notes

2013年08月13日

WPFサンプル:イージング関数(easing function)を使用する (1)

イージング関数(easing function)を使用すると、加速度をつけたり、弾むような動作をさせたりといった複雑なアニメーションを簡単に制御できます。
ここでは、PowerEase のサンプルを示します。

PowerEaseクラスは、f(t) = t<sup>p</sup> という数式を使って加速と減速のアニメーションを作成するイージング関数を表します。
このPowerEaseを使い、TextBlockに表示された文字列のサイズを変化させるアニメーションを書いてみます。
実際にはFont-Sizeを変化させるのではなく、RenderTransformプロパティでScaleTransformを指定し、このScaleX ScaleYを変化させています。
XAMLを見て下さい。

<Window x:Class="Easing1Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="myAnimation" >
            <DoubleAnimation Duration="00:00:02" From="1" To="20"
                             Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" >
                <DoubleAnimation.EasingFunction>
                    <PowerEase Power="10" EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Duration="00:00:02" From="1" To="20"
                             Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" >
                <DoubleAnimation.EasingFunction>
                    <PowerEase Power="10" EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>
    <Grid >
        <TextBlock Name="textBlock1" Text="TextBlock" FontSize="12"
                   HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.RenderTransform>
                <ScaleTransform ScaleX="1" ScaleY="1" x:Name="scale"
                                CenterX="25" CenterY="10" />
            </TextBlock.RenderTransform>
        </TextBlock>
        <Button Content="Button" Height="23" HorizontalAlignment="Left"
                Margin="4,6,0,0" Name="button1" VerticalAlignment="Top" Width="75" >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource myAnimation}}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

ScaleX、 ScaleYは、Double型ですので、DoubleAnimationを利用します。
このDoubleAnimationのEasingFunctionプロパティに、PowerEaseを割り当てることでScaleX, ScaleYの値を加速度をつけて変化させています。
PowerEaseで指定するプロパティは、Power と EasingModeの２つ。
Powerプロパティは、f(t) = t<sup>p</sup> の p を示します。
EasingMode プロパティは、加速、減速、その両方を適用するかを指定します。EaseInは、加速を意味します。
詳しくは、MSDNライブラリのPowerEaseクラスのページをご覧ください。

実行結果のスクリーンショットを示します。スクリーンショットなので加速しているのを示せないのが残念です(T T)。

PowerEase1