APP发布入口动效教程 获赏10金币 案例教程 基础教程

leeyun 普通用户 2019-11-22 2673

APP发布入口动效教程

 

1. 新建一个矩形,修改颜色,写上+,给元件取好名字叫:发布按钮,设置大小如下图:

 

2. 同样的方式,新建5个矩形方块,布局在+号上方,呈半圆形,如下图:


同样对这5个按钮设置名称


3. 这时候记录好这5个按钮的的xy坐标,方便后面做动效的时候用到对应矩形的坐标

4. 这个时候需要把五个黄色矩形拖拽到+号的位置,并且设置为隐藏状态

最后可见元件只有+号,如图:

5. 接下来我们给+号设置点击事件,鼠标单击+号的时候,需要移动五个按钮到最开始的目标坐标点上,如图:

 

继续设置第二个矩形的移动,移动时间设置为650,稍微更快一点,看起来就很舒服:

依次类推,完成剩下几个矩形的移动:


这个时候还需要同时把这个五个矩形进行显示出来,调整后如下:

最终用例结果如下:


 

6. 运行效果如下:

7. 最有再把+号的动效进行优化,进行一个225度的宣传,

8. 运行效果如下:

9. 最后我们调整关闭状态,当再次点击+号的时候,需要收起5个发布按钮,按照逆向的思维,把刚刚移动出去的用例,按照相反的数据进行设置,但是这个时候我们需要一个判断条件,当“招聘”这个元件隐藏的时候执行上面的展开操作,当显示的时候需要收起操作,整合这个逻辑,形成的用例如下:

效果如下:

 

这个时候我们会发现,收起来的时候弹性太大,所以需要把关闭的动效关闭,优化用例如下:


动效如下:





==================================================

最后大家可以发挥想象,修改移动的动画参数,可以变换出如下几种效果:

动效用例:

 

 

 

用例如下:



用例如下:


上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (18)
  • yujiabian 普通用户 11天前
    0 引用 19
    66666
  • 尹木 普通用户 2022-6-18
    0 引用 18
  • changweimelo 普通用户 2021-11-30
    0 引用 17
    学习了
  • npchaha 普通用户 2021-10-20
    0 引用 16
    感谢分享
  • NancyHero 普通用户 2021-8-3
    0 引用 15
    6666
  • wowo 普通用户 2021-6-21
    0 引用 14
    感谢
  • 小战士 普通用户 2020-8-13
    0 引用 13
    多发点
  • meihao 普通用户 2020-7-8
    0 引用 12
    感谢分享
  • gxlqs2249 普通用户 2020-4-26
    0 引用 11
    厉害了
  • 爱看星星的周宇宙 普通用户 2020-4-23
    0 引用 10
    感谢分享
  • Demon_1586777772 普通用户 2020-4-13
    0 引用 9
    感谢
  • 单单 普通用户 2020-3-20
    0 引用 8
    谢谢
  • 阿,啊,啊嚏!!! 普通用户 2020-2-27
    0 引用 7
    学习了
  • 梁洋 普通用户 2020-2-13
    0 引用 6
    感谢分享
  • szuzsq 普通用户 2020-2-4
    0 引用 5
    赛事预测推荐APP原型
  • 普通用户 2019-12-19
    0 引用 4
    非常好,学习了
  • yohn 普通用户 2019-11-25
    0 引用 3
    good    很棒
  • 沈十三 管理员 2019-11-23
    0 引用 2
    感谢分享,已获得10金币奖励!
返回