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

2017-02-06 12:00 雪萍

列表在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′[!--empirenews.page--]

状态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’的动效。[!--empirenews.page--]

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的操作体验和云端共享资源能让大家创作原型时更加高效。

分享到:

© 2016 爱电商 http://www.aidianshang.com/ 中国互联网举报中心 渝ICP备16012282号-3
违法和不良信息举报:jubao@aidianshang.com