flinto动效软件基础-【1】 轻松在flinto里实现纵向和横向滑动效果
效果如图:
文件准备:
在sketch里把一个页面分头部、内容区(分纵向和横向两块)、底部标签栏四个部分。分别放置在画板中。如图:
1. 打开flinto,选择“从sketch导入”
将sketch当前活动的文档导入进flinto。
如图:
2. 将“头部”和“底部标签栏”、“横向滑动”放置到“纵向滑动”的画板中,对好所在的位置。其中“横向滑动”需要超出画布之外,当前屏幕只显示2个半的产品图,提示用户此处可以横向滑动查看更多图片。
3. 选择“横向滑动”内容,添加“滚动组”
查看右侧编组选项,调整至如下:
并将左侧生成的“新建滚动组”名称改为“横向滚动组”。
4. 选择“纵向滑动”内容,添加“滚动组”
查看右侧编组选项,调整至如下:
并将左侧生成的“新建滚动组”名称改为“纵向滚动组”。
5. 将“横向滚动组”整组拖到“纵向滚动组”内。
6. 将“底部标签栏”调至最顶层,并将画布内的“底部标签栏”移动到一屏中最底部的位置。
7.完成,可以点“预览”(ctrl+P)预览效果,并录制gif。
进群获取源文件及连载全部教程哦~
QQ群号:511649801
敲门砖(验证信息):彩云追月