lesson1:引导页动效

时间真的很不够用啊!!当你很认真做一件事的时候,你会发现时间真的很少很少!!!第一次使用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.保存和预览

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你...
    Yiart阅读 9,295评论 3 34
  • 官网中文版 1 简易天空替换## 技能:线性擦除,追踪运动,用颜色键K出人物,用色彩曲线调色。(1)天空图片素材放...
    朱细细阅读 13,893评论 4 82
  • 刚和水水弄了下楼下的插头,房子装修这么多细事,还好有水水,不然我真有的忙。 今天哥哥去广州,而我要管好这家店,我是...
    吉草末阅读 1,072评论 0 0
  • 在网上经常看到有人晒自己救助了流浪狗、流浪猫,却没见过哪只狗狗和猫猫把自己的食物送给饥寒交迫的同伴,倒是经常看到狗...
    吕艳朋阅读 4,655评论 1 50
  • 最近我看到了一个概念:第一性原理,个人觉得很受启发,我相信只要运用得当,就能像开了白眼一样,马上看到别人看不到的东...
    冯毓阅读 4,249评论 0 3

友情链接更多精彩内容