大家好，我是小六 今天给大家分享在可视化设计中，最常用的动效落地方案介绍，这一次是一个非常非常干的干货，手把手教你如何配合开发将动效在页面中展示出来。希望可以带给大家更多帮助！
大家在工作中多多少少都会有一些动效的需求，在动效落地过程中，动效方案的选择可能会影响页面性能、加载速度等。所以关于动效落地方案的选择就需要谨慎，还有如何跟前端更高效的沟通也是落地中必不可少的一环。
CSS3的语法是建立在CSS原先版本基础上的，本身CSS语言本身不支持动画，而CSS3动画能被浏览器 原生支持，并且可以通过硬件加速直接GPU渲染，在性能上也优化的比较好。
下面是动效落地中比较常用的一些前端参数：
更多参数：www.w3school.com.cn/cssref/index.asp
兼容性非常好，基本覆盖所有浏览器；代码体量非常小；性能可直接GPU渲染，基本不用卡了性能问题；因为可配置项非常多，所以交互性也非常好，可以说是目前比较理想的动效落地方案了。不支持粒子、光影特效等视觉感强的动画，仅普通的位移、缩放、旋转等常规属性的变换组合。BX-AE2CSS 是一个将 AE 动画导出为 图片 + CSS 动画代码的工具。它可以读取 AE 里图层的位移、旋转、缩放、透明度动画信息，以及做好标记的图层导出为精灵图动画，最后生成一个 HTML 文件来预览。导出的产物只有图片和 CSS + HTML 代码，没有 JS，没有第三方库，够纯粹吧。这样在完美还原动画的同时可以无缝插入 H5 页面，之后如果有小的修改（替换图片等）也十分方便简单。
更多详情可查看：zhuanlan.zhihu.com/p/57576659
生成的代码前端可直接使用，节省前端工作量；输出比较稳定，一些复杂的效果可以生成序列帧/精灵图完美还原。不支持矢量图形；暂不支持缓动函数，需要手动调节每一帧的参数，一秒30帧费时费力。在CSS3出现之前，CSS本身不支持动画，需要结合JavaScript来制作动画，原理是通过脚本语言的定时器一帧一帧的控制CSS属性，从而形成动画。常用的CSS属性：宽度（width）、高度（height）、外边距（margin）、内边距（pading）、左偏移（left）、右偏移（right）、文字颜色（color）、透明度（opacity）、字号（font-size）等兼容性强几乎所有浏览器都支持；文件体积小；占用电脑资源非常小；可任意控制交互。因为是通过avaScrip脚本定时器来控制动画，所以会有卡顿掉帧的情况。Canvas
Canvas 是 HTML5 新增的组件，一个可以用JavaScript绘制图像的 HTML 元素。用它可以绘制各种图表、也可以用来制作照片集或者制作的动画，甚至可以进行实时视频处理和渲染。1、制作web网页游戏（但是如果代码写的不咋的游戏可能会非常卡）2、数据可视化（echarts就是基于canvas）3、广告banner的动态效果非常适合用canvas制作兼容性强几乎所有浏览器都支持；文件体积小，都是代码实现；视觉效果可，支持动态粒子、三维场景渲染；前端可任意调节控制交互细节。所有效果都需要前端编写，实现成本较高，需要前端同学对这块精通掌握。WebGL
WebGL 是一种 3D 绘图标准，这种绘图技术标准把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过 HTML5 的 Canvas 来和 DOM 打交道，为HTML5 Canvas 提供硬件 3D 加速渲染。WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等。1、数据可视化，瓦片地图、一些三维建筑效果的底层逻辑基本都是webgl集成。三维效果展示目前可视化效果基本都是依托webgl嵌入浏览器来实现的；支撑粒子、流光等炫酷效果表现力非常好；交互可控任意调节。涉及三维渲染运算，对性能会有一定要求；落地成本较高，开发同学需要具备相关知识的储备。Three.js
Three.js 是一个用于在浏览器中绘制3D图形的JS库，其底层实际是对浏览器提供的 WebGL Api 进行了封装。
案例库：https://threejs.org/
以上简单普及了下前端的一些实现逻辑，不足之处多多指正，想深入了解的小伙伴可以自行百度研究。咱们的主要目的是让设计师可以轻松地描述动效，让开发可以准确地还原动效。动效的形式及对接方式
动效可以大致分为两种：纯展示型动效和可交互类动效。
纯展示型动效
不涉及数据接口的，纯展示类型的，比如loading、一些装饰性线条 主要起到衬托主题装饰类动效。
常见的一些对接格式：GIF、PNG序列、APNG、Lottie、SVGA、MP4 等等。详细的介绍输出和对接方式可看我之前写的文章《超全面的动效落地方案》
可交互类动效
也可分为两种类型：一是基于鼠标操作悬停、点击、划过触发的；第二种是基于数据接口返回数据不同的数据展示形式不同（常见的是一些可视化图表）。
因为可交互动效相对于纯展示类动效会复杂很多，不单单是输出一个动效文件就能搞定的。这里就需要设计师了解上面我写的一些前端参数的底层逻辑，做到可量化的输出。其实，界面动效背后涉及到的设计参数非常简单，只有三种。无论多复杂的动效也是这三种参数经过组合拼接出来的：变化
其实就是ae里面的位移、缩放、旋转、透明度这四个参数，基本涵盖了界面元素的全部运动方式。大家只要把对应的参数给到前端就可以百分百还原了 。
举个例子：
上面的小图标的运动参数如下图：
这样看就清晰多了，我们只需要把上面对应的参数给到开发就可以了。千万不要随便拿一个 demo 说就按照这样做个差不多的效果就可以了，开发只会一脸懵逼，还原度也会大打折扣。
时长
第二个关键参数就是时长，顾名思义就是动画播放的时间长度。做动效前我们需要把每一段变化的时间确定，时间短干脆利落，时间长轻缓柔和。在标注的时候，不要忘记标注清楚动效的起始时间和终止时间。曲线
在主流的动画设计中（After Effect、Origami、Principle、FramerJS），都可以通过调节运动曲线来达到不同的运动效果。
常见的曲线属性分为：线性（linear）、缓入（ease-in）、缓出（ease-out）、缓入缓出（ease-in-out）四种。
现在有许多工具可以方便设计师去调曲线、实时预览效果、并且显示成前端需要的格式这里推荐几个缓动参数在线调节的网站：
1、http://inloop.github.io/interpolator/
2、http://www.css3beziercurve.net/
3、https://cubic-bezier.com/#.75,0,.4,1.01
大家可以在线打开尝试下不同的效果 而且可以直接生成代码，直接给到开发即可。
在对接过程中、提供一份量化动效的标准，让设计师可以更加精准的描述这个动效，让开发可以百分百还原这个动效。一份完整可交付开发的动效标注文档应当包含：动效demo演示文件、动效标准说明 、以及动效标注参数 后两者就是给开发说清楚动效的整个的运动逻辑和交互事件，以及具体的参数说明。标注的时候要把该元素的动效三要素 ——变化 、时长、曲线 都分别标出来。图片内容自：zhuanlan.zhihu.com/p/34815524
最后
文中大概讲解了前端常用的 一些语言：CSS3动画、BX-AE2CSS、CSS2+JavaScript、Canvas、WebGL、Three.js它们的优劣势分析，以及后面动效标注参数及文档说明。希望能够助力小伙伴在动效落地过程中做到知己知彼，都能够完美落地。
欢迎大家关注小六公众号，发送『可视化资源』领取上百套可视化素材资源源文件 | 专注B端、可视化设计 相关案例实战经验分享丨案例教程丨设计交流丨开发落地经验丨手把手教你做可视化设计。
创作不易，喜欢文章的小伙伴还请一键三连
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
