可视化组件动效对接

从事可视化行业的工作也有一些时间了

日常的设计虽然有些想分享出来，但是受限于行业的保密性，就一直发不出来，这次部门内部想让我介绍下动效对接的工作流程，就顺带写一下个人对动效对接的一些看法。

特别看过站酷作者GNine的文章《那些动效Query》之后https://www.zcool.com.cn/work/ZNjE5NzMyODA=.html，感觉收到了很大的启发，哈哈，也感激大佬的指点，虽然他做的是移动端，但是实现的路上，大家殊途同归～～～

文章是用我用于分享的屁屁踢修改的，所以只能配合着文字和大家一起往下看了，大佬们见谅，哈哈

故事的开始是随着项目中的动效需求逐年递增，动效部分的承接也从我个人到了整个团队，在团队赋能后，工作中就会有很多问题汇聚到部门，设计、销售、开发等都会有很多问题，借此就向大家从个人角度系统的讲一下关于动效设计对接的一些经验

问题总结下来，就是三大块：

1、如何构思动效（PS：为什么别人的东西总是做的那么巧妙，他的动效和视觉设计是同一个完成的吧？为什么
契合度这么高。）

2、如何对接研发（PS：明明我做的demo，开发看着demo却做不出来，那些大厂中的动效设计工作流是什么
样的，他们是用了什么特别的工具么，难道是我们的开发水平问题？手动狗头）

3、如何学习动效（PS：我在哔哩哔哩上很难找到我们可视化行业的动效案例，用户的那些效果我也看到过，
可是我需要怎么做呢，有没有整理好的资源，再或者就是很常见的，总是觉得自己做的效果不是很好，却不
知道问题在哪儿）

下面就从我角度，和大家系统的说一下可视化项目中动效这个东西

我们将从做什么、怎么做、做完之后，三步来看

大概说的什么，大家看下屁屁踢，哈哈哈，感觉我打字有点啰嗦

下面我们来看下动效的构成，以一个常规的纯展示类可视化项目为例，我们需要做的动效如下图

接下来让我们从两个角度来看这些动效如何归类

设计师的角度，通常将动效分为装饰动画和交互动画。

将整体动画单独拿出来是因为这是画面中动态最大的部分，由主视觉+出入场构成。其次将装饰动效和交互动效拆解，如下图，这个拆解路径和我们平时作图的路径也差不多，大关系-模块内容-交互事件内容。

但是在开发的角度中，动效就会变得很基础，哈哈哈哈

一者是从触发方式分类：触发式动效、常态化动效，这个会关乎到他们如何调用动画

另一者是从动画构成方式（我自己编的）：就是将动画都分为入场、循环、出场三部分。如果没有循环就只有出入场，要始终秉承用户看到的永远是一段完整的动效，即有开始，也有结束。

怎么做，这边分为两步

一是确保交付，将交付写在前面是因为，商业项目中，完成先于完美，确保需求有效落地才是第一要务

如何兼顾动画品质、开发性能以及项目成本，需要选择出最合理的开发方式，这里参考《那些动效query》文章中的拆解思路即可

动效制作完毕之后，将动画拆解为代码实现和切片实现的部分，并组合使用，可以最大限度的节约包的大小，照顾到性能，也可以通过动效切片兼顾到动效品质，达到交付成功

交付流程简单的分为三步：视频软件制作-输出文档-前端开发

输出文档分为三部分：视频demo、动效文档、动效切片，如下图

emmmm，我努力了，我的视频文件好像传不上去。。。。。。。可能是文章板块的一点问题

动效文档和动效切片，我选择在同一张讲，因为切片/动效切片都需要配合动效文档使用，少数情况下会单一出现切片/动效切片

说完了交付内容，大家最关心的交付格式来了

按照现有常规情况将之分为三种格式：图片格式、json格式、视频格式

具体信息看图，看图，看图

总结下来就是 ，小东西用webp，大东西用webm，用过了都说爽，只是说webm是视频格式，没办法像图片一样直接引入，但是无上大雅，在一个大家做的时候要多注意热区的事情，虽然你给的是透明格式文件，他还是会按照一个正方形去占位热区哦，所以输出切片的时候，也尽量保持最优尺寸。既可以降低切片尺寸，也可以缩小文件大小。

设计质量这个，大家看看就好，因为之前我在公司内部已经较为详细的分享过动效设计的案例，所以此处我没有详细的去写

请大家原谅

但是流程就是这几步流程，无论是哪个端的动效应该都可以使用，殊途同归

复盘这件事，虽然很烦，工作很忙，但是其实是工作中对自己提升最大的部分

工作中紧张的节奏和混乱的思绪，通常会让我们时刻以交付为目的在拼命赶工期，似乎就是为了用户的一句ok而活

但是对个人而言，复盘才是对自身成果的进一步巩固和升华，详细内容看图，手码酸了，哈哈哈哈

再一个就是动态审美，我是非动画专业人士哈，这块没什么评判标准

这是我影视行业的朋友给我推荐的，就是下图的内容了