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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
为什么我做动效的效率提升了好几倍?原因都在这了!
101.8°
原创文章 / 经验/观点 / / 举报
14445 441 343 27

2020-08-11

Hello,U友们又见面了


大家可能对于“是北瓜呀“这个名字很陌生,那就对了,因为这个名子是最近才取的,哈哈,为什么叫北瓜,因为“冬南西”都有瓜,只有北没有,为了做一个独一无二的瓜,于是取名北瓜!


北瓜和大家聊聊关于动效的一些知识,里面有一些常用的表达式、插件、知识点科普等等,文末有插件、表达式的获取方式,希望能给大家一些帮助。



大纲如下:

1.设计师工作中常用的动效软件

2. 利用AEUX插件把Sketch的文件完美导入AE

3. 动效永远逃不掉的四大基础元素

4. 提高效率的AE插件和常用表达式

5.怎么去提升自己的动效设计能力



_____________________________________________________________________________________





1. 设计师工作中常用的动效软件


1.1 设计趋势一直都在变化,随着5G时代的到来,UI动效设计越来越多被应用在APP中。市场上的动画软件也是五花八门,为了完美解决需求我们应当选择合适的UI动效设计工具。



UI设计师常用的三款动效设计制作工具:Ae、Protopie、Principle简单介绍下软件的特点和适用性。


AE:支持Macos/Winds,特点就是强大且牛逼加持无敌特效,配合PS和AI等自家软件,更是得心应手。Behance、Dribbble上很多的大神都用来制作UI动画展示、礼物特效、概念作品等等。




Principle:支持Macos,同时配合Sketch也是非常方便。它主要是做2个页面间过渡专场特效,元素切换,细节动效的工具。重点是它可以实现人机交互,快速制作演示Demo等等。


Protopie:支持Macos/Winds,它更加轻量级,集可以调用iphone系统的陀螺仪、麦克风、罗盘、智能传感器等。重点是在ProtoPie上使用时不需要编写代码,可以直接对接开发。




1.2 Principlce和Protopie一般在需要交互动效、演示Demo或者比较理想的团队用的比较多,相对于我们工作中的项目:TAB动效、弹窗展示、体验交互、礼物特效比较鸡肋。而AE能更好的制作这些动画效果。


AE的功能和布局相对复杂导难操作难记,但是它能快速上手和制作动画,也是属于设计师的核心竞争力之一,本文重点的讲解AE在工作中的Sketch文件导入和利用插件提高动画设计效率。




2. 利用AEUX插件把Sketch的文件完美导入AE 


2.1 关于PS、AI文件导入AE的教程我就不多说了哈~  


我们先讲下AEUX插件的背景:AEUX 是由 Google 团队推出的运用在 Sketch 和 AE 的一组高效插件,能将 Sketch 里的图层以及整个画板一键导入到 AE 里,同时能在 AE 里解决图形分组和分层的问题,减少导出图片或者转入 Illustrator 处理。带来的不必要的重复动作。




2.2 关于AEUX的导入教程


1. 插件安装好后,打开sketch,选择 插件 > AEUX,打开插件面板。选中要导入到AE的画板,点击紫色区域“Selection to Ae”,如果界面中含有位图,会弹出一个窗口,选择或者新建一个文件夹在桌面保存位图。



2. 我们切换到AE,在窗口 > 扩展里面找到AEUX并打开。会发现AE中的插件面板上已经出现了在sketch里面的画板并显示图层数量,导入时分两种情况:


(1)如果此时没有创建合成,选择Add layers to comp“NEW”,会自动生成一个与画板大小相同的合成,并导入图层。


(2)如果已经创建了合成,选择Add layers to comp“CURRENT”,会直接导入图层到当前合成里。



3. 动效永远逃不掉的四大基础元素 


3.1 五大基础元素:旋转、位移、缩放、透明度基本上贯穿了整个动画效果,我们来简单了解下它们的动画属性。












3.2 翘楚们,前四个动画是不是都不需要动脑子就能看出它们的基础属性了,但是你拿第五个给你身边的朋友看,让他说下用到了哪些基础属性,我相信他会短暂的思考一下再回答。


