UWP 动画汉堡图标

Question

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

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

我喜欢一个非常好的动画，就像这个开发人员在Windows Phone App中所做的那样：链接到商店。

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

Answer 1

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

现在

1. 在 Blend 中打开您的页面
2. 右键单击切换按钮编辑模板 -> 编辑副本
3. 更改为状态(在转到下一步之前最好将所有状态更改为您喜欢的状态，然后创建过渡(
4. 找到"正常"并单击 ->+ 添加过渡并选择"正常"->选中
5. 在"对象和时间轴"中，选择内容演示者
6. 将黄线移动到 0.500
7. 在属性中，转到"转换"，然后选择"旋转"并将角度设置为 270(确保选中"内容演示者"(
8. 返回对象和时间轴 单击播放以检查动画。现在您可以根据需要播放和创建自己的动画(旋转部分只是一个示例(
9. 构建项目并现场试用！

我相信您从现在开始就得到了这个，从选中 ->正常中创建，您就有了您想要的。

Answer 2

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

但最终的答案，我在一个 telerik 论坛中找到，一些真正的英雄有很多空闲时间。正是我想要的。

Answer 3

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