介绍

Ant Motion 是 Ant Design 中提炼出来的动效语言。他不仅仅是动效语言，同时也是一套 React 框架动效解决方案，可以帮助开发者，更容易的在项目中使用动效。 同时也提供了单项，组合动画，以及整套解决方案。过 React 标签，以简单的配置即可完成想要的动画，可以快速的实现不同组合的动画效果，更好的提高你的工作效率。

---

---

官网和Github

Github：

https://github.com/ant-design/ant-motion/

官网：

http://motion.ant.design/index-cn

---

---

官方的动画展示

http://motion.ant.design/exhibition/demo/linked-animate-cn

---

由于无法直接展示动画效果，所以就只是简单的截图加介绍

---

• 联动效果

---

---

鼠标经过一点的联动效果。栅格布局，鼠标经过一点时，周围元素执行远离动画，适用于用户头像或背景图形。

• 卡片旋转

---

---

Carousel 3d 卡片的旋转效果。支付宝客户端里的小钱袋产品的心愿卡片菜单，手机上的一种卡片的收纳方式。（其模糊效果比较耗性能，不建议在移动端使用）

• 掉落效果

---

---

元素从上往下掉落的一个效果。支付宝客户端里的小钱袋产品的金钱发生变化时的金币掉落效果。

• Logo的聚集和散开

---

---

以圆点散开与聚集来展示 logo 的一个小动画。首页 logo 动画的实现代码, 提供三个logo的样式， 还可自已添加 logo。

• 表格信息增删动画

---

---

对表格里的信息进行操作后的一个动画效果，用过Antd的应该都知道。

• 列表动画

---

---

在页面里，当我们想对区块内容进行动画时，需要解决元素的先后顺序与基本动画的属性。

• 页面中的走马灯效果

---

---

• 列表交换位置

---

---

页面里的 List 拖动来重新排列顺序。

• 图片的详细切换

---

---

从图片缩略图到详细说明的一个过场效果。

---

以上都是官网的一些动画展示，像体验真实的效果可以直接到官网体验。

动效原则

动效价值：

• 增加体验舒适度： 让用户认知过程更为自然。
• 增加界面活力：第一时间吸引注意力，突出重点。
• 描述层级关系：体现元素之间的层级与空间关系。
• 提供反馈、明确意向：助力交互体验。

衡量动效意义：

衡量一个动效是否有意义，我们可以通过以下几个标准来考核：

• 一个动效的存在是否合理：是否带有明确的目的性，助力交互体验，没有多余的动效。
• 动效与性能：不能出现大幅度波动丢帧或者卡顿现象, 动效的体验须是流畅的，并且不影响产品的性能。

原则：

• 自然
• 高效
• 克制

---

---

详情参照官网详细的介绍

动效组件

官方提供了非常丰富的动效组件

• 1、单元素动画

1. 基本动画效果
2. 时间轴效果
3. 变更动画参数
4. 路径缓动
5. 数值变化
6. SVG 线性动画
7. SVG 形变动画
8. 曲线路径动画
9. 曲线动画

• CSS样式动画

1. 简单的例子
2. 删除子级
3. 开始的进场

• 进出场动画
• 文字动画
• 页面滚动动画
• Banner动画

---

这部分官网都提供了非常详细的代码以及Demo，感兴趣的可以看一看

---

---

同时提供了使用的API

---

---

官方模板

官网提供了非常丰富的动效模板

三大特征：

---

---

丰富的模板：

这些模板都可以在线预览和下载，像Antd的官网也是其中之一

---

---

---

丰富的模块：

• Navs

---

---

• Banners

---

---

• Contents

---

---

• Contacts

---

---

• Features

---

---

• Pricings

---

---

• Teams

---

---

• Footers

---

---

强大的在线编辑器

通过在线编辑器，完全可以自己设计出一个漂亮的首页

---

---

总结

Ant Motion的确是一个非常强大的工具，动画的解决方案不少，但是像阿里这么贴心的还真不多，不仅仅提供了非常丰富的模板，而且还提供了在线编辑器，不管是程序员还是设计师，无疑都能够通过它来实现非常丰富的动画交互体验，提升工作效率的前提下，还能给自己的产品升值加分！