2013年08月11日

WPFサンプル:オブジェクトを回転させるアニメーション

   このエントリーをはてなブックマークに追加 Clip to Evernote
RotateTransformを使用し、オブジェクトを回転させる」で説明したRotateTransformのAngleプロパティをアニメーション化することによって、オブジェクトを回転させるアニメーションができます。
ここでは、ボタンを回転する例を掲載します。

<Window x:Class="RotateAnimationSample.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="rotateAnimation" FillBehavior="HoldEnd" >
            <DoubleAnimation
                Storyboard.TargetName="rotate"
                Storyboard.TargetProperty="Angle"
                From="0" To="360" Duration="0:0:02" />
            <DoubleAnimation
                Storyboard.TargetName="button1"
                Storyboard.TargetProperty="Width"
                From="0" To="140" Duration="0:0:02" />
        </Storyboard>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Name="button1" Height="80" Width="140" Content="Click Me" >
            <Button.RenderTransform>
                <RotateTransform x:Name="rotate" Angle="0" CenterX="70" CenterY="40" />
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource rotateAnimation}}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

プログラムを起動すると、ボタンの回転が始まります。
この例では、RotateTransform.Angleの値と同時に、Button.Widthプロパティの値も変化させることで、より動きのあるアニメーションとしています。
以下、実行時のスクリーンショットです。

rotateAni1

rotateAni2

rotateAni3

rotateAni4



WPFサンプル・目次


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52332053