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

2017-01-12 12:39:00

教程视频链接：http://www.bilibili.com/video/av7961364/ (可以看超清哟)

哈喽，大家好！初次见面，请多多关照 (^o^)/，从今天开始我会在这里和大家分享一些使用xiaopiu进行原型创作的原创教程以及我们对原型设计的一些理解和思考。

「xiaopiu」是神马？

先简单介绍一下，xiaopiu是国内一款新发布的在线APP原型设计工具，打开即用，不用下载哟！~

好啦！下面我们进入正题吧！今天给大家分享如何做一个棒棒哒列表动效。

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

xiaopiu成品在这里 -> 滑动列表

当然，为了不方便看视频的童鞋（比如上班也想悄悄看看的盆友），我也做了详细的图文教程，教程有点长，大家看到不要紧张哟，这是因为步骤和分析写的非常详细，如果你是老司机，很多内容可以跳过不看，直接上手操作！~

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

动效分析

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

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

1. 登录xiaopiu-在线APP原型设计，进入精选广场，引用组件库【动画教程（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图只演示了修改前3个状态的情况，后面两个状态修改方式和这个相同。

[ 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：添加滑动事件

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

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

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

状态1：

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

状态2：

左滑动事件 -> 切换到'状态3'，右滑动事件 -> 切换到'状态1'

状态3：

左滑动事件 -> 切换到'状态4'，右滑动事件 -> 切换到'状态2'

状态4：

左滑动事件 -> 切换到'状态5'，右滑动事件 -> 切换到'状态3'

状态5：

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

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

1. 大功告成，点击预览，就可以立即查看你做好的带有事件交互的图片动画啦！

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

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

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

②标签动画

Step 1：创建标签

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

Step 2：创建状态

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

依次调整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'，点击预览！哈哈，有了制作图片动画的基础，现在做这个是不是很简单啦！~

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

③列表动画

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'之间状态切换时的过渡动画，这是我们不希望看到的，所以我们需要禁掉这个动画。