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

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

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

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

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

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

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

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

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

3. 相同的方法调整任意两个状态之间的动画曲线为Back-easeOut。

（编辑：西安站长网）

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