交互设计师做好动画后,提交给开发的文档有哪些?
谢邀!
简单的说一下自己的看法。
首先从制作动画开始。目前制作动画的方式主要有:
- Gif动画
- 视频动画
- 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不能用的功能有:
- 图层混合模式:滤色、正片垫底等混合模式均不能用
- 视频:动画不能通过导入其它来源的视频来做
- 遮罩(Mask)
- 插件(只允许使用基于位移、尺寸变化、缩放、旋转、不透明度的插件)
- 模糊功能:会很大影响性能
而建议使用的功能:
- 位移
- 普通位移
- 根据SVG路径位移
- 尺寸变化
- 宽高变化
- 形变
- 缩放
- 旋转
- 不透明度
这些功能看上去和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
希望对你有所帮助,如有误人子弟之处,欢迎各路大婶拍正。