恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
AE变速小汽车加载动效教程
0.0°
2018-08-14 原创文章 教程 举报 2723 32 13 2

先放一下效果图

Image title

一、背景介绍

这个小汽车加载动效我之前发过作品,那时让想学的小伙伴给我留言,我可以出个教程,然而过了几个月都没有小伙伴给我留言,我也没在意,哈哈。最近忽然有小伙伴微信加我说在等我的教程,我其实受宠若惊啊!AE我是在网上摸索自己学的,到现在会的还是比较基础,这个动效一些细节做的还不是很好,在这里我只是分享制作的方法。AE主要还是调细节,分析思路,没有一开始想象的那么难,所以想要学AE的小伙伴不用太担心哈~,本教程如有不妥,希望大家积极指正。


二、制作思路分析

做动效除了掌握技能之外,最重要的就是清楚动效的实现方式,即分析每个阶段的路径。首先我不想让动效做的太简单,所以考虑让小汽车从无到有再消失,期间还有速度的变化。

Image title

三、实现的方式

1.剪切蒙版

用到剪切蒙版,让元素出现在你想出现的区域。


2.动效的实现

无论加速还是减速,实质上都是位移的关系,在AE表现为position的变化。加速就是在同等时间内平移的长度加大,减速就是同等时间内平移的长度减小,匀速就是在原地。背景作为衬托,理应跟汽车速度的变化而变化。当然是在汽车进入画面的时候开始动起来。


四、素材的准备

需要单独做动效的部分都应当独立成一部分方便操作。

这里需要的元素有APP背景页面,长街道背景(具体长度根据你可视区域大小、动效时长、运动速度来定),车身,前轮,后轮

Image title

五、动效制作

做好分析准备以后,我们就开始着手做动效了(教程里的具体数值设置可根据具体情况而定,常常出现照搬也做不出来一样的效果,可能是哪里出现了问题)

1.新建合成


Image title

2.给新建合成设置参数

这里的合成大小主要取决于APP背景的尺寸大小,数值设置仅供参考。

Image title

3.直接把准备好的素材拖进合成里

初始位置都是居中放的,所以需要手动调整到自己想要的位置上,做好布局

Image title

4.布局好以后开始规划可视区域

首先用矩形工具画出一个矩形,作为可视区并放置在你想显示图层的上一个图层,显示图层在TrkMat上选择第一个Alpha通道

Image title

5.设置速度

背景跟车的速度连动,两个车轮和车身的速度一致,所以实际上只需要设置两个元素的位移即可,那就是长街道背景图和车身车轮三选一。具体的设置数值我就不标出来了,主要还是靠大家去体验,去调整,才更能理解其中的含义。

Image title

Image title

6.车轮转动

车轮的前进设置它的转动即可,这里设置旋转60,累计增加,加速的过程也是关键帧的密度加大。


7.文案的设置

汽车加载过程中,文案显示“努力加载中,请稍后…”,加载完成后显示“加载完成”

此时小汽车已跑到可视区外面。


8.导出GIF动图

我之前一直用的PS导出GIF动图,但是PS导图稍微有点局限(PS很6的同学请忽略哈),最近发现了一个很好的用的AE插件,导出的GIF不仅没有白色描边,还能以更小的体积显示更清晰的画质,那就是GifGun,文末会有下载地址


本教程不着重手把手按部就班设置参数,主要给大家分享我做动效时的思考方法和步骤,具体的参数大家在摸索的过程中能更深入地把握原理,不过文末我还是会把本教程的源文档分享给大家,仅供大家学习使用,算是一个小彩蛋吧!









更新:2018-08-14

下载
收藏

32人已收藏

予安的笔记

用心设计

  • 20

    作品

  • 100

    粉丝

  • 34

    关注

  • 设计师一定要懂印刷吗?
  • 平台设计师”与“业务设计师”的区别
  • PS软件系统学习笔记(二)
  • 学习心得+PS软件系统学习笔记(一)

    猜你喜欢

      2018-08-14 原创文章 教程 举报 2723 32 13 2

      AE变速小汽车加载动效教程

      0.0°

      你确定要举报AE变速小汽车加载动效教程

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年07月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      13
      32
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录