2013年08月21日

WPFサンプル:ビットマップ効果のアニメーション

   このエントリーをはてなブックマークに追加 Clip to Evernote
アニメーションの最後のサンプルとして、ビットマップ効果のアニメーションのサンプルを書いてみました。
Borderに、BlurEffectを適用し、Radiusプロパティを変化させることで、にじんだ状態から徐々ににじみのない通常の状態に変化させています。このとき、BorderのOpacityプロパティも 0(透明) から 1(不透明)に同時に変化させています。
これにより、Birder内に配置したコントロールが徐々に鮮明になっていきます。

また、Radiusのアニメーションには、Easing関数 CubicEase を使うことで、アニメーションに変化をつけています。

BlurEffectAnim1

BlurEffectAnim2

BlurEffectAnim3

Button.Triggers でアニメーションを開始しているので、C#側でのコーディングはありません。

<Window x:Class="BlurEffectAnimationSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="220" Width="310">
    <Window.Resources>
        <Storyboard x:Key="myAnimation" FillBehavior="HoldEnd">
            <DoubleAnimation Storyboard.TargetName="blurEffect"
                             Storyboard.TargetProperty="Radius"
                             From="20" To="0" Duration="0:0:04" >
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="border1"
                             Storyboard.TargetProperty="Opacity"
                             From="0" To="1" Duration="0:0:03" >
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Start" Height="23" HorizontalAlignment="Left" Margin="5,8,0,0"
                Name="button" VerticalAlignment="Top" Width="75" >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource myAnimation}}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Border BorderBrush="SlateGray" BorderThickness="1" Width="205" Height="105"
                CornerRadius="5" Background="Ivory" Name="border1" Margin="50,60,0,0"
                HorizontalAlignment="Left" VerticalAlignment="Top" Opacity="1" >
            <Border.Effect>
                <BlurEffect Radius="0" x:Name="blurEffect"/>
            </Border.Effect>
            <!-- これ以降は表示しているだけなので、本質的な部分ではない -->
            <Grid Height="100" HorizontalAlignment="Left" Name="grid1" VerticalAlignment="Top"
                  Width="200" >
                <Button Content="Button" Height="23" HorizontalAlignment="Left"
                        Margin="119,71,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
                <CheckBox Content="CheckBox" Height="16" HorizontalAlignment="Left"
                          Margin="9,41,0,0" Name="checkBox1" VerticalAlignment="Top" />
                <TextBlock Height="23" HorizontalAlignment="Left" Margin="119,6,0,0"
                           Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" />
                <Slider Height="23" HorizontalAlignment="Left" Margin="10,6,0,0"
                        Name="slider1" VerticalAlignment="Top" Width="100" />
                <Button Content="Button" Height="23" HorizontalAlignment="Left"
                        Margin="35,71,0,0" Name="button2" VerticalAlignment="Top"
                        Width="75" />
                <TextBox Height="25" HorizontalAlignment="Left" Margin="89,36,0,0"
                         Name="textBox1" VerticalAlignment="Top" Width="103" />
            </Grid>
        </Border>
    </Grid>
</Window>


WPFサンプル・目次


 

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

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