在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键双击关键帧。
其他备注：如以上不能完整说明转场动效需加上备注加以说明。
