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サンプル・目次
  

Posted by gushwell at 20:33Comments(0)TrackBack(0)

2013年08月18日

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

   このエントリーをはてなブックマークに追加 Clip to Evernote
Easing関数にどんなものがあり、具体的にどんな風に動くのかを確認するために Easing関数と、EasingModeを選択し、アニメーションをさせるサンプルを書いてみました。
この記事の最後には、このサンプルと同じ動きをするSilverlightアプリを載せておいたので、 実際にブラウザで動作を確認してもらえます。

EasingFunc1

EasingFunc2

このサンプルでは、以下の5つのEasing関数を選択できます。
BackEase、CircleEase、CubicEase、BounceEase、ElasticEase
また、EasingModeは、EaseIn, EaseOut, EaseInOut の3つから選択できます。
XAMLです。

<Window x:Class="Easing2Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="600" Loaded="Window_Loaded">
    <Window.Resources>
        <Storyboard x:Name="cubicEase" x:Key="CubicEase" FillBehavior="HoldEnd">
            <DoubleAnimation Storyboard.TargetName="myGrid"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="-300" To="100" Duration="0:0:02" >
                <DoubleAnimation.EasingFunction>
                    <CubicEase />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="bounceEase" x:Key="BounceEase" FillBehavior="HoldEnd">
            <DoubleAnimation Storyboard.TargetName="myGrid"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="-300" To="100" Duration="0:0:02" >
                <DoubleAnimation.EasingFunction>
                    <BounceEase />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="ElasticEase" x:Name="ElasticEase" FillBehavior="HoldEnd">
            <DoubleAnimation Storyboard.TargetName="myGrid"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="-300" To="100" Duration="0:0:02" >
                <DoubleAnimation.EasingFunction>
                    <ElasticEase />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="BackEase" FillBehavior="HoldEnd">
            <DoubleAnimation Storyboard.TargetName="myGrid"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="-300" To="100" Duration="0:0:02" >
                <DoubleAnimation.EasingFunction>
                    <BackEase />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="CircleEase" FillBehavior="HoldEnd">
            <DoubleAnimation Storyboard.TargetName="myGrid"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="-300" To="100" Duration="0:0:02" >
                <DoubleAnimation.EasingFunction>
                    <CircleEase />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <ComboBox Height="24" Name="comboBoxKind" Width="120" Margin="5" SelectedIndex="0">
                <ComboBoxItem Content="BackEase" />
                <ComboBoxItem Content="CircleEase" />
                <ComboBoxItem Content="CubicEase" />
                <ComboBoxItem Content="BounceEase" />
                <ComboBoxItem Content="ElasticEase" />
            </ComboBox>
            <ComboBox Height="24" Name="comboBoxEasingMode" Width="120" />
            <Button Width="80" Content="Begin" Margin="5" Click="Button_Click" />
        </StackPanel>
        <!-- これ以降は、表示するだけのためのもの -->
        <Canvas Grid.Row="1">
            <Grid Name="myGrid" Canvas.Left="-300">
                <CheckBox Content="CheckBox" Height="16" HorizontalAlignment="Left"
                      Margin="31,20,0,0" Name="checkBox1" VerticalAlignment="Top" />
                <TextBlock Height="23" HorizontalAlignment="Left" Margin="31,58,0,0"
                      Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" />
                <TextBox Height="24" HorizontalAlignment="Left" Margin="112,54,0,0"
                      Name="textBox1" VerticalAlignment="Top" Width="120" />
                <TextBlock Height="23" HorizontalAlignment="Left" Margin="31,100,0,0"
                      Name="textBlock2" Text="TextBlock" VerticalAlignment="Top" />
                <TextBox Height="24" HorizontalAlignment="Left" Margin="112,96,0,0"
                      Name="textBox2" VerticalAlignment="Top" Width="120" />
                <Button Content="Button" Height="23" HorizontalAlignment="Left"
                     Margin="132,160,0,0" Name="button1" VerticalAlignment="Top" 
                     Width="75" />
                <Button Content="Button" Height="23" HorizontalAlignment="Left"
                     Margin="221,160,0,0" Name="button2" VerticalAlignment="Top" 
                     Width="75" />
            </Grid>
        </Canvas>
    </Grid>
</Window>

5つのStoryboardを Window.Resources に定義しています。
Gridには、Canvasを配置し、そこのいくつかのControlを配置しています。
アニメーションでは、このCanvasの位置を変化させていますので、Canvasに配置されたControlが移動することになります。
アニメーションの起動と、EaseModeを表示するComboBoxへのデータバインドは、C# のコードで実装しています。
以下、C#のコードです。

