在国内类似BAT大型富有些网络公司内都培养着独立的动效设计师（Motion Designer）。他们的主要职责就是透过动态的表达让一个设计定义活起来。他们非常在行把一个设计定义组织成一个好的故事线，搭配合适的音乐跟音效，让看的人可以更容易理解设计定义的整体性。好的动效设计师一般都有优良的视觉设计技能。有的小公司是让视觉设计师兼任做动效。当需要量大的时候，就能需要一个专职的 motion designer。假如一个UI设计师假如动效做得好，那他的身价一般可以相对提升了。然而对于绝大部分it公司来讲，动效设计商品化还未成熟，在落地过程中总是会遇见对接困难、设计困难及达成困难。本文将会简单讲解动效设计在国内的行情就业前景与好的便捷的达成办法。
交互设计师及就业前景
-
动效设计（Motion Design）是由于整个客户体验行业的进步而细分出来的设计门类。所以总体来讲，
1、客户体验进步程度越高的区域，动效设计需要也越多（欧美 > 国内）；
2、越庞大复杂的商品，动效设计需要也越多（PC > Mobile，OS > App）；
3、越大型分工越明确的的设计团队，专职的动效设计师越多（巨头 > 创业公司，Design House除外）；
现在不论国内还是海外，不少设计团队都配有专职的动效设计师，譬如国内的BAT，海外的谷歌、Apple、Microsoft等等，由于业务需要，并且他们有钱，养得起。而一些创业公司，手头紧或者需要少，自然期望一个人能当N个人用，设计师可以兼顾动效、交互，能顺便写个PRD就更好了...
专业上，动效设计在软件操作上的困难程度要大于视觉设计，需要付出不少时间去学习，无形中阻挡了一部分人。所以从效率上讲，专职动效设计师和专职视觉设计师一块配合的效率，一定高于动效、视觉兼顾的设计师自己一个人搞。这也是为何那些财大方粗的公司选择聘请专职设计师是什么原因。但，从水平上讲，一个动效、视觉能力俱佳的设计师创造出出色作品的概率，一定大于两个各自为战的专职动效设计师和视觉设计师，特别是他们对他们的范围没什么深入知道的状况下
Tips:
假如题主想找个UI设计的工作，现在看动效不是应具备的，是加分项。假如题主想成为行业的引领者，做出为人称道的设计，那就义无反顾的去学吧
动效设计目前情况
-
动效落地过程中面临的困难可以分成以下三种动效设计师前景及最好落地办法对接困难事实上就是交流困难，这也是本文要探讨的重点。由于界面动效是一种新出现的设计模式，在开发和设计之间，还没一套成熟的对接标准。
设计困难动效设计师前景及最好落地办法界面增加了时间维度，研发不只需要布局，同样要把控每个元素在时间流上的表现，个别状况下用序列帧或者 Gif 的话，又需要严格控制资源大小，在各方面增加了开发的本钱。
动效设计好落地办法
-
1、对接
开发和设计师交流困难，是由于没通过精准的参数去描述动效。要解决这个问题，大家需要创造一套有效的动效标注系统，这个系统需要做到以下两点动效设计师前景及最好落地办法
1. 动效量化
其实，界面动效背后涉及到的设计参数很简单，只有三种。无论多复杂的动效也是这三种参数经过组合拼接出来的动效设计师前景及最好落地办法
那样这时大家需要记录的状况（这里只涉及到变化）就应该是如此动效设计师前景及最好落地办法
位移动效设计师前景及最好落地办法0度
尺寸动效设计师前景及最好落地办法0.2
结束状况动效设计师前景及最好落地办法X轴 200px
旋转动效设计师前景及最好落地办法1.5
透明度动效设计师前景及最好落地办法
虽然大伙平常多少都用过以上几种曲线来描述动画的过程，但大伙不肯定对曲线的具体使用方法有真的的理解、下面我会给出四个例子，来讲解一下以上几种曲线的使用方法。
在上图的例子中小圆运动时长一致，它们水平位移，一块到达终点，但速度曲线不同。
圆1、缓出 ease-out，本来有肯定的速度，慢慢刹车。 合适用在一个元素进入页面的时候。
圆2、缓入 ease-in，本来没速度，愈加快， 等于一个东西从零开始加速。合适用在一个元素离开页面的时候。
圆3、缓入缓出 ease-in-out，开头结尾都没速度，先加速、再减速，是大家日常最容易见到的物理运动。合适用在一个元素从页面 A 点到 B 点。
圆4、做匀速运动 linear ，看着很死板，不推荐用。
那样动画曲线在设计工具的哪儿出现呢？
AE 中可以通过值图表，来调整动画的曲线，并且通过换算（换算办法）得到可用于开发的 cubic-bezier 曲线参数，或者通过 Flow 如此的插件直接用 cubic-bezier 曲线进行设计。
而在新兴设计工具（framer）中，本身工具就直接可以用 cubic-bezier 曲线概念动画。
在前端开发中，可以直接借助设计给出的 cubic-bezier 曲线参数来描述动画，示比如下动效设计师前景及最好落地办法
cubic-bezier.com
css3beziercurve.net/
曲线部分就如此讲完了，顺带提一下，虽然在这里我举例的是位移的速度曲线，但其实旋转、尺寸、透明度等等变化同样是存在速度曲线的，在这类变化上加上速度曲线一样可以让动效愈加自然贴近真实。前端也是可以达成的。
2. 标注
通过以上对动效参数的量化，我觉得一份合格的标注应该是如此的动效设计师前景及最好落地办法
如图，注意曲线要标注好英文名字如此前端才能拿去用。
这份标注的模板我也上传到云盘上，链接动效设计师前景及最好落地办法不可以交互、产出物不好量化、难推荐。而现在也出现了不少新兴的设计，产出解决方法，下面我会做一些简单的介绍。
1. 自动导出类
现在，有像 Lottie、Keyframes 等开源库，通过 AE 插件，将在 AE 中设计的动效自动导出为前端可用的动效文件，前端仅需在项目中打入对应的开源库，就能免去对接交流的烦恼。
虽然看起来十分简洁美好，但这种策略的应用场景是有限的，仅合适应用在纯动效元素（比如动态 ICON），没办法用于 UI 的界面元素。对 AE 的成效支持也有限，并非有了库就能任性妄为。
但总的来讲，自动导出类策略可以在纯动态元素的场景下大大提高工作效率，商品性能。相比 Gif 或者帧序列，导出的 json 文件容量小，在端上显示水平高。
2. 可交互类
除去依靠于 AE 传统工具的解决方法，也有更多直接另起炉灶的设计工具。现在应用较广的包含 Principle、Flinto、framer、Origami 等等。相比传统工具，这类新的工具无一例外加入了可交互的特质，让大家可以对商品的交互流进行设计和模拟。比起之前，大家可以在设计阶段就感受商品的「手感」，让动效设计的精度到达一个新的水平。
在这类雨后春笋般冒出的新工具中，我最喜欢的就是 framer。它有着其他工具没的独特属性――用代码构建、基于 Web。
△ 用 framer 写的代码示例
可能不少设计师看到代码就如临大敌，但事实上，由于用代码构建，设计师们可以十分有条理、明确地设计拥有复杂逻辑的动效界面，同时，动画部分的代码内容可以直接给开发参考。另外由于基于 Web 的特质，所有 Web 支持的成效，framer 都可以做到，自由度极高，而且设计产出可以通过一个网址迅速推荐，让整条商品线上的人都可以低本钱体验你的动效设计。
此外，在「全栈」定义愈加被看重的今天，设计师通过一个相对低本钱的方法接触代码，知道前端常识，是一个特别高效的提高通道。
3、开发
动画的达成、常见的有以下几种。
1. CSS 动画
学习材料推荐 w3school 上的文档 CSS3 动画
值得注意的是、设计师虽然能不懂技术、但必须要擅长借助已有些案例来表达我们的设计意图。CSS 可以达成的动画案例具体可以查询 Animate.css ，它一个跨浏览器的 CSS3 动画库。假如它的示例中有你想要的动效的话，代表可以用 CSS 达成，此外，一些简单的矢量规则动效也可以通过 CSS 达成。
2. 开源库
应用从设计侧提到过的 Lottie、Keyframe 类开源库，将 AE 导出的动画资源直接在项目中应用。
上篇中提到的 San 首页的 hover 动画就是用 Lottie 达成的动效设计师前景及最好落地办法
它其实是用一张张的烟花图拼接起来的雪碧图动效设计师前景及最好落地办法
加载时间动效设计师前景及最好落地办法手机端非 wifi 互联网下，动画资源限制总大小低于 2M。
一般用户感知流畅帧率为 60fps，为了保证最后成效，一般以 20fps 做为最低播放帧率。（1S播放30帧 ）
当然，为了降低交流中非必须的损耗，在提供序列帧拼图的时候，应该注意以下出货格式动效设计师前景及最好落地办法页面加载结束时，某按钮点击时
补充一个制作序列帧的工具 gka 动效设计师前景及最好落地办法
标注模板的下载地址动效设计师前景及最好落地办法Lottie、Keyframes 等开源库，通过 AE 插件，将在 AE 中设计的动效自动导出为前端可用的动效文件，前端仅需在项目中打入对应的开源库，就能免去对接交流的烦恼。
可交互类 framer 上手资料动效设计师前景及最好落地办法framer（framerjs.com）怎么样基础知识？
3. 开发困难――开源库
Animate.css
airbnb/lottie-web
目前标题动效设计师前景及最好落地办法
