火星网校
实用动效技能全靠这些
发布时间：2024-03-13 15:50:55 浏览量：137次
1、关于动效分类
首先我们先区分几个动效的概念。
MG动画
MG动画（Motion Graphics），简单点来说就是图文动画的意思。MG动画的整体运用十分广泛，其中包括电影开头,电视开头,栏目包装,产品演示,广告节目等各个领域。
作为互联网设计师，我们可以使用简单的MG动画来进行APP展示：比如app store的video、官网video或者工作汇报中的的项目成果展示，总体我们可以把它划分在品牌设计的类别中。
表情包动图
如今的微信表情平台发展成了一个表情包行业，可以让设计师发布自己设计的表情包供微信用户使用，其中一部分表情包是带有动效的，即逐帧动画的产物，以小gif的格式呈现。
UI交互动效
在用户体验界面设计中，因交互需求而发生的动效设计，例如：loading、转场、点击反馈等。现在越来越多专业化UX交互动效软件助力实现html在手机上的实时操作反馈，就仿佛你不用代码做了一个app出来。
2、关于做动效的软件
之前经常看到动效作品底下总会有童鞋在下问“大佬，哪个软件做的呀？”，这里来做个统一总结，以后这种问题就不用再去问别人了。
1. Adobe After Effects
大家最熟悉不过的AE，做UI动效最常见的软件。
优点：面向电影特效的软件，可以完成的动效种类与复杂程度可想而知，灵活配合阿逗比自家的ps、ai占尽方便，可提供Lottie动画库Jason
文件缺点：入门门槛高，功能繁杂，学习成本高；
导出格式：mov视频文件。
2. Adobe Photoshop
嗯对，你没有看错，是你每天都要打开的阿逗比家ps，它也是可以做动效的。
优点：同样使用timeline设计动效，操作较简单；
缺点：可完成的动效效果寥寥无几，适合用来完成逐帧动画（如表情包里的简单小gif）；
导出格式：gif动图文件。
3. Hype 3
如果说AE是UX动效届的ps（功能繁杂且全面），那么Hype 3应该就是UX动效届的sketch（针对性强且易操作）。
优点：易上手、无需代码可以实现实时交互动效操作、原生界面支持中文，3.0版本后支持更多动画效果。
缺点：可完成动效效果有限。
导出格式：gif动图/视频/png/Html，pc、mobile实时操作。
4. Flinto/Principle
其实这2玩意差不太多，都是更简易版的Hype 3。
优点：操作简单的一如sketch，有sketch插件可以配合使用，效率高，无需代码可以实现实时交互动效操作。
缺点：可完成动效效果比Hype 3还有限。
导出格式：视频mov，链接只能在手机上同步预览，可录屏。
5. Keynote
这个应该是设计师都知道的神器，一如宣传语“让你的演示文稿提神提气、出类拔萃“，比PPT好用一万倍。
优点：无脑操作，效果一流
缺点：仅有有效的过渡功效
导出格式：keynote文件
3、UI动效常用核心技能盘点
因为在座各位大部分都是UX设计师，所以以下着重介绍一下如何用AE实现几个核心UI动效技能点。
Skill Point 1：缓动
交互动效的初衷是为了给产品带来舒适的用户体验，那么从本质上每一个交互动效的过渡都应该遵从物理曲线与缓动原则，比如下拉的重力感、过场的缓入缓出，避免产品像机器般给用户带来生硬的感受。
AE应用
- 1. 选中关键帧—动画>关键帧辅助>缓动 | animation>keyframe assistant>easy ease （或点击关键帧右键>关键帧辅助>缓动）
- 2. 图形编辑器>使视图适应所有曲线>拖动端点调整曲线 | Graph Editor > Fit all graphs to view
Skill Point 2：遮罩
遮罩功能可以解决许多你想不到的动效问题，达到一个比如魔术化的效果，也是MG动画转场常用功能之一。简单理解来说，就是将动效分为2层（底层是展示图，顶层是遮罩），通过改变的遮罩大小，我们可以看到底层展示图的不同部分。
AE应用
- 1. 选中形状工具在固态层或合成的预合成 | solid 或者 Pre-compose上画一个形状（即完成该图层的遮罩mask）；
- 2. 下拉遮罩属性即可调整遮罩路径、大小、羽化、透明度等数值；
Skill Point 3：值变
工具型APP中常用的数值变化动效，可以灵活展现数字变化的过程，在MG动画中使用也是一种数据的震撼表现方式。
AE应用
- 1. 新建文本层并选中—效果>文本>数字 | Effect>texts>numbers
- 2. 参数设置
Skill Point 4：3D翻转
设置3D属性可以让物体拥有XY轴空间，立体化表达物体概念。
AE应用
- 1.打开图层3D图层属性 | 3D layer
- 2.设置XY轴属性
Skill Point 5：毛玻璃效果
iOS源生的毛玻璃效果在很多动效软件上都受到限制，当然AE是无所不能的。这里单独作为一个技能点来和大家分享还因为AE中毛玻璃效果的制作还会牵扯到一个关键点——“调节层”的使用，通过毛玻璃的应用大家应该可以举一反三出它的更多用法。
AE应用
- 1. 图层>新建>调节层 | layer>new>adjustment layer (注意该图层需要位于需要被模糊的图层与毛玻璃遮罩图层之间）
- 2. 选中调节层—效果>模糊与锐化>高斯模糊
- 3. 建立一个遮罩图层（遮罩形状大小调整为毛玻璃展现区域形状大小）
- 4. Ctrl C复制遮罩图层路径>Ctrl V粘贴到调整层
- 5. 按照需求调节遮罩图层的透明度属性即可看到毛玻璃效果咯
Skill Point 6：修剪路径（开放式）
UI动效中高频出现的路径描绘动效实现技能，从LOGO到图标都可以通过AI导入形状路径来完成路径描绘动效。这里只介绍比较实用的开放式修剪路径（即线条路径），封闭式修剪路径应用不多（即形状路径）。
AE应用
- 1. 形状图层>添加>修剪路径 | shape layer>add>Trim Paths
- 2. 设置结束、开始属性，完成路径动效
Skill Point 7：融合
图形的融合变换，有很多种做法，这里介绍效果最好的一种。
AE应用
- 1. 新建调节层—效果>快速模糊 | Effect>fast blur
效果>色阶 | Effect>levels
- 2. 参数调整
Skill Point 8：抖动
缓慢抖动是常在动态mockup中见到的效果，这里应用到“表达式”的使用，也是属于可以举一反三应用于多种地方的重要技能点。其中可以使用表达式的除了抖动效果，还有头尾相接的无限循环等。
AE应用
- 1. alt 需要抖动图层属性关键帧小秒表>在时间轴上出现的空间里写上wiggle(数值A，数值B)
- 2. 调整数值A（每秒震动次数）、B（运动范围像素值）达到自己想要的抖动效果（我一般用1,20达到一个缓动的效果）
Skill Point 9：水波纹
之前做手机清理类APP经常会涉及到的流量表达动效，虽然做起来不是很简单，但是效果非常好。这里应用的是“置换图”技能，大家同样可以使用“置换图”方法举一反三。
AE应用
- 1. 新建形状图层（命名为“波浪”）>效果>扭曲>置换图 | new shape layer>effect>distort>replacement map
- 2. 新建固态层>效果>无线电波 | new solid layer>effect>radio wave
- 3. 将2中的固态层合成预合成，命名为“置换图”（注意转移所有属性）
- 4. 将“置换图”预合成的开始点移到最左边—效果>快速模糊 | effect>fast blur
- 5. 点击”波浪“层的置换图属性，选择“置换图”预合成替换
- 6. 隐藏“置换图”预合成
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
大家今天走运了,我就把自己总结出来的学习UI设计的一些经验与大家一起分享吧。想做一个好的UI设计师除了应该具有一定的审美能力,还要了解整个产品的...