using System;
using System.Linq;
using System.Windows;
using System.Windows.Media.Animation;
namespace Easing2Sample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
        private void Button_Click(object sender, RoutedEventArgs e) {
            Storyboard storyboard = GetStoryboard(comboBoxKind.SelectionBoxItem as String);
            if (storyboard != null) {
                var da = (storyboard.Children[0] as DoubleAnimation);
                var ef = (da.EasingFunction as EasingFunctionBase);
                ef.EasingMode = (EasingMode)comboBoxEasingMode.SelectedItem;
                storyboard.Begin();
            }
        }
        private Storyboard GetStoryboard(string name) {
            return this.Resources[name] as Storyboard;
        }
        private void Window_Loaded(object sender, RoutedEventArgs e) {
            Type type = typeof(EasingMode);
            var values = (from field in type.GetFields()
                          where field.FieldType == typeof(EasingMode)
                          select field.GetValue(type)).Cast<EasingMode>();
            comboBoxEasingMode.ItemsSource = values;
            comboBoxEasingMode.SelectedIndex = 0;
        }
    }
}

最後に、Silverlightのアプリです。実際に動かせるので、ComboBoxを選択し、Begin ボタンを押してみてください。


WPFサンプル・目次
  
Posted by gushwell at 21:00Comments(0)TrackBack(0)

2013年08月13日

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

   このエントリーをはてなブックマークに追加 Clip to Evernote
イージング関数(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の2つ。
Powerプロパティは、f(t) = t<sup>p</sup> の p を示します。
EasingMode プロパティは、加速、減速、その両方を適用するかを指定します。EaseInは、加速を意味します。
詳しくは、MSDNライブラリのPowerEaseクラスのページをご覧ください。

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

PowerEase1

PowerEase2

PowerEase3

WPFサンプル・目次
  
Posted by gushwell at 23:00Comments(0)TrackBack(0)

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サンプル・目次
  
Posted by gushwell at 22:12Comments(0)TrackBack(0)

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サンプル・目次
  
Posted by gushwell at 21:30Comments(0)TrackBack(0)

2013年08月06日

WPFサンプル:2つのAnimationを同時に動かす

   このエントリーをはてなブックマークに追加 Clip to Evernote
前回に引き続き、ColorAnimationのサンプルです。
今度は、グラデーションを変化させています。
初期状態では、TextBlockで表示される文字列にMediumBlueからLightSkyBlueへのグラデーション効果を適用しています。
この文字列の色を Crimson 一色に変化させる例です。

XAMLです。

<Window x:Class="ColorAnimationSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="118" Width="450">
    <Window.Resources>
        <Storyboard x:Key="myStoryboard" FillBehavior="HoldEnd">
            <ColorAnimation Storyboard.TargetName="startColor"
                            Storyboard.TargetProperty="Color"
                            From="MediumBlue" To="Crimson" Duration="0:0:00.5" />
            <ColorAnimation Storyboard.TargetName="stopColor"
                            Storyboard.TargetProperty="Color"
                            From="LightSkyBlue" To="Crimson" Duration="0:0:01.5" />
        </Storyboard>
    </Window.Resources>
    <StackPanel Orientation="Vertical">
        <Button Content="Start" Height="23" HorizontalAlignment="Left" Margin="10"
                Name="button1" VerticalAlignment="Top" Width="75">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource myStoryboard}}"/>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <TextBlock HorizontalAlignment="Left"  Name="textBlock1"
                   Text="Microsoft .NET Framework" VerticalAlignment="Top"
                   FontSize="30" FontWeight="ExtraBlack" FontFamily="SketchFlow Print">
            <TextBlock.Foreground>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="MediumBlue" Offset="0.0" x:Name="startColor"/>
                    <GradientStop Color="LightSkyBlue" Offset="0.8" x:Name="stopColor"/>
                </LinearGradientBrush>
            </TextBlock.Foreground>
        </TextBlock>
    </StackPanel>
</Window>


Storyboardの子要素として、2つのColorAnimationを定義している点に注目です。
WPFでは、このようにすると、複数のアニメーションを同時に動かすことができます。
一つ目のColorAnimationでは、グラデーションの開始点の色を変化させ、2つ目のColorAnimationでは、グラデーションの終了点の色を変化させています。

ColorAnimation4

ColorAnimation5

ColorAnimation6


イベントトリガーを使い、アニメーションを起動させていますので、C#側では何も記述していません。



WPFサンプル・目次
  
Posted by gushwell at 22:30Comments(0)TrackBack(0)

2013年08月01日

WPFサンプル:ColorAnimationを使い色を変化させる

   このエントリーをはてなブックマークに追加 Clip to Evernote
ColorAnimationは、Color型の値を 2 つのターゲット値の間で線形補間を使用してアニメーション化します。
Reectangleの色を変えるアニメーションを考えてみます。通常、Rectangleの色を指定するには、

<Rectangle Height="100" Stroke="Black" StrokeThickness="1" Width="200" Fill="LightCyan" />

などと Fillプロパティに色を表す文字列を指定しますが、実際のFillプロパティの型は、Color型ではなくBrush型ですので、以下のように書き換えます。

