Fuse滑动手势揭秘

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

Fuse滑动手势揭秘_第1张图片
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"被比例缩放。

导航

在卡牌间的导航是通过LinearNavigationSwipeNavigate来实现的。




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








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






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

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

你可能感兴趣的:(Fuse滑动手势揭秘)