分享此网站可得100G教程,联系小洁领取点击这里给我发消息

滚动数字AE教程

APP设计 学UI设计 40次浏览 0个评论

前几天群里有人问怎么做加载条对应的数字滚动,我就给群里同学简单的说了一下。后来我发现,有必要单独写一篇教程告诉等多需要的同学。

 

滚动数字AE教程

 

一、新建合成。

1、新建一个合成,长宽设置800*600。帧数率30帧/秒,时间我这里设置5秒。(后期可调整,合适就行)

 

滚动数字AE教程

 

二、新建纯色背景。

1.在时间轴的左侧空白处鼠标右击–新建–纯色。

 

滚动数字AE教程

 

2.纯色层大小同样为800px*600px,颜色#2AC2EA

 

滚动数字AE教程

 

3.得到一个蓝色的背景。

 

滚动数字AE教程

 

三、准备工作做好了以后就要进入正题了,做出数字滚动。

1.再新建一个纯色,颜色是什么无所谓,大小和画布一样。左侧新增了一个纯色层,中间画布窗口依然是蓝色。

 

滚动数字AE教程

 

2.在选中新建的第二个纯色层情况下,在顶部导航窗口找到效果–文本–编号。在弹出的设置窗口可以选择字体,字重样式,方向以及对齐方式。

 

滚动数字AE教程

 

3.确定后,得到下图,在窗口的左上角有个参数设置区。并且画布中有0.000

 

滚动数字AE教程

 

4.如果觉得字体,对齐这些不满意,可以在“选项”中重新调出设置。(比如我调整了字体和样式)

 

滚动数字AE教程

 

5.字体填充颜色,太红了,刺眼,我想把它改成白色的。

 

滚动数字AE教程

 

6.因为我想要从0~100%滚动,不需要小数点,所以把小数点位数改为0。

 

滚动数字AE教程

 

7.你会发现还缺少一个%,在左下角空白处新建一个字符层(或者顶部工具栏“T”插入字符),在字符设置窗口设置和“0”一样的参数,字体、字体样式、字体大小、字体颜色。

tips 1:如果没看到字符设置窗口,可以在顶部:窗口-字符,打开。

tips 2:新建的字符层,默认中心锚点不在中心,可以用motion2

插件点一下(关于motion2自行百度)

 

滚动数字AE教程

 

四、开始做数字滚动。

1.将“当前指示器”移动到时间轴的第0帧处。选中刚才的滚动数字图层,然后在数值后面输入“0”,最后在它前面的秒表处点一下。相当于在第0帧处K一帧数值“0”

 

滚动数字AE教程

 

2.将当前指示器移动到02:00f处,然后在左上角窗口中的“数值”后面输入100。软件会自动给你k一帧。这样数字滚动的动画就做好了。

 

滚动数字AE教程

 

3.一开始我们设置的是5s,我们现在只用了2s,有点太长了,所以在2秒后面一点结束就行了,把当前指示器移动到后面几帧处,按键盘上的“n”,把后面的时间截除掉。按空格键就可以预览了。

 

滚动数字AE教程

 

4.导出的话用gifgun插件导出方便。

五、数字的滚动运用的地方很多,常见的如:加载条,下载进度,还有一些计步,等等。

 

越努力越幸运~

 

下次再见!


推荐:查看最受欢迎的设计导航网站 → http://www.xueuisheji.com

交流:结交更多有才华的设计师?请加入UI设计QQ群 ,与设计师交流设计。

喜欢 (0)
[关注:设计军团]
分享 (0)
关于作者:
学UI设计网专业的UI设计师交流、学习与展示的平台。我们将打造中国最专业的UI设计交流平台,为UI设计师做最好的职业生涯一站式服务,提高UI设计乃至互联网设计的行业价值!