UWP 动画汉堡图标

Question

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

我知道有很多 CSS 动画图标（例如 here or here the one in [2,2]) out there to find, but rarely ones for XAML. And there is a guy, who did port some CSS to XAML animations here。

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

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

Answer 1

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

现在

1. 在 Blend 中打开您的页面
2. 右键单击 ToggleButton 编辑模板 -> 编辑副本
3. 更改状态（在进入下一步之前最好根据您的喜好更改所有状态，然后创建转换）
4. 找到 Normal 并单击 ->+ 添加过渡和 select Normal -> Checked
5. 在对象和时间轴 Select ContentPresenter
6. 将黄线移动到 0.500
7. 在属性中转到变换，然后 select 旋转并将角度设置为 270（确保 ContentPresenter 已 selected）
8. 返回对象和时间轴 单击播放查看动画。现在你可以随心所欲地播放和创建你自己的动画了（旋转部分只是一个例子）
9. 构建项目并实时试用！

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

Answer 2

好的，在考虑了@Stamos 对他的回答的评论后，我发现这个 , that implements a CurrentStateChanged event. And someone here 展示了一种实现 Checked 和 Unchecked 状态的方法。

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

Answer 3

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