「xiaopiu」原型动效教程-滑动列表

列表在APP设计中是无处不在的，那在保证良好阅读体验的基础上，如何从众多列表形态中琢磨出点不一样的东西，我们就可能会需要用到一些精妙的动效了，在这里和大家分享一下如何使用xiaopiu快速制作一个滑动列表动效。

话不多说，直入正题！下面就给大家分享如何快速实现以下图示的列表动效。

动效原图来自 Pinterest （创意及图片版权归原作者所有）：

xiaopiu实现效果在这里 -> 滑动列表

教程视频链接： http://www.bilibili.com/video/av7961364/

当然，为了不方便看视频的同学，我也做了详细的图文教程，因为步骤和分析写的非常详细，教程有点长，如果你是老司机，很多内容可以跳过不看，直接上手操作！

如果想更清晰地看到所有原尺寸动图，可右键点击图片选择用新标签页打开。

动效分析

这个动效可以分为三个部分，上方的图片列表有一个滑动切换的动效，下方列表点击会同时带动标签切换动效和列表滑动动效。我们在此统一一下称为：①图片动效 ②标签动效 ③列表动效

你准备好了吗？素材在这里

1. 登录 xiaopiu ，进入 精选广场 ，引用组件库【动画教程（1）】（这里有整个动效所需要的全部素材）

2. 前往 个人主页 创建一个新项目，进入编辑页面后，在左侧[组件库]’公用组件库’中可以看到刚才引用的组件库【动画教程[1]】

①图片动效

Step 1：创建图片列表

1. 从左侧组件库【动画教程（1）】中拖拽创建页面当前所需的组件[status bar]、[title]、[image list]（也可点击组件下方的导入按钮直接导入到页面），放在合适位置。

2. 选中[title]和[image list] 合并成集合 ， 修改组件名称 为’image wrapper’，点击右侧 [集合编辑] 面板（或双击集合空白区域） 调整集合黑色边框宽度为页面宽度，设置溢出隐藏 。

Step2：创建状态

[ Tips ] xiaopiu的交互动效是通过状态间组件属性的变化信息自动生成的补间动画，所以在创作交互动效时重点是制作好每个状态对应的样式即可。

通过观察可以看到整个动效会有5种样式形态变化，即5张图片小卡片会依次轮播并整体位移，所以我们需要 创建5个状态 ，并分别切换到每个状态下将 该状态样式调整为第n张图片放大并且集合’image list’位移到放大图片刚好吸附到页面左侧辅助线的位置 。

以下GIF图只演示了修改前2个状态的情况，后面三个状态修改方式和这个相同。

[ Tips ]

1. 按住空格可用鼠标拖拽画布

2. 按住shift键拖拽组件可保持在水平或垂直单一方向移动

3. 选中一个组件后，再按住shift键选中其它组件，可同时选中多个组件

4. 可能有同学会问为什么在选中组件下方一直有个半透明的图层存在？这个是当前状态的对比态（可以理解为一个参照物），方便在对比某个状态的样式基础上修改当前状态样式，如果你不需要，可以点击[取消对比]按钮取消对比态。

Step 3：调整交互动效曲线

1. 选中’image wrapper’，切换到’状态1’， 将’状态2’设置为对比态（设置对比态是为了预览当前状态和对比态之间的补间动效）

2. 打开底部的【状态动画】面板， 点击[预览动画] 按钮即可播放动画，但我们可以看出来上面原图的动效是有一个回弹效果的。 点击[调整所有动画曲线]按钮 ，将动画曲线 调整为Back-easeOut ，再次点击[预览]按钮，我们可以看到动画已经有了回弹效果，变得灵动很多。

3. 相同的方法 调整任意前后两个状态之间的动画曲线 ，比如’状态1′ -> ‘状态2’, …, ‘状态4’ -> ‘状态5’以及’状态5’ -> ‘状态4’, …, ‘状态2’ -> ‘状态1’

Step 4：添加滑动事件

