c# - UWP 动画汉堡包图标

Question

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

我知道有大量的 CSS 动画图标（比如这里或这里[2,2] 中的那个）可以找到，但很少有用于 XAML 的。还有一个人，他确实在这里移植了一些 CSS 到 XAML 动画。

我喜欢这个开发人员在 Windows Phone 应用程序中所做的非常好的动画：链接到商店。

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

Answer 1

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

现在

1. 在 Blend 中打开您的页面
2. 右键单击切换按钮编辑模板-> 编辑副本
3. 更改为状态（在进行下一步之前最好将所有状态更改为您喜欢的状态，然后创建转换）
4. 找到 Normal 并单击 ->+ Add Transition 并选择 Normal -> Checked
5. 在对象和时间线上选择 ContentPresenter
6. 将黄线移至 0.500
7. 在属性中转到变换，然后选择旋转并将角度设置为 270（确保选择了 ContentPresenter）
8. 返回到对象和时间轴 单击播放以检查动画。现在您可以随意播放和创建自己的动画（旋转部分只是一个示例）
9. 构建项目并现场试用！

我相信你从现在开始得到这个，从 Checked -> Normal 创建，你就会得到你想要的。

Answer 2

好的，在考虑了@Stamos 对他的回答的评论后，我发现了这个链接，它实现了一个CurrentStateChanged事件。这里有人展示了一种实现Checked和Unchecked状态的方法。

但最终的答案，我在Telerik 论坛上找到了，那里的一些真正的英雄有很多空闲时间。正是我想要的。

Answer 3

我已经使用在 XAML 和 Blend 中制作的一堆 twicks 成功地实现了这种类型的动画。你可以在这里查看。