android 卡片滑动详情页,在Mugeda中制作顺畅的左右滑动切换卡片效果的教程

之前在做《刁角武汉》的时候对如何选择景点这个问题做了好几个方案，一个是画一张大地图，另一个是做垂直的列表选择，但我还是选择了左右滑动来切换景点。因为在多次尝试之后发现发现在手机屏上似乎不适合做可以上下左右滑动的大地图，而垂直列表在 Mugeda 上又有 BUG，经常卡住滑不了。所以为了更好的用户体验，我选择了做左右滑动切换，模拟出平常 app 的效果。

目录：

一、解析动画效果

二、做出初步的动画效果

三、完善动画

一、解析动画效果

其实在 Mugeda 中如果要做到左右滑动切换卡片，点击进入的效果并不难。但是要加上动画效果的话还需要做一番调整。

可以看到切换动画效果可以拆分为几个动作，以“向左滑动”为例：“手指向左滑动” — “页面1从页面中心向左平移至画面外” — “切换至下一页” — “页面2从页面外向左平移至页面中心” ；

如果是“向右滑动”：“手指向右滑动” — “页面2从页面中心向右平移至画面外” — “切换至上一页” — “页面1从页面外向右平移至页面中心”

如果是用户的动作是“单击”，那就直接跳转到正文页了。

这里的动画效果我们利用 Mugeda 的预置动画来做，比用元件动画做会方便一些。比如“向左滑动”动作里“页面1从页面中心向左平移至画面外”这个动画，其实就是预置动画里的移出效果。