恭喜你成为UI中国推荐设计师 (详情)

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
融球类Music播放器动效/AE表达式动效
5.6°
原创文章 / 教程 / 已举报 /
717 7 4 2

更新于:2021-05-26

融球类动效目前不仅被设计师们广泛青睐研究,已经运用到很多APP中,下图是就是半仙哥结合AE的融球技术开发的一个Music播放动效,非常炫酷,并且还舔了我的女神

融球类动效目前不仅被设计师们广泛青睐研究,已经运用到很多APP中,下图是就是半仙哥结合AE的融球技术开发的一个Music播放动效,非常炫酷,并且还舔了一把我的女神 — 张钧甯,爽!在半仙哥擦哈喇子的间隙,童鞋们可看看今天要上的女神……不对,要上的案例! 

非常炫酷的案例,将抽象的音乐赋予给流动的的波浪,给人音符跳动,音波荡漾之感,唯美而逼格满满,从而能更好的提高情感化设计,提升用户体验。本教程不会按照步骤写,把一些重要技能包做一个详尽的说明。

No.1 循环表达式

让头像旋转,只需K旋转关键帧,给它起始和结束位置,如下:但是K完帧会发现,它只在有关键帧的时间段播放,超过的部分不播放,此时我们需要用到一组非常简单但强大的循环表达式,如下:

loopOut(type="cycle",numbkeyframes=0)

No.2 如何浪起来

AE提供了丰富的特效,合理运用能玩出各类屌炸天际的效果,如何做出波浪效果呢,首先绘制矩形,适当设置中心点和尺寸,然后选择“效果”>“扭曲”>“波形变形”,即可弹出来如下面板:

参数有点多,有木有!但是我们在实战案例中几乎只要设置“波形高度”、“波形宽度”、“波形速度”,具体参数可阴蒂制宜,别的参数几乎不用去修改,保持默认即可! 

No.3 如何打造融球效果

这是本教程最重要的知识点,相信童鞋们已然摩拳擦掌,迫不及待了,添加融球效果需要满足如下几个条件,缺一不可:

1. 图层必须是形状层;

2. 数量至少是2个;

下图的智能家居APP的动效也采用了融球效果,包括了圆形和矩形,方能添加AE融球效果:

在本例中,我们先绘制“矩形”,铺满合成即可,然后再绘制若干个圆形,用Motion 2插件调整下中心点位置,然后对每个小球添加位置关键帧,以达到小球上下跳动效果,具体的设置视频教程已讲述的非常清楚,这里半仙哥就不再一一赘述,图层如下: 

接下来我们新建“调整图层”,并放置在所有形状图层上面(调整图层能给它下面所有形状图层添加融球效果),如下: 

然后在选中“形状图层”的情况下,选择“效果”>“遮罩”>“调整实边遮罩”,弹出如下对话框: 

童鞋们也别被参数吓尿,你仅需调整下“羽化”值(这里半仙哥射的20.0),勾选一下“扩展平滑的地方”即可大功告成!

最后继续在选中“形状图层”的情况下,选择“效果”>“遮罩”>“简单阻塞工具”,将“阻塞遮罩”的值设为“20”(据半仙哥经验所得,“阻塞遮罩”应最好和“羽化”一致)即可!

最后,让我们再晒一遍本案例最终效果吧!

关注公众号:趣设网课,回复“融球类动效”即可获取课件与素材!

作者:趣设网课(v: uegreat)

本文由 @趣设网课 整理发布。未经许可,禁止转载。

Powered by Froala Editor

UI设计UI动效教程

创建于:2021-03-18
收藏

7人已收藏

趣设网

趣设网课uegreat

  • 36

    作品

  • 522

    粉丝

  • 59

    关注

  • AE快捷键-UI动效方向
  • Trapcode+AE打造粒子删除任务动效
  • 融球类-Tabbar动效/AE动效教程
  • Pxcook+PS高效切图/UI切图教程

猜你喜欢

    趣设网

    趣设网

    趣设网课uegreat

    诲人不倦小有见解话唠原创小生
    • 522

      粉丝

    • 180.7

      人气

    • 3071

      颜值

    作品

      GDC Award 2021启航

      推广

      最新推荐

      【经验】B端小记·初识B端产品

      1094 7 4

      相关佳作
      换一换

        趣设网

        点赞:4

        收藏:7

        评论:2

        融球类Music播放器动效/AE表达式动效

        你确定要举报融球类Music播放器动效/AE表达式动效

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

        0/200

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

        点击上传附件

        对谁可见:

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

        您确认要推荐?

        该作品发布时间:2021年03月18日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

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

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

        登录

        账号或密码错误

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

        登录