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

发布时间：2017-02-07 00:45:10 所属栏目：交互来源：产品壹佰

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

组件’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’ 「xiaopiu」原型动效教程-滑动列表

Step 6：点击顶部工具栏[预览]按钮「xiaopiu」原型动效教程-滑动列表

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’。 「xiaopiu」原型动效教程-滑动列表

Step 8：最后一步，创建底部导航栏

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

大功告成！这就是这个动效的完整版！「xiaopiu」原型动效教程-滑动列表如果大家有任何问题欢迎随时与我交流。

作者信息：张杨雪，xiaopiu联合创始人，独立开发者，我们希望xiaopiu的操作体验和云端共享资源能让大家创作原型时更加高效。

（编辑：应用网_丽江站长网）

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

5/5

首页