<Rectangle Height="100" Name="rectangle1" Width="200" >
    <Rectangle.Fill>
        <SolidColorBrush x:Name="myAnimatedBrush" Color="LightCyan" />
    </Rectangle.Fill>
</Rectangle>

SolidColorBrushに名前を付けありますので、これで、Colorプロパティをアニメーションで扱えるようになります。
XAMLは、以下のようになります。Storyboardタグで、ColorAnimationを指定しています。

<StackPanel x:Name="stackPanel1">
    <StackPanel.Resources>
        <Storyboard x:Key="myStoryboard" FillBehavior="HoldEnd">
            <ColorAnimation  Storyboard.TargetName="myAnimatedBrush"
                             Storyboard.TargetProperty="Color"
                             To="Blue" Duration="0:0:03" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle Height="100" Name="rectangle1" Width="200" >
        <Rectangle.Fill>
            <SolidColorBrush x:Name="myAnimatedBrush" Color="LightCyan" />
        </Rectangle.Fill>
    </Rectangle>
    <Button Width="80" Height="24" Content="Button" Click="Button_Click" />
</StackPanel>

From指定は省略していますので、LightCyanから、Blueへ色が変化することになります。

ColorAnimation1

ColorAnimation2

ColorAnimation3

今回は、C#側でアニメーションを開始させるようにしました。

private void Button_Click(object sender, RoutedEventArgs e) {
    (this.stackPanel1.Resources["myStoryboard"] as Storyboard).Begin();
}



実は、SolidColorBrushタグをRectangleに記述しなくても、StoryBoardのターゲットとすることができます。

<Rectangle Name="rectangle1" Height="100" Stroke="Black" StrokeThickness="1"
            Width="200" Fill="LightCyan" />

というRectangleに対し、以下のように TargetNameとTargetPropertyを記述することで、アニメーションの対象を指定可能です。

<StackPanel x:Name="stackPanel1">
    <StackPanel.Resources>
        <Storyboard x:Key="myStoryboard" FillBehavior="HoldEnd">
            <ColorAnimation 
                 Storyboard.TargetName="rectangle1"
                 Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                 To="Blue" Duration="0:0:03" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle Height="100" Name="rectangle1" Width="200" Fill="LightCyan" />
    <Button Width="80" Height="24" Content="Button" Click="Button_Click" />
</StackPanel>


WPFサンプル・目次
  
Posted by gushwell at 23:00Comments(0)TrackBack(0)

2013年07月30日

WPFサンプル: AutoReverseとRepeatBehaviorでアニメーションを繰り返す

   このエントリーをはてなブックマークに追加 Clip to Evernote
今回は、DoubleAnimationのAutoReverseとRepeatBehaviorプロパティを使った例です。 この2つのプロパティで、アニメーションの繰り返しについて指定できます(後述)。

なお、「DoubleAnimationを使ったアニメーション」では、Button_Clickイベントハンドラで、アニメーションを開始させましたが、今度は、イベントトリガーを使い、アニメーションを開始します。
イベントトリガーを使いイベントとStoryboardを結びつけることで、C#のコードを書かなくても、アニメーションを開始することができます。

XAMLです。

<Window x:Class="AutoReverseSample.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="myStoryboard"  FillBehavior="HoldEnd">
            <DoubleAnimation
                    Storyboard.TargetName="image1"
                    Storyboard.TargetProperty="Opacity"
                    From="1" To="0" Duration="0:0:04"
                    AutoReverse="True" RepeatBehavior="2x" />
        </Storyboard>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Start" Height="23" HorizontalAlignment="Left" Margin="10,7,0,0"
                    Name="button1" VerticalAlignment="Top" Width="75"  >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource myStoryboard}}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>

        <Image Height="138" HorizontalAlignment="Left" Margin="8,37,0,0" Name="image1"
               Stretch="Fill" VerticalAlignment="Top" Width="180"
               Source="/Images/Desert.jpg" Opacity="1"/>
    </Grid>
</Window>

Button.Clickイベントで、Storyboardを呼び出すようにしています。
Clickイベント以外のイベントでもアニメーションを開始することができます。Loadedイベントを使えば、ウィンドウが開いたときにアニメーションを開始できます。

さて、本題のAutoReverse プロパティと、RepeatBehaviorプロパティですが、 AutoReverseをtrueとすることで、プロパティの値が、To の値まで変化した後に、今度は To値から Fromの値に変化します。
RepeatBehaviorは、再生回数または再生時間の合計を指定できます、ここでは、2x とすることで、2回繰り返してアニメーションを再生させています。Foreverを指定すると無限に繰り返します。
AutoReverseをfalse(規定値)の場合は、プロパティの値が、Toまで変化したら、再度、Fromの値に戻りアニメーションが繰り返されます。

この例では、Opacityプロパティの値を変化させています。

以下、実行時のスクリーンショットです。

AutoReverse1

AutoReverse2

AutoReverse3


WPFサンプル・目次
  
Posted by gushwell at 23:00Comments(0)TrackBack(0)