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

  • 来源:ui中国

教程视频链接: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,再次点击[预览]按钮,我们可以看到动画已经有了回弹效果,变得灵动很多。

Image title

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

Image title

Step 4:添加滑动事件

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

Image title

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

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

状态1:

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

状态2:

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

状态3:

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

状态4:

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

状态5:

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

Image title

Step 5:点击预览,保存到组件库

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

Image title

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

Image title

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

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

②标签动画

Step 1:创建标签

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

Image title

Step 2:创建状态

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

Image title

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

Image title

Step 3:调整交互动效曲线

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

Image title

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

Image title

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'。

Image title

Step 5:点击预览

'tab list'切换到'状态1',点击预览!哈哈,有了制作图片动画的基础,现在做这个是不是很简单啦!~

Image title

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

③列表动画

Step 1:创建列表

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

Image title

Step 2:创建状态

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

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

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

状态'center':不用修改

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

Image title

Image title

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

1. 选中'list info 1',切换到状态'left', 将状态'center'设置为对比态(我们需要调试状态'left'到'center'的过渡动效)

Image title

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

Image title

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'状态

Image title

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'

Image title

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

Image title

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

Image title

Step 8:最后一步,创建底部导航栏

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

这就是这个动效的完整版!

Image title

如果大家有任何问题可以留言给我哟,我们会不定期更新新的教程,期待大家的关注。

我们也有'xiaopiu每周动效打卡'活动,想和大家一起学习交流和分享作品,详情请看说明