AE制作加载动画旋转圆圈加载中loading动画

loading加载动画是手机app和网页web页面经常能看见的一种期待动画。只要一步一步按照笔者的步调操作,你也一样能做出标致的加载动画,如下图所示:

eac4b74543a9822660d45f5f8582b9014a90ebb5.jpg

工具/原料

  • 电脑、Adobe After Effects、CorelDRAW(不限版本)、Adobe ImageReady CS2

方式/步骤

  1. 1

    打开CorelDRAW软件(不限版本),新建一个文件,在空白处按住CTRL键画一个正圆圈。

    377adab44aed2e734bcdf2548801a18b87d6faa6.jpg dbb44aed2e738bd47205c649ae8b87d6277ff9a6.jpg 2fdda3cc7cd98d102bc678492e3fb80e7bec90b3.jpg
  2. 2

    选择弧形东西,调整至垂直中间点对其,然后按F2键调出轮廓笔,设置好喜好的颜色、设置线的厚度、角、线条端头为圆头,最后点击确定按钮。

    2e2eb9389b504fc2e074c47deadde71190ef6d9a.jpg b8389b504fc2d562b323a495e81190ef76c66c9a.jpg 43a7d933c895d1433660905b7cf082025aaf07b7.jpg
  3. 3

    如图所示选择透明度东西,拉出线端一端的渐变透明度,再程度翻转复制图形。必然要细心看这个步调的最后一张图的操作步调。

    9d82d158ccbf6c81da5a5890b33eb13533fa405c.jpg d4628535e5dde711a9f9378ea8efce1b9d16619a.jpg d043ad4bd11373f01c291be7ab0f4bfbfbed04b7.jpg
  4. 4

    然后把适才复制的反标的目的图形垂直翻转,然后按CTRL+A全选图形,此时注重输入法,若是系统主动切换到了中文,要切换回英文输入法,然后按“E”键让图形程度对齐。

    d058ccbf6c81800a4288fd76be3533fa828b475c.jpg 8435e5dde71190ef4cd0e6a7c11b9d16fdfa609a.jpg ac4bd11373f08202c584e54744fbfbedab641bb7.jpg
  5. 5

    图形对齐之后,这个时辰按CTRL+E导出PNG图片。选择好图片存放路径,设置好文件名,文件格局为PNG,点击导出按钮,过一会儿弹出“导出到PNG”对话框,点击确认按钮获得一个PNG透明布景图片。CorelDRAW软件可以封闭了

    83025aafa40f4bfb59c6ea2c0c4f78f0f73618b7.jpg 5bafa40f4bfbfbed084f420777f0f736afc31fb7.jpg 6159252dd42a283436e1417354b5c9ea15cebf06.jpg
  6. 6

    打开AE软件,把适才导出的PNG图片直接拖进AE资本库,再从资本库里的PNG图片拖入图层,然后点开图层的两个三角形,一会儿要在这里操作。

    91ef76c6a7efce1ba000bcb2a051f3deb48f659a.jpg bd3eb13533fa828bc64ee99bf21f4134970a5a5c.jpg 9c16fdfaaf51f3def599cd1c9beef01f3a29799a.jpg
  7. 7

    舞台旁边空白处单击右键,点击“合当作设置“,帧数率设置30,播放时长设置1秒,点击确定。再在图层的第一帧的扭转项点击小圆圈设置关头帧,然后鼠标点击最后一帧,此时在扭转项填写数值1(1代表顺时针扭转一圈,-1代表逆时针扭转一圈) 。这时按空格键可以预先看见动画结果。

    b58f8c5494eef01f7f3f6cbdeffe9925bc317d9a.jpg 32fa828ba61ea8d39f4f007c980a304e251f585c.jpg a71ea8d3fd1f4134f35a71062a1f95cad1c85e5c.jpg ae51f3deb48f8c54d7f8b15735292df5e0fe7f9a.jpg aa64034f78f0f73608e838790555b319ebc413b7.jpg 4034970a304e251ff29a9080a886c9177f3e535c.jpg
  8. 8

    按CTRL+M导出,在弹出的对话框中选好存放路径,新建一个文件夹,打开文件夹,点击保留。再点击”无损“弹出输出模块设置,选PNG格局,选择RGB+Alpha,设置好图片分辩率建议设置小一点,再点击确定,再点击衬着,最后获得动绘图片序列。

    960a304e251f95cab998e6cec6177f3e6709525c.jpg 78310a55b319ebc41b6e02e18d26cffc1e1716b7.jpg 95eef01f3a292df5a7e8d86db3315c6034a8739a.jpg b219ebc4b74543a92c0d8eb411178a82b90114b7.jpg d50735fae6cd7b890cbc4cfb002442a7d8330ef1.jpg
  9. 9

    打开Adobe ImageReady CS2软件,导入适才输出的图片序列,点击4-up选项呈现四个画面,建议选第四联,因为最终GIF文件体积不会太大便于传输。这个时辰按住CTRL+SHIFT+AIL+S导出动画,设置好文件名和存放路径,点击保留,再点击OK并封闭Adobe ImageReady CS2软件。最后获得GIF动画。

    1f178a82b9014a90422832c5a6773912b31beeb0.jpg f11f3a292df5e0fed133fd79536034a85edf729a.jpg a686c9177f3e6709a46d318734c79f3df8dc555c.jpg e1fe9925bc315c607fbe1f9782b1cb134954779a.jpg 6609c93d70cf3bc7ef6db994de00baa1cd112a5c.jpg 42a98226cffc1e173ba9f8494590f603738de9b0.jpg b7fd5266d016092420f8d363db0735fae7cd34ec.jpg
  • 发表于 2019-11-12 20:00
  • 阅读 ( 352 )
  • 分类:其他类型

相关问题

0 条评论

请先 登录 后评论