介绍
Ant Motion 是 Ant Design 中提炼出来的动效语言。他不仅仅是动效语言,同时也是一套 React 框架动效解决方案,可以帮助开发者,更容易的在项目中使用动效。 同时也提供了单项,组合动画,以及整套解决方案。过 React 标签,以简单的配置即可完成想要的动画,可以快速的实现不同组合的动画效果,更好的提高你的工作效率。
![dd9c205b548f318fba00adc24d8575fd.png](https://i-blog.csdnimg.cn/blog_migrate/4505e0e056f87324ce7e87fe22d270e3.jpeg)
官网和Github
Github:
https://github.com/ant-design/ant-motion/
官网:
http://motion.ant.design/index-cn
![6411d56a0b62d945faec9a898d551273.png](https://i-blog.csdnimg.cn/blog_migrate/1cc88f065618d2f7d737c37c4dffe47c.jpeg)
官方的动画展示
http://motion.ant.design/exhibition/demo/linked-animate-cn
由于无法直接展示动画效果,所以就只是简单的截图加介绍
- 联动效果
![8c048e12c89787a490062cfc37e92aeb.png](https://i-blog.csdnimg.cn/blog_migrate/03e76d6abda59f456e23d572734a0da4.jpeg)
鼠标经过一点的联动效果。栅格布局,鼠标经过一点时,周围元素执行远离动画,适用于用户头像或背景图形。
- 卡片旋转
![a2f26c88b1c16cdc6b17f36231ae5fd5.png](https://i-blog.csdnimg.cn/blog_migrate/873a8393101bc8c3e3edf0ca79585f7e.jpeg)
Carousel 3d 卡片的旋转效果。支付宝客户端里的小钱袋产品的心愿卡片菜单,手机上的一种卡片的收纳方式。(其模糊效果比较耗性能,不建议在移动端使用)
- 掉落效果
![38407e152fe54e3eab8f0f9817ab38b3.png](https://i-blog.csdnimg.cn/blog_migrate/b4234592000a3529ccfcfa56c01272e3.jpeg)
元素从上往下掉落的一个效果。支付宝客户端里的小钱袋产品的金钱发生变化时的金币掉落效果。
- Logo的聚集和散开
![f1f921c4bd166c9d006ac3e6db919bd7.png](https://i-blog.csdnimg.cn/blog_migrate/a788e603b6d441b6892d85b4f15b2828.jpeg)
以圆点散开与聚集来展示 logo 的一个小动画。首页 logo 动画的实现代码, 提供三个logo的样式, 还可自已添加 logo。
- 表格信息增删动画
![d25e2976562867f769d1e67552ef6e69.png](https://i-blog.csdnimg.cn/blog_migrate/a83c4ca9fca849760f360b453795bad8.jpeg)
对表格里的信息进行操作后的一个动画效果,用过Antd的应该都知道。
- 列表动画
![c1130879a8b397a22421aecf2413a035.png](https://i-blog.csdnimg.cn/blog_migrate/639e11826c9392af4a4a32752acd2263.jpeg)
在页面里,当我们想对区块内容进行动画时,需要解决元素的先后顺序与基本动画的属性。
- 页面中的走马灯效果
![36febf4b4475fca14720fb8bcd7416aa.png](https://i-blog.csdnimg.cn/blog_migrate/8f1c5cfd89575aa9b7274c4156fdb629.jpeg)
- 列表交换位置
![9f17a24e50c72f52bb6cef0c1e6c8572.png](https://i-blog.csdnimg.cn/blog_migrate/ab3223b5f114c7b49138614e7708008a.jpeg)
页面里的 List 拖动来重新排列顺序。
- 图片的详细切换
![33f7e547e5654aa36cd88d2b863cc964.png](https://i-blog.csdnimg.cn/blog_migrate/ddf5116231dcdb2ac50ac7b5d0aa54cb.jpeg)
从图片缩略图到详细说明的一个过场效果。
以上都是官网的一些动画展示,像体验真实的效果可以直接到官网体验。
动效原则
动效价值:
- 增加体验舒适度: 让用户认知过程更为自然。
- 增加界面活力:第一时间吸引注意力,突出重点。
- 描述层级关系:体现元素之间的层级与空间关系。
- 提供反馈、明确意向:助力交互体验。
衡量动效意义:
衡量一个动效是否有意义,我们可以通过以下几个标准来考核:
- 一个动效的存在是否合理:是否带有明确的目的性,助力交互体验,没有多余的动效。
- 动效与性能:不能出现大幅度波动丢帧或者卡顿现象, 动效的体验须是流畅的,并且不影响产品的性能。
原则:
- 自然
- 高效
- 克制
![b45d237675876425512a1b97401b3323.png](https://i-blog.csdnimg.cn/blog_migrate/a5f32d8111b4e0d770cd1a0cbfc5e70d.jpeg)
详情参照官网详细的介绍
动效组件
官方提供了非常丰富的动效组件
- 1、单元素动画
- 基本动画效果
- 时间轴效果
- 变更动画参数
- 路径缓动
- 数值变化
- SVG 线性动画
- SVG 形变动画
- 曲线路径动画
- 曲线动画
- CSS样式动画
- 简单的例子
- 删除子级
- 开始的进场
- 进出场动画
- 文字动画
- 页面滚动动画
- Banner动画
这部分官网都提供了非常详细的代码以及Demo,感兴趣的可以看一看
![65b820831e3027560e71bc7b0e77b3b6.png](https://i-blog.csdnimg.cn/blog_migrate/6b3b90fd02ba97df158f7f256d7c2c93.jpeg)
同时提供了使用的API
![b8985a81b5c19a1ebf706fe1b3aa073e.png](https://i-blog.csdnimg.cn/blog_migrate/4545ed7f774c3af18c55bcf352b0477b.jpeg)
官方模板
官网提供了非常丰富的动效模板
三大特征:
![c856a407973aaf6eef0d5e0c0590b4ca.png](https://i-blog.csdnimg.cn/blog_migrate/cae7607552310b2545d11838d5877b27.jpeg)
![dcb9bd60b1e48f092af54263e6bec7c3.png](https://i-blog.csdnimg.cn/blog_migrate/34b6e5bd9b91ed06cd6225532d93e205.jpeg)
丰富的模板:
这些模板都可以在线预览和下载,像Antd的官网也是其中之一
![b80a6ec7123f2ab67824e489e06cc972.png](https://i-blog.csdnimg.cn/blog_migrate/68fa72724a67a16f2fa88acd94bdf5c8.jpeg)
![181dd30f1c669dedc8c253168fb6d174.png](https://i-blog.csdnimg.cn/blog_migrate/53244d37a463a81adb87e79c5cbf1dc3.jpeg)
丰富的模块:
- Navs
![f339c011054e4e6668e48e2b2a008bfd.png](https://i-blog.csdnimg.cn/blog_migrate/6acf099769ffc9ad0ead06c6f3130678.jpeg)
- Banners
![31f3855c8fddd0a2bbb9e09522b45738.png](https://i-blog.csdnimg.cn/blog_migrate/1f96ccf84ffe30de95d041f04e79691d.jpeg)
- Contents
![6b6c0d64f79f1bd46526e2cf5b2adcce.png](https://i-blog.csdnimg.cn/blog_migrate/4cbc5c39bc8a8f84967dbea6e111d6dd.jpeg)
- Contacts
![36b3fbf67950e313299615b82fe480e3.png](https://i-blog.csdnimg.cn/blog_migrate/815e1dc53eae4024a7ab7b7b7e99ea9e.jpeg)
- Features
![020864c92724857cf68bb684d5a4b49a.png](https://i-blog.csdnimg.cn/blog_migrate/818897ef6729d6536d1781f294d90759.jpeg)
- Pricings
![206d7021fc8bc13b4527c684a1c5694b.png](https://i-blog.csdnimg.cn/blog_migrate/ae1beb12999ccb44787a7a76d2dbe864.jpeg)
- Teams
![732593d61ab93eec4ec17e264da239d6.png](https://i-blog.csdnimg.cn/blog_migrate/528ed7b089e3bedf42666c37f176212f.jpeg)
- Footers
![d48d134a3beb2553ad31cf4e339e437a.png](https://i-blog.csdnimg.cn/blog_migrate/b2a7310ba452823e11cbc2020a0974dc.jpeg)
强大的在线编辑器
通过在线编辑器,完全可以自己设计出一个漂亮的首页
![34c273046a11bfb4dbd01216ee1bbdf4.png](https://i-blog.csdnimg.cn/blog_migrate/bd3e84449b651bbc42015d660341259c.jpeg)
总结
Ant Motion的确是一个非常强大的工具,动画的解决方案不少,但是像阿里这么贴心的还真不多,不仅仅提供了非常丰富的模板,而且还提供了在线编辑器,不管是程序员还是设计师,无疑都能够通过它来实现非常丰富的动画交互体验,提升工作效率的前提下,还能给自己的产品升值加分!