2013年08月08日

WPFサンプル:Point型の値を変化させるアニメーション

   このエントリーをはてなブックマークに追加 Clip to Evernote
RadialGradientBrushを使い放射状グラデーションで領域を塗りつぶす」 で示したRadialGradientBrushには、GradientOrigin というプロパティがあります。
このプロパティは、 System.Windows.Point 型です。このPoint型の値を変化させることができるのがPointAnimationです。

今回は、このPointAnimationを使い、RadialGradientBrushのGradientOriginを変化させることでアニメーション効果を出すサンプルです。

以下、実行例です。

PointAnim1

PointAnim2

PointAnim3

以下に、XAMLを示します。

<Window x:Class="PointAnimationSample.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="myStoryboad">
            <PointAnimation
                Storyboard.TargetName="MyGrad"
                Storyboard.TargetProperty="GradientOrigin"
                From="0.82,0.22" To="0.2,0.8" Duration="0:0:2"
                AutoReverse="True" RepeatBehavior="3x"/>
        </Storyboard>
    </Window.Resources>
    <Grid >
        <Ellipse Width="150" Height="150">
            <Ellipse.Fill>
                <RadialGradientBrush x:Name="MyGrad" RadiusX="0.5" 
                                 RadiusY="0.5" Center="0.5,0.5" 
                                 GradientOrigin="0.82,0.22">
                    <GradientStop Color="Azure" Offset="0.0"/>
                    <GradientStop Color="CornflowerBlue" Offset="0.4"/>
                    <GradientStop Color="DarkBlue" Offset="1.0" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Button Width="100" Height="24" HorizontalAlignment="Left" 
                VerticalAlignment="Top"
                Content="Start" >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource myStoryboad}}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

PointAnimationの各プロパティは、これまで見てきた、DoubleAnimationと同じですね。
なお、Pointの値は、"x,y" という形式で記述します。
AutoReverse="True" とすることで、FromからToへのアニメーション完了後にタイムラインを逆方向に再生するようにしています。

Button.Clickのイベントトリガーを使って、アニメーションを開始させているので、C#側で追加するコードはありません。


WPFサンプル・目次


 

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

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