Fuse滑动手势揭秘

在这个例子中我们实现了一个非常酷的卡牌导航，使用了很多滑动方面的动作。
借鉴了来自于Google的优秀质感图标。

004300x191.png

http://www.xend.live/wp-content/uploads/2016/05/996c2d9bb92ddee0e897d9062591224c_swipe-gesture-reveal-animation.mp4

滑动手势

每一张卡片�都有一个Direction方向属性设置为向上Up的滑动手势SwipeGesture，意思是在通过向上滑动来激活滑动手势SwipeGesture。
<pre>
<SwipeGesture ux:Name="swipe" Direction="Up" Type="Active"/>
</pre>

设置Type属性为Active意思是这个手势类似一个转换开关switch的工作原理, 他将在向收到指定的方向滑动后被激活，且状态一直处于“打开”状态，直到再次滑动后退回。

接着看下面，我们使用了一个滑动动画SwipingAnimation来声明在用户滑动的时候将要发生什么事情，上面的Source 属性指明哪一个才是这个动画需要响应的滑动手势SwipeGesture。

<pre>
<SwipingAnimation Source="swipe">
<Move Target="topPanel" Y="-0.3" RelativeTo="Size" Duration="0.5" />
<Change bottomPanelScaling.X="1" Duration="0.5"/>
<Change bottomPanelScaling.Y="1" Duration="0.5"/>
<Change bottomPanel.Opacity="1" Duration="0.5" />
</SwipingAnimation>
</pre>

每一个卡牌有两个层，上面的"topPanel"和下边的"bottomPanel"，当我们向上滑动的时候，顶层图层"topPanel"在Y轴上被移动(Y direction)到负数，同时底部图层"bottomPanel"被比例缩放。

导航

在卡牌间的导航是通过LinearNavigation和SwipeNavigate来实现的。
<pre>
<LinearNavigation ux:Name="nav" Easing="QuadraticOut" />
<SwipeNavigate SwipeDirection="Left" SwipeEnds="Closed"/>
</pre>

我们使用进入动画EnteringAnimation和退出动画ExitingAnimation来使得卡牌产生动画效果，当他被导航到或从他导航出的时候。因为我们需要展示下一张卡片的边缘，所以我们要添加一些缩放Scale到触发器。
<pre>
<EnteringAnimation Scale="0.5">
<Move X="-1.4" RelativeTo="ParentSize" Duration="0.5"/>
</EnteringAnimation>
<ExitingAnimation Scale="0.5">
<Move X="1.4" RelativeTo="ParentSize" Duration="0.5"/>
</ExitingAnimation>
</pre>

这些不在活跃状态的卡�牌，需要去掉些不透明效果同时也要轻微地按比例缩小点点，这些是在ActivatingAnimation触发器里来实现的。

<pre>
<ActivatingAnimation>
<Change self.Opacity="1" Duration="0.5"/>
<Change pageScaling.Factor="1" Duration="0.5" />
</ActivatingAnimation>
</pre>

英文原文：https://www.fusetools.com/examples/swipe-gesture-reveal

Tag：Fuse教程, Fuse案例
发布时间：2016年05月21日
博客被黑，挪窝简书安家……