美文网首页
lesson1:引导页动效

lesson1:引导页动效

作者: 多少有理 | 来源:发表于2017-02-17 00:02 被阅读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.保存和预览

    相关文章

      网友评论

          本文标题:lesson1:引导页动效

          本文链接:https://www.haomeiwen.com/subject/byhkwttx.html