[UWP]如何在默认照片应用中的关闭/打开菜单中实现动画？ [英] [UWP] How to implement animation in closed/opened menu in default photos app?

问题描述

我正在开发一个UWP应用程序，其中我必须使用动画。我已经阅读了微软的许多文档，并了解了各种动画，如指针动画等。

I am developing an UWP app wherein I have to use animations. I have read many documentations by Microsoft and got understanding of various animations like Pointer Animations etc.

我在这里附上了Windows默认照片应用的屏幕截图。当菜单（屏幕截图中用红色笔刷指向）打开和关闭时，我需要动画。 

I am attaching screen shot of the Windows default photos app here. I need animation when the menu (pointed by red brush in screenshot) opened and closed. 

现在已关闭。

现在这是通过动画打开的。 

Now this is opened by an animation. 

您可以打开照片应用程序并查看动画。在这个中使用了哪种类型的动画？它是由多个动画制作的吗？任何帮助将不胜感激。 

You can open the photos app and see the animation too. Which type of animation is used in this? Is it produced by multiple animations? Any help will be appreciated. 

此外，当弹出窗口打开时，照片应用程序主页中的弹出窗口动画。关闭。它会被关闭，就像它向上移动并沉入按钮一样。附加弹出窗口的打开状态。

Also, One animation of flyout in main page of photos app when flyout is opened & closed. It gets closed as if it is moving upwards and sinking into button. Attaching the opened state of the flyout.

请提供这两个动画的输入。

Please give your inputs for these two animations.

谢谢。

推荐答案

您好，

对于第一个动画，您可以尝试使用  FadeInThemeAnimation
和 FadeOutThemeAnimation 。就像下面的代码一样，然后选择
FadeInStoryboard 或 FadeOutStoryboard 来启动。 

For the first animation, you can try to use the FadeInThemeAnimation and FadeOutThemeAnimation. Just like the code below, then select the FadeInStoryboard or FadeOutStoryboard to start. 

<Page.Resources>
    <Storyboard x:Name="FadeInStoryboard">
        <FadeInThemeAnimation TargetName="UserControl"/>
    </Storyboard>
    <Storyboard x:Name="FadeOutStoryboard">
        <FadeOutThemeAnimation TargetName="UserControl"/>
    </Storyboard>
</Page.Resources>

对于第二个动画，您可以将弹出与 $ b一起使用$ b PaneThemeTransition。 单击弹出窗口打开或关闭的按钮，如下面的代码所示，

As for the second animation, you can use the Popup with the PaneThemeTransition. When click the button the Popup open or close, as the following code,

        <Button Content="click me" Height="40" Width="80" Click="Button_Click" VerticalAlignment="Top" HorizontalAlignment="Right">
        </Button>

        <Popup x:Name="PopOne" IsOpen="False" IsLightDismissEnabled="True" HorizontalAlignment="Right" Margin="0,40,80,0" >
            <Popup.ChildTransitions>
                <TransitionCollection>
                    <PaneThemeTransition Edge="Top"/>
                </TransitionCollection>
            </Popup.ChildTransitions>
            <StackPanel>
                <Button>Button1</Button>
                <Button>Button2</Button>
                <Button>Button3</Button>
                <Button>Button4</Button>
                <Button>Button5</Button>
                <Button>Button6</Button>
            </StackPanel>
        </Popup>

祝你好运，

Breeze

这篇关于[UWP]如何在默认照片应用中的关闭/打开菜单中实现动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！