> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。

# 利用预置动画在 Mugeda 中制作顺畅的左右滑动切换卡片效果

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-03-31-541a66bede21/01.jpg)

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

## 一、解析动画效果

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

![《刁角武汉》首页景点选择的切换动效图。展示在鼠标左右滑动时能切换景点卡片，并带有丝滑流畅的过渡效果。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-03-31-541a66bede21/02.gif)

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

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

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

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

![Mugeda 编辑器设置过渡效果的过程。在右侧属性面板中点击「预置动画」的加号图标，然后选择移除，然后点击播放按钮即可在左侧预览界面中看到动画移出的效果。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-03-31-541a66bede21/03.gif)

所以，我们会用到预置动画里的 “移出” 和 “移入 ”效果。

## 二、做出初步的动画效果

从上一步的分析可以得知，每个页面都需要 3 个关键帧。现在我来解释一下每个帧应该做什么。

第一帧是用户可以点击进入详情页的帧，控制用户进行 “向左滑动”、“向右滑动” 操作显示的动画。

第二帧显示跳转到下一页之前的动画，即向左的“移出”动画。

第三帧显示跳转到前一页之前的动画，即向右的“移出”动画。

所以可以整理出以下行为：

![表格展示 3 帧动画行为设计：行为 1-4 控制暂停/禁止翻页/跳转帧，预置动画分别为第 1 帧从右移入、第 2 帧向左移出、第 3 帧向右移出，时长均 0.3 秒](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-03-31-541a66bede21/04.png)

注意：因为第一个页面没有上一页，最后一个页面也没有下一页，鉴于他们的特殊性，我们要在第一页里去掉行为4和第3帧，最后一页里去掉行为 3 和第二帧！（改变帧后要记得相对应的修改行为里的参数）

同时要额外配置：

![Mugeda 预置动画配置面板截图：已添加 "移入" 动画效果，"自动播放" 开关已启用（绿色），"循环播放" 开关已禁用（灰色）](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-03-31-541a66bede21/05.png)

![Mugeda 翻页设置面板截图，展示翻页效果设为 "出现"、翻页方向 "上下翻页"、循环 "否"、翻页时间 600 毫秒的配置](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-03-31-541a66bede21/06.png)

所有的预置动画都要启用 “自动播放”，并禁用 “循环播放”。翻页设置也要讲翻页效果设置为 “出现”。

预置动画这样设置的原因是为了能够正常显示被滑动对象的正常进/出场动画，而翻页设置的原因是保证画面上其他元素不会被用户操作所影响，保持固定的位置。

如果按照步骤来的话，你的 H5 已经可以做出带有动画的左右滑动切换效果了，但可以看到在中间的两个页面在切换的时候动画有些错误，为什么呢？

![Mugeda 滑动演示效果图。显示一个首页卡片在从左往右滑动时会有移入移出的动效，但是从右往左滑动时，动效方向异常：原本在左侧的卡片也从右侧出现。右侧提供二维码供预览，底部有发布和编辑按钮。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-03-31-541a66bede21/07.gif)

## 三、完善动画

因为我们每个页面的第一帧的预置动画都是从右向左的 “移入” 效果，所以只能保证一直往下翻页时动画的正常播放，但是从后往前操作时返回前一页默认是看到第一帧，如果还是现在的从右向左的 “移入” 效果，就弄反了，

正确的情况应该是如果用户是返回而来的，预置动画为从左向右的“移入”效果。

但是同一帧同一个元素，不能同时向左和向右 “移入”，我们只能新开一帧（第4帧），这一帧专门为返回而来的页面服务。

于是我们要加一层条件判断，判断到如果用户是从页面返回而来的，就跳到第4帧，播放从左向右的 “移入” 动画。如果用户是左滑去下一页，则正常播放之前的效果。

我们先在第3页的第 3 帧添加一个文本，元素名称为 “from3to2” 内容为 “0”，将第3页的被滑动对象添加一个行为：当出现时改变 “from3to2” 元素文本或取值属性，改为 “3to2”，如下图：

![Mugeda「参数」对话框截图：为元素名称「from3to2」设置行为，元素属性选「文本或取值」，赋值方式为「用设置的值替换现有值」，取值填入「3to2」，执行条件为「总是执行」。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-03-31-541a66bede21/08.png)

然后我们在第2页的第1帧添加一个行为：跳转到帧并停止（第4帧）；触发条件：出现；执行条件：检查 “from3to2” 的元素状态中文本或取值等于 “3to2”，然后再第4帧中把预置动画改成为时长0.3秒的从左移入。如下图：

![Mugeda 参数设置截图：行为 "跳转到帧并停止" 第 4 帧，执行条件为 "检查元素状态"，判断元素 from 3to2 的文本或取值等于 "3to2" 时触发](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-03-31-541a66bede21/09.png)

在第4帧中添加行为：重置“from3to2”元素的所有属性。这样才不会影响用户从右向左滑动到下一页时的效果。同时记得添加左右滑动时页面跳转的行为，因为如果用户是返回到该页面的话就是在第4帧中交互，而不是第1帧了。

我整理了一个表格，如下图所示：

![Mugeda 左右滑动切换卡片的完整逻辑表格，涵盖第 1 至第 5 页共 5 个页面，每页列出 4 帧的行为、预置动画及物体配置，重点标注第 3、4 页在第 3 帧添加 from3to2、from4to3 文本框及第 4 帧的联动行为。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-03-31-541a66bede21/10.png)

> 要注意第3页和第4页的物体添加，与第4帧的联动。

重复给后面的页面设置就能做到流畅的左右滑动切换卡片效果。

![Mugeda 滑动演示效果图。显示一个首页卡片在左右滑动时会有方向正确的移入移出的过渡动效。右侧提供二维码供预览，底部有发布和编辑按钮。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-03-31-541a66bede21/11.gif)