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を見て下さい。
ScaleX、 ScaleYは、Double型ですので、DoubleAnimationを利用します。
このDoubleAnimationのEasingFunctionプロパティに、PowerEaseを割り当てることでScaleX, ScaleYの値を加速度をつけて変化させています。
PowerEaseで指定するプロパティは、Power と EasingModeの2つ。
Powerプロパティは、f(t) = t<sup>p</sup> の p を示します。
EasingMode プロパティは、加速、減速、その両方を適用するかを指定します。EaseInは、加速を意味します。
詳しくは、MSDNライブラリのPowerEaseクラスのページをご覧ください。
実行結果のスクリーンショットを示します。スクリーンショットなので加速しているのを示せないのが残念です(T T)。



WPFサンプル・目次
ここでは、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の2つ。
Powerプロパティは、f(t) = t<sup>p</sup> の p を示します。
EasingMode プロパティは、加速、減速、その両方を適用するかを指定します。EaseInは、加速を意味します。
詳しくは、MSDNライブラリのPowerEaseクラスのページをご覧ください。
実行結果のスクリーンショットを示します。スクリーンショットなので加速しているのを示せないのが残念です(T T)。



WPFサンプル・目次
Posted by gushwell at 23:00│Comments(0)│TrackBack(0)
この記事へのトラックバックURL
http://trackback.blogsys.jp/livedoor/gushwell/52332203