UI动效精准落地与交付 | 生产环境中的动效落地

在UI设计中动效分为以下几种

一、矢量图形动效  二、情感化设计  三、特效  四、交互转场

矢量动图 路径动画

矢量动画第一种与开发交接方案：SVG导出

SVG格式特点：任意缩放 文本独立 较小文件 超强显示效果 超级颜色控制 交互X和智能化

SVG动画属性 

CSS属性：fill和strke,fill相当于background-color,而storke也就相当于border-color。

Gradien渐变属性：包含stoplor、stop0pacity、affset，用他们你可以构造出任何你想要的渐变效果。

Dimensional纬度：纬度尺寸空间属性描述了SVG元素的位置尺寸，这些属性和svg的形状元素有些轻微不同。

Storke描边：特殊的svg的样式属性可以创造自己的笔画storke,还可以动画笔画。用例包括书写效果和逐渐显露等。

SVG格式导出注意事项

少图层 合并路径 尽可能避免图层样式（一定不要有图层样式）

以上是矢量动画落地与开发交接的第一中方案

第二中交接方案：用插件lottie/bodymovin导出js

https://www.lottiefiles.com/可以在线预览js动画

bodymovin插件下载：https://pan.baidu.com/s/1lUAtzhaUMnvEjF70dv9KLw

情感化设计

常见的情感化设计：加载动画 空页面 引导页

通常有两种交接方案：序列帧导出和GIF格式导出

但是GIF格式是存在很多缺陷的不能记录半透明，导致图片显示效果不好。所以有非常多大厂有自己的动图格式。

GIF优化的一些方法：优先用PS导出，AE也有插件可以直接导出GIFGUN（从名字就看可以看出对GIF图的意见）

特效

这类动画的特点就是复杂性比较高，通常将此类动画放在服务器，需要的适合在加载。

导出方案：雪碧图

---

动效标注

在交互转场动画无法用直接导出方式交接，所以就需要对转场动画进行标注。

交互转场标注要素

触发事件：注明动效（转场）产生的条件是什么，如：点击。

变化元素：从触发事件到结束有那些元素在运动需要标注出来。

运动属性：需注明元素的运动属性，如位置、旋转、透明度变化。

运动时间：把运动时间换算成毫秒进行计算标注。

变化值：需要有元素起点值和元素结束点值，如缩放百分比，位移标注单位为PX。

运动规律：缓动曲线。

运动曲线标注方法：用flow插件读出数值，flow的动效库与开发的动效库一样所以尽量用默认曲线。

方法二：公式计算，按住alt键双击关键帧。

其他备注：如以上不能完整说明转场动效需加上备注加以说明。