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

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

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

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

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

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

状态’center’：不用修改

状态’left’：选中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’

（编辑：西安站长网）

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