lesson1:引导页动效

2017-02-17  本文已影响80人  多少有理

时间真的很不够用啊!!当你很认真做一件事的时候,你会发现时间真的很少很少!!!第一次使用flinto制作引导页动效。记录下几个要点:

Flinto的特点

一:可以做左右翻转,开门效果,左拉右拉等动画效果;

二:支持手势操作,实时预览,查看交互效果;

三:支持sketch文件导入,可以做一个项目的整个交互效果;

Affinity Designer软件可以相互转换
包括的文件格式:PNG,GIF,ITFF,PSD,PDF,SVG,EPS

绘制链接(相当于触发区域),是透明的;

flinto做动画只能两个图层为一组,一起做动画,并且是相反的;

新建动效里面,开始和结束,“开始”是结束屏幕的动效,“结束”是开始屏幕的动效;

属性调整包括:坐标、尺寸、旋转、弹性函数(张力、摩擦、速率)

两个屏幕之间会有自动吸附的功能

快捷键的使用:

1.shift+空格键:播放慢性动画;

2.f:新建链接;

3.d:绘制图层链接;

4.command+t: 编辑过渡效果;

5.选中一个图层+b:创建反向链接;

6.command+图层:隔选图层;

7.command+p:预览(整个交互动画);

8.command+shift+p:预览(当前画板);

9.command+option+g:创建滚动组;

7.回车:确定;

8.command+g:编组;

9.command+shift+g:解组;

10.command+r:重命名;

11.数值区域接受简单的数学运算输入,“+”、“-”、“*”、“/”;

12.option+图层,移动,复制图层;

13.command+b:创建微交互;

图层移动

1.command+option+△:上移一层;

2.command+option+▽:下移一层;

3.command+option+control+△:移到同一层级的最上面;

4.command+option+control+▽:移到统一层级的最下面;

添加链接

1.创建链接

某一个图层或者元素,针对具体的

2.绘制链接

绘制链接主要是针对某一块区域,可以手动绘制触发区域

3.添加定时器链接

(1s(秒)=1000(ms)毫秒)

添加定时器链接一般用于启动页过渡到首页,不需要用户手动操作到新页面的页面,或者是广告banner,自动滑动到下一个广告;

特殊说明:

1.忽略历史记录(Ignore History)

这个功能主要是返回上一步的时候能够保留已经操作过的行为,比如当前页面收藏按钮,点了红色,如果返回连接的话,会返回到没有收藏的情况

2.反向过渡(Reverse Transition)

3.防止过冲(Prevent Overshoot)

4.添加音效(Add Sound)

5.跳过动画(Skip Animation)

新建动画的步骤:

1.绘制链接
2.添加手势
3.新建过渡(是两个页面的过渡效果,有默认的几种状态,也可以自己新建)
4.保存和预览

上一篇下一篇

猜你喜欢

热点阅读