介绍
Ant Motion是从Ant Design中提取的动态语言。他不仅仅使用语言，他还是帮助开发人员在项目中更容易使用效果的React框架动态解决方案。提供单项、组合动画和全套解决方案。React标签使您能够以简单的配置完成所需的动画，从而快速实现各种组合的动画效果，从而提高工作效率。
官方主页和Github
Github:
官网：
官方动画
因为不能直接演出动画效果，所以会在简单的截图中介绍
联动效果鼠标有一定的联动效果。栅格布局，鼠标稍微经过时，周围的元素远离动画，适合用户头像或背景图形。
旋转卡 Carousel 3d卡的旋转效果。支付宝客户端上的小钱口袋产品的愿望卡菜单，手机上的刷卡收纳方式。(模糊效果会降低性能，不建议在移动端使用。）
下落效果因素从上到下下降的效果。支付宝客户端上的小钱袋产品的钱变化时金币下跌的效果。
Logo的集合和分布将logo的小动画显示为点分布和聚集。主页logo动画的实现代码提供了三种logo样式，您可以自己添加logo。
添加和删除表信息动画
plG5pqKgyZLM%3D&index=6" width="640" height="278"/>对表格里的信息进行操作后的一个动画效果，用过Antd的应该都知道。
- 列表动画
在页面里，当我们想对区块内容进行动画时，需要解决元素的先后顺序与基本动画的属性。
- 页面中的走马灯效果
- 列表交换位置
页面里的 List 拖动来重新排列顺序。
- 图片的详细切换
从图片缩略图到详细说明的一个过场效果。
以上都是官网的一些动画展示，像体验真实的效果可以直接到官网体验。
动效原则
动效价值：
- 增加体验舒适度： 让用户认知过程更为自然。
- 增加界面活力：第一时间吸引注意力，突出重点。
- 描述层级关系：体现元素之间的层级与空间关系。
- 提供反馈、明确意向：助力交互体验。
衡量动效意义：
衡量一个动效是否有意义，我们可以通过以下几个标准来考核：
- 一个动效的存在是否合理：是否带有明确的目的性，助力交互体验，没有多余的动效。
- 动效与性能：不能出现大幅度波动丢帧或者卡顿现象, 动效的体验须是流畅的，并且不影响产品的性能。
原则：
- 自然
- 高效
- 克制
详情参照官网详细的介绍
动效组件
官方提供了非常丰富的动效组件
- 1、单元素动画
- 基本动画效果
- 时间轴效果
- 变更动画参数
- 路径缓动
- 数值变化
- SVG 线性动画
- SVG 形变动画
- 曲线路径动画
- 曲线动画
- CSS样式动画
- 简单的例子
- 删除子级
- 开始的进场
- 进出场动画
- 文字动画
- 页面滚动动画
- Banner动画
这部分官网都提供了非常详细的代码以及Demo，感兴趣的可以看一看
同时提供了使用的API
官方模板
官网提供了非常丰富的动效模板
三大特征：
丰富的模板：
这些模板都可以在线预览和下载，像Antd的官网也是其中之一
丰富的模块：
- Navs
- Banners
- Contents
- Contacts
- Features
- Pricings
- Teams
- Footers
强大的在线编辑器
通过在线编辑器，完全可以自己设计出一个漂亮的首页
总结
Ant Motion的确是一个非常强大的工具，动画的解决方案不少，但是像阿里这么贴心的还真不多，不仅仅提供了非常丰富的模板，而且还提供了在线编辑器，不管是程序员还是设计师，无疑都能够通过它来实现非常丰富的动画交互体验，提升工作效率的前提下，还能给自己的产品升值加分！