交互设计师做好动画后，提交给开发的文档有哪些?

谢邀！

简单的说一下自己的看法。

首先从制作动画开始。目前制作动画的方式主要有：

1. Gif动画
2. 视频动画
3. Web动画，而Web动画又包括：CSS动画、JS动画（Canvas动画、原生JS动画API）、SVG动画等

对于Gif动画，一般情况下不建议使用，特别是在移动端上。具体原因这里就不阐述了，感兴趣的同学可以去深入的了解相关的知识。

-------------- 根据题主的问题，聊一下怎么给工程师使用-----------

先说Gif动画怎么转换成Web动画，目前Gif转Web动画主要的方式有：

• 通过CSS动画来模拟Gif动画，对于简单的Gif动画可以很轻松的还原出来，对于复杂的Gif动画，还是需要一定的时间和开发成本。还原出来的动画也和原Gif动画略有差距。目前主要采用的是Sprites 帧动画。比如15年在手淘上的一个揭幕动画：手淘年货节舞龙揭幕动画实战_Animation, Web动画, mobile 教程_w3cplus（动画效果可以点击这里：https://www.w3cplus.com/sites/default/files/blogs/2016/1601/dragon2.gif）
• 通过JS来处理Gif动画，在Canvas中转画Gif动画，相对而言较主轻松，在网上这方面的技术也非常的成熟，方案也较多。

对于设计师需要提供到工程师的主要是：Gif动画原图（或者是视频），对应的原始素材设计稿，比如PSD文件，或者Sketch文件，AI文件等。对于还原度，那就要看工程师的功底了。当然也还有一些硬件的要求，如果你的Gif动画帧数非常的多，那还原出来的动画，所耗的性能也非常的大，这是工程师需要处理的。说回还原度，这就要设计师和工程师一起去平衡。

接着说一下视频动画。在很多动效中是没有任何交互的，比如说你的动画是用于某种氛围当中，而业务方又希望动画的效果比较好，对动画要求较高，这个时候完全可以制作一个视频。让这个视频允当于一个动效。最终将这个动效提供给工程师，让其当作一个视频嵌入到Web应用当中。这个时候设计师和工程师的合作模式就相对简单，前者处理视频效果，后者处理视频在 Web应用当中的一些事项。

当然，你也可以通过CSS和JS来还原视频中的效果，让他成为Web动效。这里暂且不说还原度之类的事情。这个时候两者合作的模式，其实和Gif转动画的模式一样。

最后说一下，AE这样的软件制作出来的动画，设计师怎么交互给工程师。目前AE制作出来的动画相对而言转成Web应用的动画，还原度是最高，工程师的再次开发成本是最底的。因为AE可以直接通过bodymovin这样的插件转换成一个类似data.json文件，那么工程师只需要借助一些渲染引擎，比如Lottie这样的引擎。除了Lottie之外，我们团队也有一款类似的引擎AFT。通过这样的引擎，读取data.json文件。可以直接将AE动画转换成Web应用动画。

通过这种方式来完成动画的开发，这个时候工程师和设计师还是有一些规范约束的。我们经过一段时间的合作，目前AE导出给bodymovin不能用的功能有：

1. 图层混合模式：滤色、正片垫底等混合模式均不能用
2. 视频：动画不能通过导入其它来源的视频来做
3. 遮罩（Mask）
4. 插件（只允许使用基于位移、尺寸变化、缩放、旋转、不透明度的插件）
5. 模糊功能：会很大影响性能

而建议使用的功能：

1. 位移
1. 普通位移
2. 根据SVG路径位移
2. 尺寸变化
1. 宽高变化
2. 形变
3. 缩放
4. 旋转
5. 不透明度

这些功能看上去和CSS中的Transform的特性有些类似。事实上是这样的。但你可以根据自己业务场景的需求，对一些特殊的动画功能进行二次开发。

对于AE制作动画，首要的是双方需要根据自己工作中的使用场景，对一些常用的功能做出相应的规范。另外设计师交互的AE稿子应该有AE原文件、素材源文件夹以及data.json文件。

这是个人的一些看法和经验。如果你对动画相关的话题感兴趣，可以阅读一下下面相关的话题：

• [转载]网页动画的十二原则_Animation, Web动画 教程_w3cplus
• 手淘年货节舞龙揭幕动画实战_Animation, Web动画, mobile 教程_w3cplus
• 【转载】Web动画性能指南_Animation, Web动画 教程_w3cplus
• 【转载】CSS 3D Panorama - 淘宝造物节技术剖析
• 手淘互动动效的探索_Animation, Web动画 教程_w3cplus
• 渐进式动画解决方案_Animation, Web动画 教程_w3cplus
• 更多动画教程：Web动画_入门 精通 教程_w3cplus

希望对你有所帮助，如有误人子弟之处，欢迎各路大婶拍正。