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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
旋转液体加载动效
0.0°
2018-05-30 好文转载 教程 原作者: UILEO 举报 1789 30 9 6

Image title

最近搜集了许多加载动效,这款加载动效特别简单,像我这种新手小白都能简单上手

哈哈~

废话不多说~

首先来说下具体操作流程:

Image title

创建合成(Ctrl+N )500*500px,帧速率:25帧/秒




用椭圆工具画一个大小:【38.0,38.0】位置:【0.0,-50.0】的圆




为了后期的质感,我们给圆一个渐变效果,在渐变填充编辑,这时候会有一个手柄可以调整渐变位置



编辑【变换】旋转添加时间帧,在2S的时候,改为1X , 然后按N键【结束动画模式 】,在按空格【开始/停止播放】, 这时可以看到小圆绕着中心点转圈,在选中两个时间帧按F9【F9缓入缓出,shift+F9减速,ctrl+shift+F9加速】




我们在按Ctrl+D【复制】四个圆



然后选中形状图层按U【显示关键帧属性】,先放大时间轴在以每03f错开调整时间轴


到这里加载的动效已完成了80%啦~


然后我们来调整圆的路径大小,依次为:

圆1:38*38

圆2:35*35

圆3:32*32

圆4:29*29

圆5:26*26



点击效果-模糊和锐化-快速模糊-设置模糊度为12



点击效果-遮罩-简单阻塞工具-设置阻塞值为5

按空格 一个简单的加载效果就完成啦~



——   怎么导出GIF   ——


首先Ctrl+M【添加到渲染队列】更改下输出设置格式为:PNG序列 然后点击渲染。





然后在PS里打开AE里导出的文件夹 选中一个 然后一定要选择图像序列和文件格式,否则打不开。导入成功后再ctrl+shift+s 保存成GIF格式【循环选项:永久】 



完成啦!哈哈 大家可以根据需要自行调整

Image title

有什么不足欢迎提出意见!喜欢就点个赞呗!


更新:2018-05-30

收藏

30人已收藏

余是大王

一个不是很专业的UI设计师~

  • 2

    作品

  • 1

    粉丝

  • 17

    关注

  • 关于“体验设计升级”的一些些思考
相关标签
设计UI教程

    猜你喜欢

      2018-05-30 好文转载 教程 原作者: UILEO 举报 1789 30 9 6

      旋转液体加载动效

      0.0°

      你确定要举报旋转液体加载动效

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年05月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      9
      30
      6

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

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

      登录

      手机号

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

      登录
      第三方账号登录