UWP动画汉堡包图标

Question

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

我知道有很多CSS动画图标（如here或here [2,2]中的那个）可以找到，但很少有XAML。并且有一个人将一些CSS移植到XAML动画here。

我喜欢这个开发人员在Windows Phone App中做过的非常好的动画：Link to Store。

他是怎么做到的？我怎么能这样做？是吗＆＃34;只是＆＃34;过度使用Storyboard？或者是否涉及其他技巧？因为它是面向Win8的应用程序（不是Win10），我不认为它是由动画GIF完成的。

Answer 1

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

现在

1. 在Blend中打开您的页面
2. 右键单击ToggleButton Edit Tamplate - ＆gt;编辑副本
3. 更改为状态（在进入下一步之前，最好根据自己的喜好更改所有状态，然后创建转换）
4. 查找正常和点击 - ＆gt; +添加转换，然后选择正常 - ＆gt;经过
5. 在对象和时间轴上选择ContentPresenter
6. 将黄线移至0.500
7. 在属性中转到转换，然后选择旋转并将角度设置为270（确保选中ContentPresenter）
8. 返回对象和时间线单击“播放”以检查动画。现在您可以根据需要播放和创建自己的动画（旋转部分只是一个示例）
9. 构建项目并试用它！

我相信你从现在开始这样做，从Checked创建 - ＆gt;正常，你有你想要的。

Answer 2

好的，在考虑了@Stamos对他的回答的评论之后，我找到了link，它实现了CurrentStateChanged事件。有人here显示了实施Checked和Unchecked州的方法。

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

Answer 3

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