2016-03-31 14:17:09 +08:00
|
|
|
---
|
2017-12-22 17:49:38 +08:00
|
|
|
order: 5
|
2016-09-21 11:28:38 +08:00
|
|
|
title:
|
2017-03-17 18:56:37 +08:00
|
|
|
zh-CN: 动效
|
2016-09-21 11:28:38 +08:00
|
|
|
en-US: Motion
|
2016-03-31 14:17:09 +08:00
|
|
|
---
|
2017-12-26 23:20:28 +08:00
|
|
|
|
|
|
|
|
Ant Motion 是 Ant Design 中提炼出来的动效语言。他不仅仅是动效语言，同时也是一套 React 框架动效解决方案，可以帮助开发者，更容易的在项目中使用动效。 我们提供了单项，组合动画，以及整套解决方案。
|
|
|
|
|
|
2017-12-26 23:41:48 +08:00
|
|
|
你可以通过 React 标签，以简单的配置即可完成想要的动画，可以快速的实现不同组合的动画效果，更好的提高你的工作效率，[Github 反馈地址](https://github.com/ant-design/ant-motion/issues)
|
2017-12-26 23:20:28 +08:00
|
|
|
|
|
|
|
|
## 设计资源
|
|
|
|
|
|
|
|
|
|
Ant Motion 在界面里主要是来加强体验舒适度、描述层级关系、增加界面活力、反馈与意向等功能性的动效。并提供了完整的一套遵从 Ant Design 的视觉规范来完成的 demo 页面，可灵活又快速的配置出你想要的首页模板。
|
|
|
|
|
|
|
|
|
|
- [动效语言](https://motion.ant.design/language/basic)
|
|
|
|
|
- [首页的解决方案](https://motion.ant.design/edit/#t%3Dnav_0_0%2Ccontent_0_0%2Ccontent_2_0%2Ccontent_3_0%2Ccontent_4_0%2Cfooter_0_0)
|
|
|
|
|
|
|
|
|
|
## 前端实现
|
|
|
|
|
|
|
|
|
|
我们提供完善的动效语言 & 动效组件 & 动效模板，此外还提供了一整套首页的解决方案，来帮助用户快速设计出高质量的动效。资源在不断优化更新中，你的阅读和反馈正是我们不断前进的动力。
|
|
|
|
|
|
|
|
|
|
- [单元素动效执行组件](https://motion.ant.design/components/tween-one)
|
|
|
|
|
- [样式进出场组件](https://motion.ant.design/components/animate)
|
|
|
|
|
- [队列进出场组件](https://motion.ant.design/components/queue-anim)
|
|
|
|
|
- [随滚动执行效果组件](https://motion.ant.design/components/scroll-anim)
|
|
|
|
|
- [切换效果组件](https://motion.ant.design/components/banner-anim)
|
