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

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

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

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

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

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

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

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

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

Step 1：创建图片列表

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

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

[ 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’

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

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

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

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

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

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

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

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

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

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!