忍者ブログ
Slic3rの設定についてまとめてます。Slic3rの日本語版が見当たらなかったので、使い方をまとめました。 最近はC#のメモ帳代わりになってます。

独り言 | WPFアニメーション備忘録

WPFでアニメーションをする方法の備忘録です。
マウスがコントロールの上に乗ったら少し色でを変えてみます。
ついでに押されたらサイズを変えます。
コントロールは下の２つの絵を重ねあわせたものをコントロールにしました。


重ねるとこうなります。

１．静的なコントロールを作る。

Blendを使うと便利なのでアニメーションの定義を行うところまでBlendをつかいます。
とりあえず、Window上のGrindを９分割してその真ん中の格子にGrindをいれました。
真ん中のGrindにコントロールを配置します。


コントロールは外側のGridにフィットするように配置しています。

２．ストーリーボードを追加します。

オブジェクトとタイムラインの「＋」をクリックして「Storyboard1」を追加します。
 
追加すると下のように赤枠で囲われた状態になります。この状態はStoryboardを録画している状態です。

３．動作を設定します。

オブジェクトとタイムラインにストーリーボードが追加されましたが、黄色い線の部分と右のコントロールの状態が一致します。黄色い線を移動させて、その経過時間に対するコントロールを決めてやればOKです。

0.3秒かけて色を変えるように設定しました。

4．ストリーボードを閉じる。

動きの設定が終わったので、別の作業に移りたいのですが、今のままだと、ストーリーボードを記録している状態なので、ストーリボードを閉じる必要があります。
ストーリーボードを追加したボタンの左の「X」ボタンでストーリーボードを閉じます。

5．StoryBord２を追加

２、３と同じ要領でStoryBord２を追加して、0.1秒でコントロールのマージンが変わり、0.1秒でもとに戻るように設定しました。
 
３、と同じ要領でストーリーボードを閉じます。

6．XAML

下のようなXAMLが生成されています。
Window.ResourcesにStoryboard1とStoryboard2の動作が記述されています。
Window.Trigger動作を開始するトリガーが記述されています。
Window.Triggerをみると、<EventTrigger RoutedEvent="FrameworkElement.Loaded">となっているので、WindowがLoadされたタイミングでStoryboard1とStoryboard2が開始されます。

<Window x:Class="AnimetionTest2.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="Storyboard1">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF00FFF3"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF00FFF3"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Storyboard2">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="viewbox">
            <EasingThicknessKeyFrame KeyTime="0:0:0.1" Value="8,8,2,2">
            <EasingThicknessKeyFrame.EasingFunction>
            <CubicEase EasingMode="EaseInOut"/>
            </EasingThicknessKeyFrame.EasingFunction>
            </EasingThicknessKeyFrame>
            <EasingThicknessKeyFrame KeyTime="0:0:0.2" Value="0"/>
            </ThicknessAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
            <BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
    <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition Height="130"/>
    <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition Width="230"/>
    <ColumnDefinition/>
    </Grid.ColumnDefinitions>
        <Grid Grid.Column="1" Grid.Row="1">
            <Viewbox 　略　</Viewbox>
</Grid>
    </Grid>
</Window>

7．XAMLの変更

ここから先は、Blendでは無く、VisualStudioの方が作業しやすいかと思います。
<EventTrigger RoutedEvent="FrameworkElement.Loaded">を削除して
<EventTrigger RoutedEvent="Viewbox.MouseEnter">と
<EventTrigger RoutedEvent="Viewbox.MouseDown">を追加しました。

<Window x:Class="AnimetionTest2.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="Storyboard1">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF00FFF3"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF00FFF3"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Storyboard2">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="viewbox">
            <EasingThicknessKeyFrame KeyTime="0:0:0.1" Value="8,8,2,2">
            <EasingThicknessKeyFrame.EasingFunction>
            <CubicEase EasingMode="EaseInOut"/>
            </EasingThicknessKeyFrame.EasingFunction>
            </EasingThicknessKeyFrame>
            <EasingThicknessKeyFrame KeyTime="0:0:0.2" Value="0"/>
            </ThicknessAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Grid>
    <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition Height="130"/>
    <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition Width="230"/>
    <ColumnDefinition/>
    </Grid.ColumnDefinitions>
        <Grid Grid.Column="1" Grid.Row="1">
            <Grid.Triggers>
                <EventTrigger RoutedEvent="Viewbox.MouseEnter">
                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Viewbox.MouseDown">
                    <BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
                </EventTrigger>
            </Grid.Triggers>
            <Viewbox 　略　</Viewbox>
</Grid>
    </Grid>
</Window>

8.っで

あぁ、実行したら色が元に戻らなかった。元に戻す処理を追加しないとダメか・・・。
取りあえず動いたけど、EventTriggerがこれでいいのか良く分からんです。
こっちだと、コードから呼び出してる。


関連記事