不积小步,无以至千里。不积小流,无以成江海。

无论有多好看、牛逼、复杂的动画,它们都是由很多很多的小元素堆砌起来的

我们只要把这些基础的小东西和动画的运动原理掌握,就可以产出很优质的动画了~



4. 提高效率的AE插件和常用表达式 


4.1 在做动画之前每次都要手动将图层的轴中心调整好,十多个图层下来浪费了好多的时间,而 Motion v2 插件可以将这个问题完美解决。



Motion v2:除了轴中心一键居中功能还包括了很多小功能,比如最常见的缓动、EXCITE惯性回弹、BURST爆炸效果、CLONE复制关键帧、NAME实现批量修改图层名字等功能。


另外推荐几款高效常用插件:Flow v1.3(缓动神器)、GIfgun(一键导GIf)、Trapcode Particulars(特效粒子)、Twitch(故障信号)等等。


4.2 表达式在动画里的应用是很常见的,一小行代码比你做动画K几十个关键帧还管用,在这里我放一个最常用的弹性表达式:


freq = 3;

decay = 5;

n = 0;

if (numKeys > 0){

  n = nearestKey(time).index;

  if (key(n).time > time) n--;

}

if (n > 0){

  t = time - key(n).time;

  amp = velocityAtTime(key(n).time - .001);

  w = freq*Math.PI*2;

  value + amp*(Math.sin(t*w)/Math.exp(decay*t)/w);

}else

  value


动效加入了表达式的效果如下










除了这些还有更多的骚操作表达式:随机循环、回弹、数字增长、3D坐标转2D坐标等!




5.怎么去提升自己的动效设计能力 


AE的基本属性和动画原理这些都是基础知识,一定要熟练掌握。


举个例子:

因为我是做直播产品的需求,那工作中制作的动画都是跟特效有关的,例如:宝盒开启、卡牌抽取、徽章动画、礼物送出等等。推荐这些插件粒子类Pleuxs、Particular,SandStorm Motion Kit,运动类Newton等等。


放个北瓜去年在追波发布的作品




吸引起了几百个追波设计师的点赞



多看多想多练


多看:多去Dribbble、Behance、油管等平台观看优质的动画、动效、交互视频。


多想:基于优秀动画案例,自己要深度思考:三问它们一开始是怎么动的?中间是怎么动的?结尾又是怎么动的?用到了哪些基础属性(位移、蒙版、路径、贝塞尔曲线)?


多练:我们多看多想之后就要付出行动,只有上手练习才能让自己更熟练的掌握和把控动效。


点个赞支持下瓜瓜呗~


---加vx:Blush626
拿插件和表达式

Powered by Froala Editor

收藏

441人已收藏

评分:

完整度:4星

启发性:5星

勤奋性:5星

排版布局:4星

推荐:
干货满满的文章~

是北瓜呀

学习交流,微信:Blush626

  • 21

    作品

  • 4732

    粉丝

  • 36

    关注

  • 设计第一理论·心智模型思考分析和案例拆解
  • 贰零贰零·北瓜视觉年度祭
  • 《北瓜·杂集》 板式界面祭
  • 《北瓜·杂集》 界面风格祭

猜你喜欢

    是北瓜呀

    是北瓜呀

    学习交流,微信:Blush626

    十佳作品提名设计师人气明星首页达人砖家
    • 4732

      粉丝

    • 2031.1

      人气

    • 5.2w

      颜值

    作品

      最新推荐

      如何去做好响应式设计?

      103 1 0

      相关佳作
      换一换

        是北瓜呀

        点赞:343

        收藏:441

        评论:27

        为什么我做动效的效率提升了好几倍?原因都在这了!

        你确定要举报为什么我做动效的效率提升了好几倍?原因都在这了!

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

        0/200

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

        点击上传附件

        对谁可见:

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

        您确认要推荐?

        该作品发布时间:2020年08月11日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

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

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

        登录

        账号或密码错误

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

        登录

        可云端编辑的专业级UI设计工具

        立即体验