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


 

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

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