恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
Tabbar动效-翻转类,某教育AP Tabbar剖析与升级
7.9°
原创文章 / 经验/观点 / / 举报
1330 16 13 0

2021-03-06

优秀的Tabbar动效能提升用户体验和情感化设计,让你的APP在众多竞品中脱颖而出(好苍白的台词,都已麻木了)。

优秀的Tabbar动效能提升用户体验和情感化设计,让你的APP在众多竞品中脱颖而出(好苍白的台词,都已麻木了)。今天给大家带来的一个翻转类的Tabbar的动效,具体参考了腾讯课堂APP的Tabbar,并且做了一些改版和升级优化。

按照惯例,本例根据视频教程已然足矣,但是为了更好的学习体验与流程,半仙哥整理了一份图文,欢迎大家在练习的时候参考!废话少说先上图:

Step1 先在PS中绘制图标,将每一个图标的图层放到一个图层组里,分别命名为“home”、“search”、“class”、“user”,效果如下: 

这里半仙哥再强调一点,PS中的图层组导入到AE中会生成合成,更加便捷与高效!

Step2 打开AE,将psd文件导入到AE中,导入种类选择“合成-保持图层大小”,如下所示:

Step3 可看到这样的一个合成,然后AE根据图层组,自动生成了4个合成,效果如下: 

接下来打开合成“home”开始打造第一个Tabbar动效,“首页”、“home_1”、“home_2”添加“图层”>“图层样式”>“颜色添加”,第1帧的颜色为“#232323”、第15帧的颜色为“#005DFF”,这样既可完成Tabbar颜色的动效; 

Step4 接下来本例中最重要的部分,即添加翻转效果,选中“home_1”赋予3D图层,然后按“R键”可调出旋转的属性,此时旋转属性如下: 

对“Y轴”旋转设置关键帧,第1帧处为“0”、第15帧处为“-180”,如下所示: 

Step5 选中“Y轴旋转”的2个关键帧,然后找到Motion 2插件的“excite”属性,即可添加回弹效果。

基本上本例知识点就是这样,剩下的Tabbar都是重复劳动,同学们在自己撸的时候一定要保持绣花班的耐心以及追求校花级女神的毅力,方可完成半仙哥最终完成的效果。

由于“search”的旋转方向不一样,这里半仙哥再补充一下!

Step7 导入“bg.psd”,然后将合成大小设置为800*600,并设置蒙版,如下所示: 

最终输出avi影片,在PS中打开,最终输出成GIF格式,效果如下: 

关注公众号:趣设网课,回复“翻转Tabbar”即可获取课件与素材!

作者:趣设网课(v: uegreat)

本文由 @趣设网课 整理发布。未经许可,禁止转载。

Powered by Froala Editor

收藏

16人已收藏

趣设网

趣设网课uegreat

  • 36

    作品

  • 522

    粉丝

  • 59

    关注

  • AE快捷键-UI动效方向
  • Trapcode+AE打造粒子删除任务动效
  • 融球类-Tabbar动效/AE动效教程
  • 融球类Music播放器动效/AE表达式动效

猜你喜欢

    趣设网

    趣设网

    趣设网课uegreat

    诲人不倦小有见解话唠原创小生
    • 522

      粉丝

    • 180.7

      人气

    • 3071

      颜值

    作品

      GDC Award 2021启航

      推广

      最新推荐

      经验 | 矩形字体设计案例讲解

      76 0 0

      相关佳作
      换一换

        趣设网

        点赞:13

        收藏:16

        评论:0

        Tabbar动效-翻转类,某教育AP Tabbar剖析与升级

        你确定要举报Tabbar动效-翻转类,某教育AP Tabbar剖析与升级

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2021年03月06日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录