列表在APP设计中是无处不在的，所以在保证良好的阅读体验的基础上，如何从众多的列表形式中琢磨出一些不一样的东西，可能需要用到一些微妙的动态效果。在这里，我想和大家分享一下如何用小皮乌快速制作滑动列表动态效果。
话不多说，说重点！下面给大家分享一下如何快速实现下图的列表效果。
原图来自Pinterest(创意和图片版权归原作者所有):
xiaopiu实现的效果在这里->滑动列表
视频链接:http://www.bilibili.com/video/av7961364/
当然，为了不方便看视频的同学，我也做了详细的图文教程，因为步骤和分析写的非常详细，教程有点长，如果你是老司机，很多内容可以跳过不看，直接上手 *** 作！如果您想更清楚地看到所有原始大小的活动图片，您可以右键单击图片并选择用新标签打开它。
动效分析这个动态效果可以分为三个部分。顶部的图片列表有滑动切换动态效果，点击底部的列表会同时驱动标签切换动态效果和列表滑动动态效果。姑且称之为:①图片动态效果②标签动态效果③列表动态效果。
你准备好了吗？素材在这里1.登录xiaopiu，进入精选广场，引用组件库【动画教程（1）】（这里有整个动效所需要的全部素材）2.转到个人主页创建一个新项目。进入编辑页面后，在左侧的【元件库】‘公共元件库’中可以看到刚刚引用的元件库【动画教程【1】】。
①图片动效步骤1:创建图片列表
1.从左边的组件库【动画教程(1)】中拖拽当前需要创建页面的组件【状态栏】、【标题】、【图片列表】(也可以点击组件下方的导入按钮直接导入到页面中)，放在适当的位置。
2.选择[title]和[imagelist]合并成一个集合，将组件名称修改为'imagewrapper'，点击右边的[CollectionEdit]面板(或者双击集合空白色区域)将集合的黑边宽度调整为页面宽度，设置溢出隐藏。
Step2：创建状态【温馨提示】小皮乌的交互效果是由组件属性在状态间的变化信息自动生成的补间动画，所以创建交互效果的关键点是做出每个状态对应的样式。
通过观察，我们可以看到整个动态效果会有五种风格和形状的变化，即五张带有图片的小卡片依次旋转，整体移位。所以我们需要创建五个状态，切换到每一个状态，把这个状态的样式调整到第n张要放大的图片，设置好的‘图片列表’就会移动到放大的图片刚好吸收页面左侧辅助线的位置。
下面这张GIF图只演示了前两种状态的修改，后面三种状态的修改方法和这张一样。
[提示]
1.按住空框，用鼠标拖动画布。
2.按住shift键并拖动组件，以保持水平或垂直单向移动。
3.选择一个组件后，按住shift键选择其他组件，可以同时选择多个组件。
4.有的同学可能会问，为什么选中的组件下面总是有一层半透明的层？这是当前状态的比较状态(可以理解为参考)，方便基于某个状态样式的比较修改当前状态样式。如果不需要，可以点击【取消对比】按钮，取消对比状态。
第三步:调整交互曲线。
1.选择“图像包装”，切换到“状态1”，并将“状态2”设置为对比度状态(对比度状态设置为预览当前状态和对比度状态之间的运动补偿)。
2.打开底部的【状态动画】面板，点击【预览动画】按钮播放动画，但是我们可以看到上面原图的动态效果有反d效果。单击[调整所有动画曲线]按钮，将动画曲线调整到Back-easeOut，然后再次单击[预览]按钮。我们可以看到动画已经有了反d效果，变得敏捷了很多。
3.用同样的方法调整任意两个状态之间的动画曲线，如'状态1'-->:状态2'，…，'状态4'-->:状态5'，'状态5'-->:"状态4"，…，"状态2"->:状态1'
Step4：添加滑动事件1.切换到‘图像包装器’的原始状态，添加一个左滑事件和一个右滑事件(这里原始状态下的 *** 作是将这两个事件添加到所有状态)。事件行为是将“图像包装”切换到“状态1”；
【温馨提示】在原始状态下添加事件会对所有状态生效，而在单一状态下添加事件只对当前状态有效。
2.依次修改其他状态事件:向左滑动切换到下一个状态，向右滑动切换到上一个状态。
1:左滑事件-->:切换到'状态2'，删除右滑事件(因为'状态1'已经是第一个状态，不能切换到之前的状态)
2:向左滑动事件->:切换到“状态3”，向右滑动事件->:切换到“状态1”
3:向左滑动事件->:切换到“状态4”，向右滑动事件->:切换到“状态2”
4:向左滑动事件->:切换到“状态5”，向右滑动事件->:切换到“状态3”
5:删除左滑事件和右滑事件-->:切换到'状态4'(因为'状态5'是上一个状态，不能切换到下一个状态)
Step5：点击预览，保存到组件库1.切换到‘状态1’(因为在实际效果中，‘状态1’是初始状态，所以预览时一定要记得切换到‘状态1’)，点击预览，马上就可以查看到你完成的带有事件交互的图片动画了！
2.你可以随意在你的其他项目中使用这种动态效果。选择组件“imagewrapper”,然后单击[SaveComponent]按钮(ctrl+s),将该图片列表组件连同事件和动态效果一起保存到其自己的组件库中。(下面是我保存的一个小例子)
【温馨提示】再次强调，在制作动态效果时，只需要关注每个状态应该呈现什么形式，补间动画就会自动生成；如果想制作更细致的动画，可以使用底部的状态动画面板来调整各个元素动画的时间、延迟和曲线，让自己的动画更加生动。
现在大家应该对国家的概念有所了解了。接下来我们来说明②标签动画的制作。
②标签动效Step1：创建标签1.从左侧元件库【动画教程(1)】拖拽创建一个标签栏。
Step2：创建状态1.通过观察，我们可以看到这个标签栏应该有三种不同的形态，即第1、2、3项被选中，被选中的标签文字颜色较深，字体较粗，小横线会移动到被选中的标签下方，所以我们为标签栏创建了三种状态。
2.将三种状态依次调整为三种不同的选中状态，在每种状态下将第一、第二、第三页签设置为选中状态。比如‘tablist’切换到‘state2’时，双击选中的组件‘tab2’，设置字体加粗，加深文字颜色，将小横线移到底部。
Step3：调整交互动效曲线1.选择“选项卡列表”，切换到“状态1”，并将“状态2”设置为比较状态。
2.打开底部的[StateAnimation]面板，点击[Adjustallanimationcurves]按钮，将动画曲线调整为Back-easeOut，为动画设置反d效果(当然也可以随意设置其他曲线来看效果)
3.使用相同的方法将任意两个状态之间的动画曲线调整为Back-easeOut。
Step4：添加点击事件切换到设置“tablist”的原始状态，双击选中的组件“tab1”添加一个点击事件-->:事件行为设置为将“tablist”切换到“state1”，同理，设置组件“tab2”和“tab3”的点击事件，“tab2”点击事件-->:事件行为设置为将“tablist”切换到“state2”，“tab3”点击事件-->:事件行为设置为将“tablist”切换到“state3”。
Step5：点击预览将‘选项卡列表’切换到‘状态1’(第一个选项卡选择是我们实际效果的初始状态，所以记得切换到‘状态1’)，点击预览！有了制作画面动画的基础，现在做这个容易吗？~
现在来完成最后一个小动态效果~
③列表动效Step1：创建列表从左侧元件库【动画教程(1)】拖拽创建列表。通过分析可以看出，每个选项卡对应一个列表，每个列表都有自己的动画。来，我们先做一个。步骤2:创建状态
1.通过观察，我们可以看到这个列表有四种动态效果(Pinterest原图只展示了部分动态效果，可以完整查看示例)，分别是从页面右侧进入和退出，从页面左侧进入和退出。那么列表应该有三种不同的形式:页面右侧的不可见区，页面中间的可见显示区，页面左侧的不可见区。
2.因此，我们为标签栏创建了3种状态，分别命名为“左侧”、“中间”和“结束”。依次调整三种状态样式。(此处不整体移动集合，而是选择三个项目进行移动，因为后面我们需要单独调整每个项目的动画时间)
状态“左侧”:三个列表项被同时选中并移动到页面左侧的不可见区域。
状态“中心”:不需要修改。
状态“左侧”:三个列表项被同时选中并移动到页面右侧的不可见区域。
Step3：调整交互动效曲线和延时1.选择“列表信息1”，切换到状态“左”，并将状态“中心”设置为比较状态(我们需要调试从状态“左”到状态“中心”的过渡效果)
2.打开底部的【状态动画】面板，点击【调整所有动画曲线】按钮，将动画曲线调整为Cubic-easeOut，然后将第二项的延迟调整为0.1s，第三项的延迟调整为0.2s，点击预览，可以看到依次完成了我们想要的各项的动态效果。
3.同样，分别将动态效果从状态“中心”设置为状态“左”，状态“中心”设置为状态“右”，状态“右”设置为状态“中心”。
第四步:复制清单
开始时，我们说过每个选项卡都有一个列表，所以现在我们需要再复制两个列表。按住alt键拖动‘listinfo1’在原位置复制生成一个新组件，命名为‘listinfo2’，切换到状态‘RIGHT’；同样，在“列表信息2”的基础上，复制并生成一个新组件“列表信息3”。
[提示]
1.三个组件的收集框架应在同一位置完全重合；
2.“列表信息1”被设置为“居中”状态，“列表信息2”和“列表信息3”被设置为“右侧”状态。
步骤5:添加一个点击事件
在这里，我们需要先分析一下。在实际效果中，当我们点击tab时，需要显示当前tab对应的列表，并将另外两个列表按左右顺序设置。比如，当点击'标签页1'时，我们需要显示'列表信息1'，所以我们需要将'列表信息1'设置为'居中'状态，并遵循左右顺序。我们需要将“列表信息2”和“列表信息3”放在页面的右侧，并将它们设置为“右侧”状态。
因此，我们需要将其设置如下:
选择“标签列表”，切换到原始状态，修改每个标签的点击事件，分别添加三个行为:
添加组件“标签1”:组件“列表信息1”切换到状态“中心”，组件“列表信息2”切换到状态“右”，组件“列表信息3”切换到状态“右”
添加组件“选项卡2”:组件“列表信息1”切换到状态“左”，组件“列表信息2”切换到状态“中”，组件“列表信息3”切换到状态“右”
添加组件“标签3”:组件“列表信息1”切换到状态“左”，组件“列表信息2”切换到状态“左”，组件“列表信息3”切换到状态“中”
第六步:点击顶部工具栏的【预览】按钮。
第七步:调整“列表信息2”的动态效果
我们可以看到，当上一步的预览效果在‘tab1’和‘tab3’之间切换时，一个列表会快速左右移动。这样做的原因是:点击'tab1'会使'listinfo2'切换到'right'，而点击'tab3'会使'listinfo2'切换到'left'，所以中间会出现'listinfo2'在'left'和'right'之间切换的过渡动画，这是我们不希望看到的，所以我们在设置后记得将'listinfo2'切换到'right'。
Step8：最后一步，创建底部导航栏从左侧组件库[动画教程[1]]中找到组件[nav]，点击导入到页面，再次点击预览！
你完了！这就是这个动态效果的完整版本！如果您有任何问题，请随时与我沟通。
作者:张扬学，xiaopiu联合创始人、独立开发者。我们希望小皮乌在云端的运营经验和资源共享，能让大家更高效的制作原型。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）