1. 切换到’image wrapper’的原始态 ，添加一个左滑动事件和一个右滑动事件（此处在原始态操作是为了给所有状态统一添加上这两个事件），事件行为是将’image wrapper’切换到’状态1’；

[ Tips ] 在原始态添加事件会对所有状态生效，在单个状态添加事件只对当前状态有效。

2. 依次修改其它状态事件 ：左滑动切换到下一个状态，右滑动切换到上一个状态

状态1： 左滑动事件 -> 切换到’状态2’，删除右滑动事件（因为’状态1’已经为第一个状态，不能再切换到上一个状态）

状态2： 左滑动事件 -> 切换到’状态3’，右滑动事件 -> 切换到’状态1′

状态3： 左滑动事件 -> 切换到’状态4’，右滑动事件 -> 切换到’状态2′

状态4： 左滑动事件 -> 切换到’状态5’，右滑动事件 -> 切换到’状态3′

状态5： 删除左滑动事件，右滑动事件 -> 切换到’状态4’（因为’状态5’已经为最后一个状态，不能再切换到下一个状态）

Step 5：点击预览，保存到组件库

1. 切换到’状态1’（因为在实际效果中，’状态1’为初始态，所以预览时一定要记得将切换到’状态1’） ，点击预览，就可以立即查看你做好的带有事件交互的图片动画啦！

2.  这个动效大家以后可以随意用在自己的其它项目里。选中组件’image wrapper’，点击[保存组件]按钮（ctrl+s）即可把这个带事件和动效的图片列表组件保存在自己的组件库里。（这里是我保存的一个 小示例 ）

[ Tips ] 再次说明一下，在做动效时，重点考虑每个状态应该呈现什么样的形态就行，补间动画会自动生成；如果你想做更细致一点的动画，那么利用底部的状态动画面板可以调整每个元素动画的时间、延时和曲线，让你的动效更生动。

现在大家应该都对状态概念有所了解了吧，接下来会讲解 ②标签动画的制作

②标签动效

Step 1：创建标签

1. 从左侧组件库【动画教程（1）】拖拽创建标签栏。

Step 2：创建状态

1. 通过观察我们可以看到这个标签栏应该有三种不同形态，分别是第1、2、3项被选中，选中的tab文字颜色加深，字体加粗，并且小横线会移动到选中tab下方，所以我们给标签栏 创建3个状态

2. 依次调整3个状态为三种不同选中态 ，每个状态分别设置第1、2、3个tab为选中态，比如将’tab list’切换到’状态2’时双击选中组件’tab 2’，设置字体加粗，文字颜色加深，小横线移动到下方。

Step 3：调整交互动效曲线

1. 选中’tab list’，切换到’状态1’， 将’状态2’设置为对比态。

2. 打开底部的【状态动画】面板， 点击[调整所有动画曲线]按钮 ，将动画曲线 调整为Back-easeOut ，为动画设置回弹效果（当然你也可以随意设置别的曲线看看效果哟）

3. 相同的方法调整任意两个状态之间的动画曲线为Back-easeOut。

Step 4：添加点击事件

切换到集合’tab list’的原始态，双击选中组件’tab1’，添加点击事件 -> 事件行为设置为将’tab list’切换到’状态1’，同理设置好组件’tab 2’和’tab 3’的点击事件，’tab 2’点击事件 -> 事件行为设置为将’tab list’切换到’状态2′, ‘tab 3’点击事件 -> 事件行为设置为将’tab list’切换到’状态3’。

Step 5：点击预览

‘tab list’切换到’状态1’（第一个标签选中是我们实际效果的初始态，所以记得切换到’状态1’） ，点击预览！有了制作图片动画的基础，现在做这个是不是很简单啦！~

现在我们来完成最后一个小动效~

③列表动效

Step 1：创建列表

从左侧组件库【动画教程（1）】拖拽创建一个列表，通过分析可知每个tab对应一个列表，每个列表都有自己的动画，这里我们先制作其中一个。 Step 2：创建状态

