【C#】【WPF】アニメーションのパフォーマンスをあげるには？

Question

##悩んでいる点

ハンバーガーメニューをクリックするとメニューの幅が広がり、操作している画面にオーバレイをはる、よくみるスマホアプリのような動きをアニメーションで作りました。

分り辛いですが、左上にハンバーガーメニューを配置しています。

Gifからも分かる通り、画面サイズが大きい場合と小さい場合とでは明らかに矢印のローテーションが遅いです。
このGifの場合はかなり画面サイズの差が大きいですが、通常開く画面と最大化した状態でもこのGifとほぼ変わらないぐらいの速度差が体感できてしまいます。

このモッサリ感をなくすため、どのようにすればアニメーションのパフォーマンスをあげられるのでしょうか。

##実装
ハンバーガーメニュー押下時に、以下のStoryboardが実行されます。

<Visibility x:Key="Visible">Visible</Visibility>
<Visibility x:Key="Collapsed">Collapsed</Visibility>
<!-- ハンバーガーメニュー押下時のStoryboard -->
<Storyboard x:Key="OpenMenu">
    <!--メニューを開く-->
    <DoubleAnimation From="70" To="200" Duration="0:0:0.2"
                     Storyboard.TargetName="SlideMenu"
                     Storyboard.TargetProperty="(StackPanel.Width)">
        <DoubleAnimation.EasingFunction>
            <ExponentialEase Exponent="2" EasingMode="EaseInOut" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
    <!--ハンバーガーメニューを非表示-->
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonOpenMenu"
                                   Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Collapsed}" />
    </ObjectAnimationUsingKeyFrames>
    <!--矢印を表示-->
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonCloseMenu"
                                   Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Visible}" />
    </ObjectAnimationUsingKeyFrames>
    <!--オーバレイの表示-->
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridOverlay"
                                   Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Visible}" />
    </ObjectAnimationUsingKeyFrames>
    <!--メニューの表示状態を隠し項目に持たせる-->
    <BooleanAnimationUsingKeyFrames Storyboard.TargetName="ChkOpenedMenu"
                                    Storyboard.TargetProperty="IsChecked">
        <DiscreteBooleanKeyFrame KeyTime="0" Value="True" />
    </BooleanAnimationUsingKeyFrames>
    <!--オーバレイをフェードインさせる-->
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="GridOverlay"
                                   Storyboard.TargetProperty="(Grid.Opacity)">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
    <!--矢印を回転させる-->
    <DoubleAnimation Storyboard.TargetName="ButtonCloseMenuRotate"
                     Storyboard.TargetProperty="Angle"
                     From="0" To="180" Duration="0:0:0.2"/>
</Storyboard>

上記のStoryBoardの説明として、
左側に並んでいる部分がメニュー(x:Name = SlideMenu)で
ハンバーガーメニューのボタン(x:Name = ButtonOpenMenu)を押した際に、ハンバーガーメニューは非表示にして、
代わりに矢印のボタン(x:Name = ButtonCloseMenu)を表示させます。矢印ボタンを180度まで回転させつつ、
オーバレイ(x:Name = GridOverlay)の透過度を0から1まで変更しています。

##実装で気を付けた点
アニメーションのパフォーマンスではZindexとOpacityの変更が最悪だとどこかで書いてありました。
オーバレイのZIndexに関しては、元々0～100までを0.2秒間かけて変化させていましたがその記載を見て、最初からZindex=100で配置しておき、表示・非表示に関してはVisibilityで制御するようにしています。

ただ、Opacityに関してはオーバレイがパッと表示されるとスマホのような動きから逸脱してしまうので残してしまっている状態です。要はシームレスなUI変更さえ実現できればなんでもよいのですが今の知識だとOpacityの値を変更させるぐらいしかわかりません。

##他の情報

    <!--メニューを開く-->
    <DoubleAnimation From="70" To="200" Duration="0:0:0.2"
                     Storyboard.TargetName="SlideMenu"
                     Storyboard.TargetProperty="(StackPanel.Width)">
        <DoubleAnimation.EasingFunction>
            <ExponentialEase Exponent="2" EasingMode="EaseInOut" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
    <!--オーバレイをフェードインさせる-->
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="GridOverlay"
                                   Storyboard.TargetProperty="(Grid.Opacity)">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
    </DoubleAnimationUsingKeyFrames>

上記の二つのアニメーションを消すと最大画面でも違和感のない速度になります。

これらがボトルネックなのでしょうか…

Answer 1

アニメーションによって WrapPanel の Width が連動して変化するため、WrapPanel 内の再配置が頻繁に起きているのが原因だと思います。

下のようにすると、ラップパネルのサイズはアニメーションと無関係になるので、スムーズになると思います。違ったらすみません。

<Grid>
  <!-- ColumnDefinition なし -->
  <WrapPanel Name="mainArea" Margin="20,0,0,0"/>
  <StackPanel Name="sideMenu" HorizontalArignment="Left" Width="20"/>

</Grid>

Comments

[OXamarin]

ありがとうございます！解決しました！
コントロールの重ね方がわからずにいたのですがこのようにすればよかったのですね！！

上記の方法でメニューを閉じる際のアニメーションは画面サイズによらずに早くなりました。
メニューを開く際はOpacityに対するアニメーションをいれてましたが開閉がモッサリしてる方がストレスになるとおもうので消して対応しました。