c# - UWP 动画汉堡图标

Question

我想在我的 SplitView in c# UWP XAML 项目中添加一个引人注目的动画汉堡包图标。

我知道有大量的 CSS 动画图标(如 here 或 here [2,2] 中的那个)可以找到，但很少有用于 XAML 的。还有一个人，他确实将一些 CSS 移植到 XAML 动画中 here .

我喜欢像这个开发者在 Windows Phone 应用程序中做的非常好的动画:Link to Store .

他是怎么做到的？我该怎么做？是否“只是”过度使用了 Storyboard？或者还有其他的技巧？由于它是一个面向 Win8 的应用程序(不是 Win10)，我不认为它是由动画 GIF 完成的。

Answer 1

假设您在顶部有一个用于打开和关闭 SplitView 的按钮。现在将该按钮更改为 ToggleButton。在 ToggleButton 和 SplitView 上创建所需的事件处理程序，以便切换始终具有正确的值。 Pane 打开时为“已选中”， Pane 关闭时为“未选中”。

现在

1. 在 Blend 中打开您的页面
2. 右键单击 ToggleButton Edit Tamplate -> Edit a Copy
3. 更改状态(在进入下一步之前最好根据您的喜好更改所有状态，然后创建转换)
4. 找到 Normal 并单击 ->+ Add Transition 并选择 Normal -> Checked
5. 在 Objects And Timeline 选择 ContentPresenter
6. 将黄线移动到 0.500
7. 在属性中转到“变换”，然后选择“旋转”并将角度设置为 270(确保选择了 ContentPresenter)
8. 返回对象和时间轴 单击播放以检查动画。现在你可以随心所欲地播放和创建你自己的动画了(旋转部分只是一个例子)
9. 构建项目并现场试用!

我相信你从现在开始就明白了，从 Checked -> Normal 创建，你就得到了你想要的。