导航栏图标动效-小白式AE教程

  • 作品类型图标
  • 作品属性原创作品
  • 作品版权署名-非商业性使用-相同方式共享
20030 113 345 2020-05-10

最近在研究导航栏icon的动效,挑了知识面涵盖比较多的一个案例在这里分享给有需要的童鞋。

如果可以完全掌握这篇教程里面的知识点,那市面上实际应用的那些导航栏的icon动效也差不多能做个七七八八了。所以,好好消化吧~

教程有点长,适合周末在家修炼哦~

使用的软件,AI和AE相结合。    2017-2020版都可以。

我把icon源文件及做好的AE工程文件打了个包,放在文章的末尾,需要的童鞋,可以自行下载哦~

全部评论:113

  • 一条九

    2023-08-11 09:48

    hhhh 是不是缺了icon4退场特效

  • 酒圆

    2023-03-10 16:00

    我用Media Encoder导出为什么糊糊的,请问大神用的什么插件或软件导出的这么清楚

  • Naomi奥米

    2023-01-13 13:56

    太棒啦!!!刚学ae,但这个教程写的非常仔细,最后也做出了效果~太感谢up拉

  • 崇辉

    2022-05-10 10:17

    大佬 这种动效也适用于小程序吗?

  • 酷酷的王先生

    2022-04-27 10:11

    @我是来自非洲的阿叶: 解决了吗,我的也不行了刚开始可以

  • 冷得康康抖

    2022-02-27 19:35

    @二五啊: 对呀,我也想问

  • 二五啊

    2021-07-14 17:45

    想问下这个怎么导出给后端进行使用

  • freedom

    2021-06-22 16:41

    做的图标第一个效果对了,第二个方向反了 第三个出来一点 最后一个全没了,哈哈哈哈笑死

  • smq199811

    2021-04-27 13:25

    为啥第四个icon4-内的缩放有问题,这缩放竟然是左右移动的,有大佬指教一下吗

  • Narcissus_Y

    2021-04-12 10:23

    @设计界的一股清流: 会了会了牛牛牛

  • 设计界的一股清流

    2021-04-02 09:56

    @Narcissus_Y: 导出gif太基础了,几步就搞定了。没啥好写的

  • Narcissus_Y

    2021-03-31 14:00

    @设计界的一股清流: 老师可以出一个导出的教程吗?导出SVGA或者gif的

  • 懒腰慢慢

    2021-03-31 11:03

    想大佬问问工程文件在哪里呀,想下载

  • 设计界的一股清流

    2021-03-31 00:51

    @Narcissus_Y: 我是用ae导出视频格式然后用ps保存的GIF,你也可以用GIF gun这个插件(AE的)

  • Narcissus_Y

    2021-03-30 18:29

    请问教程里的GIF您是怎么保存的呢?是录屏还是用PS导出的呢,我用PS导出提示出现未知错误

  • 2021-03-23 16:09

    做是做出来了,可是我不会导出来

  • 兽人加鲁鲁

    2021-03-09 11:14

    就我一个人打不开源文件吗

  • MrMeng

    2021-02-23 17:18

    @你有多久没有学习了呀: 在ai做好直接复制进去,你没载体怎么能复制进去,新建形状图层就能复制进去了

  • 恒星的恒心

    2021-02-23 11:06

    哈哈哈 终于一点点一点点的跟着做出来啦 感谢大佬

  • 咩2ya

    2021-01-21 10:20

    感谢教程~~写的很细了,没有视频情况下也能看明白,就是界面的图缩的有点小,想看看界面数值看不太清

  • 设计界的一股清流

    2020-12-21 23:04

    @九`~: 加油,相互学习~哈哈

  • 九`~

    2020-12-18 15:03

    蛮不错的 自己完成了一大半部分 感谢大佬

  • chiaki

    2020-12-11 11:29

    教程写的有点复杂,看的我头都大了。

  • 设计界的一股清流

    2020-11-17 11:02

    @†上帝弃之不顾的幻影†: 一般用AE导出SVGA或则Lottie文件交接给开发,不同的开发团队实现的方法也不一样。具体的情况还得和开发沟通

  • †上帝弃之不顾的幻影†

    2020-11-17 10:43

    请问这种动效怎么导给前端 是用GIF吗 ?还是什么?

  • 2020-10-19 15:59

    前面1-5步的图片怎么加载不出来了?直接第六步开始?

  • 宇芳菲

    2020-10-09 13:22

    步骤好详细,一步步来做成功了

  • CHANCE520

    2020-09-25 14:37

    请问一下湍流置换的目的是什么啊?我添加这个效果没看到区别呢

  • 你有多久没有学习了呀

    2020-09-24 17:30

    第一步就卡住了,请问在ae中如何设置使矩形圆角不同,还有ai复制不到ae里面,有人可以解答一下不,感谢!

  • 狂奔的小白

    2020-09-22 15:10

    @狂奔的小白: 看到了,谢谢,哈哈

  • 更多

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票