300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > flinto动效软件基础-【1】 轻松在flinto里实现纵向和横向滑动效果

flinto动效软件基础-【1】 轻松在flinto里实现纵向和横向滑动效果

时间:2019-11-09 21:52:55

相关推荐

flinto动效软件基础-【1】 轻松在flinto里实现纵向和横向滑动效果

效果如图:

文件准备:

在sketch里把一个页面分头部、内容区(分纵向和横向两块)、底部标签栏四个部分。分别放置在画板中。如图:

1. 打开flinto,选择“从sketch导入”

将sketch当前活动的文档导入进flinto。

如图:

2. 将“头部”和“底部标签栏”、“横向滑动”放置到“纵向滑动”的画板中,对好所在的位置。其中“横向滑动”需要超出画布之外,当前屏幕只显示2个半的产品图,提示用户此处可以横向滑动查看更多图片。

3. 选择“横向滑动”内容,添加“滚动组”

查看右侧编组选项,调整至如下:

并将左侧生成的“新建滚动组”名称改为“横向滚动组”。

4. 选择“纵向滑动”内容,添加“滚动组”

查看右侧编组选项,调整至如下:

并将左侧生成的“新建滚动组”名称改为“纵向滚动组”。

5. 将“横向滚动组”整组拖到“纵向滚动组”内。

6. 将“底部标签栏”调至最顶层,并将画布内的“底部标签栏”移动到一屏中最底部的位置。

7.完成,可以点“预览”(ctrl+P)预览效果,并录制gif。

进群获取源文件及连载全部教程哦~

QQ群号:511649801

敲门砖(验证信息):彩云追月

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。