Flinto五步实现Path效果-教程-UICN用户体验设计平台

恭喜你成为UI中国推荐设计师（详情）

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20

0/200

设计大赛

设计大赛
发布广告
发布招聘
其它需求

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

首页推荐

Flinto五步实现Path效果

0.0°

2016-01-26 原创文章 教程举报 16889 412 260 78

杰克史派罗关注

用最短的时间做出最想要的效果，Flinto五步搞定曾经难倒我的path效果！

前段时间给大家介绍了Flinto for mac，今天给大家一个简单的教程。那么首先我们可以看下Flinto做的几个案例视频。

看完之后我想告诉大家，如果你不会写代码，如果你想把整个APP做个高保真，如果你追求速度还想保持一定的细腻动画那么你应该尝试下Flinto。下面让我们一起做一下Path的案例，不要着急，我只要三分钟。

1.第一步，用Flinto的插件把Sketch的文件导入到Flinto

Image title

2.第二步，用红色按钮创建链接到第二个页面新建过渡

Image title

3.第三部：在动画编辑器中调整弹出按钮的位置

五个弹出按钮旋转720度，移动到下方并且透明度降为0，点击上方播放按钮预览 Image title

4.第四部，红色按钮旋转-45度，把黑色图层透明度降低为0，右上角保存

Image title

5.第五部，创建连接返回到上一层

Image title

好了，不到三分钟，我们完成了，看下效果.

Image title

sketch和Flinto源文件，Flinto安装包和插件都在附件里，自己去寻。

百度云盘我是源文件：http://pan.baidu.com/s/1pKacSeZ

下方关注我的新浪微博可以查看更多案例

Image title

更新：2016-01-26

260

412人已收藏

杰克史派罗

30

作品
1235

粉丝
20

关注

猜你喜欢

2016-01-26 原创文章 教程举报 16889 412 260 78

Flinto五步实现Path效果

0.0°

添加收藏！

您还可以进行分类收藏

您确认要推荐？

该作品发布时间：2016年01月21日

评分

完整度

启发性

勤奋性

排版布局

提交需求

猜你喜欢

举报理由:

您确认要推荐？

评分

推荐心得