Zenn
🗂

KAMISHIBAIで画面遷移時アニメーションをサポートしました

2022/05/14に公開
#
dotnetwpfkamishiba
tech

画面遷移にアニメーションは必ずしも必要ないと思いますが、ないとやや唐突な感じを受ける気がします。

こんな感じで、ほんの少しアニメーションすることで、この違和感がなくなるということで、アニメーションをサポートしました。

こんな感じに実装します。

<Window ...>
    <Window.Resources>
        <Storyboard x:Key="ExitStoryboard">
            <DoubleAnimation 
                Storyboard.TargetName="MainFrame"
                Storyboard.TargetProperty="(kamishibai:NavigationFrame.Opacity)" 
                From="1" To="0" Duration="0:0:0.1"/>
        </Storyboard>
        <Storyboard x:Key="EntryStoryboard">
            <DoubleAnimation 
                Storyboard.TargetName="MainFrame"
                Storyboard.TargetProperty="(kamishibai:NavigationFrame.Opacity)" 
                From="0" To="1" Duration="0:0:0.1"/>
        </Storyboard>
    </Window.Resources>
    <Grid>
        <kamishibai:NavigationFrame 
            x:Name="MainFrame"
            ExitForwardStoryboard="{StaticResource ExitStoryboard}"
            EntryForwardStoryboard="{StaticResource EntryStoryboard}"
            ExitBackwardStoryboard="{StaticResource ExitStoryboard}"
            EntryBackwardStoryboard="{StaticResource EntryStoryboard}"/>
    </Grid>
</Window>

詳細はこちらをご覧ください！

Discussion