Fuse滑动手势揭秘

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

004300x191.png

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

滑动手势

每一张卡片�都有一个Direction方向属性设置为向上Up的滑动手势SwipeGesture，意思是在通过向上滑动来激活滑动手势SwipeGesture。

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

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

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

导航

在卡牌间的导航是通过LinearNavigation和SwipeNavigate来实现的。

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

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

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

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