1. 通过观察我们可以看到这个列表有四种动效（Pinterest的原图只展示了一部分动效，完整的可以查看 示例 ），分别是从页面右侧进入和退出、从页面左侧进入和退出，那列表对应的就应该有三种不同形态：位于页面右侧不可见区域，位于页面中间可见显示区域，位于页面左侧不可见区域。

2. 所以我们给标签栏 创建3个状态 ，分别 命名为’left’、’center’、’end’ 。依次调整三个状态样式。（此处不要将集合整体移动，而是 选中三个item进行移动 ，因为我们后续需要分别调整每个item的动画时间）

状态’left’：选中3个列表项同时移动到页面左侧不可见区域

状态’center’：不用修改

状态’left’：选中3个列表项同时移动到页面右侧不可见区域

Step 3：调整交互动效曲线和延时

1. 选中’list info 1’，切换到状态’left’， 将状态’center’设置为对比态（我们需要调试状态’left’到’center’的过渡动效）

2. 打开底部的【状态动画】面板， 点击[调整所有动画曲线]按钮 ，将动画曲线 调整为Cubic-easeOut ，再将第二个item延时调整为0.1s，第三个item延时调整为0.2s，点击预览可以看到我们想要的item依次出现的动效已经完成。

3. 同样的方法，分别设置从状态’center’到状态’left’，状态’center’到状态’right’，状态’right’到状态’center’的动效。

Step 4：复制列表

我们刚开始说了每个tab会对应有一个list，所以我们现在需要再复制出两个list。按住alt键拖拽’list info 1′ 在原位置复制生成一个新组件 ，命名为’list info 2’， 切换到状态’right’ ；同理在’list info 2’基础上，复制生成新组件’list info 3’。

[ Tips ]

1.三个组件的集合框体要完全重合在同一位置；

2.’list info 1’设置为’center’状态，’list info 2’和’list info 3’设置为’right’状态

Step 5：添加点击事件

在这里我们需要先分析一下，在实际效果中，我们点击tab时，需要显示当前tab所对应的list，并将其它两个list按照左右顺序设置好状态。比如点击’tab 1’时，我们需要显示’list info 1’，所以我们需要设置’list info 1’为’center’状态，同时遵循左右顺序，需要将’list info 2’和’list info 3’都放在页面右侧，设置为状态’right’。

所以我们需要设置如下：

选中’tab list’，切换为原始态，修改每个tab的点击事件， 分别添加三个行为 ：

组件’tab 1’添加： 组件’list info 1’切换到状态’center’，组件’list info 2’切换到状态’right’，组件’list info 3’切换到状态’right’

组件’tab 2’添加： 组件’list info 1’切换到状态’left’，组件’list info 2’切换到状态’center’，组件’list info 3’切换到状态’right’

组件’tab 3’添加： 组件’list info 1’切换到状态’left’，组件’list info 2’切换到状态’left’，组件’list info 3’切换到状态’center’

Step 6：点击顶部工具栏[预览]按钮

Step 7：调整’list info 2’的动效

我们可以看到上一步的预览效果在’tab 1’和’tab 3’之间切换时，会有一个list快速地左右移动。出现这种情况的原因是：点击’tab 1’让’list info 2’切换状态为’right’，而点击’tab 3’又会让’list info 2’切换状态为’left’，所以中间会出现’list info 2’在’left’和’right’之间状态切换时的过渡动画，这是我们不希望看到的，所以我们需要禁掉这个动画。 完成设置后记得把’list info 2’切换到状态’right’。

Step 8：最后一步，创建底部导航栏

从左侧组件库【动画教程[1]】中找到组件[nav]，点击导入到页面，再次点击预览！

大功告成！这就是这个动效的完整版！ 如果大家有任何问题欢迎随时与我交流。

作者信息：张杨雪，xiaopiu联合创始人，独立开发者，我们希望xiaopiu的操作体验和云端共享资源能让大家创作原型时更加高效。