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

boyanx5天前技术教程4

谢邀!

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

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

  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

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

标签: svg路径动画

相关文章

他们做了份H5简历,然后,HR就主动“勾搭”他们了!

春风送暖,万物复苏。在这Word简历海量投、纸质招聘到处飞的季节,有这么一群派友们,他们的电话已被HR打爆!“这么牛!”“这么做到的?”“求秘诀!”今天,小派来揭秘了:他们已经在用创意H5简历了,赶快...

手把手教你H5实现工厂游戏的CSS动画效果「实践」

作者:吴冠禧 WecTeam转发连接:https://mp.weixin.qq.com/s/u5GHsA0vHz8A_MmGslRw2g0 契机与背景今年Q1(2020年第一季度)参与了京喜事业部「京...

【HarmonyOS Next之旅】兼容JS的类Web开发(五) -> Svg

目录1 -> 基础知识1.1 -> 创建Svg组件1.2 -> 设置属性2 -> 绘制图形3 -> 绘制路径4 -> 绘制文本4.1 -> 文本4.2 -&g...

粒子Logo动画教程

本教程将引导你使用Blender的Geometry Nodes创建一个引人注目的粒子Logo动画。整个教程实现的基本原理如下:导入Logo:首先,将你的Logo(最好是SVG格式)导入Blender,...

用Python+NiceGUI开发端午节倒计时界面:含知识解析与代码实现

一、界面功能:动态龙舟特效:底部龙舟划过水面留下波纹轨迹(SVG+JS动画实现)计算倒计时:自动计算距离端午的天数,当天自动切换祝福语3D旋转标题:"端午安康"文字持续旋转跳动(CSS...

SVG交互图文|推送里的路径动画是怎么做到的?

线条自主移动变化构成画面,这种炫酷的路径动画特效,相信大家都见过。下面从业内首发SVG路径动画交互图文为案例,为大家分析一波。这是由「小编备用」于2019年5月交付于宝马的《你以为这只是一条线》从推文...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。