专栏名称: OSC开源社区
OSChina 开源中国 官方微信账号
目录
相关文章推荐
51好读  ›  专栏  ›  OSC开源社区

Ant Motion —— 蚂蚁金服动效语言& 动效解决方案 | 软件推介

OSC开源社区  · 公众号  · 程序员  · 2017-07-17 08:31

正文

长按上图识别二维码报名济南源创会

Ant Motion

授权协议: MIT

开发语言: JavaScript

操作系统: 跨平台

开发厂商: 阿里巴巴


简介


Ant Motion 是从蚂蚁金服的 Ant Design 中提炼出来的动效语言。它不仅仅是动效语言,同时也是一套 React 框架动效解决方案,提供了单项,组合动画,以及整套解决方案,帮助开发者更容易的在项目中使用动效。


Ant Motion 能做什么 ?


通过 React 标签,以简单的配置即可完成想要的动画,可以快速的实现不同组合的动画效果,更好的提高你的工作效率。


动效 Demo


列表的增删间的动画( http://motion.ant.design/exhibition/demo/list-anim

详细说明的切换动效( http://motion.ant.design/exhibition/demo/detail-switch

列表交换位置的动效( http://motion.ant.design/exhibition/demo/list-sort

图片详细缩略间的切换动效( http://motion.ant.design/exhibition/demo/pic-details-anim


动效语言


Ant Motion 在界面里主要是来加强体验舒适度、描述层级关系、增加界面活力、反馈与意向等功能性的动效。 详情查看 http://motion.ant.design/language/basic。


动效组件


rc-tween-one 单元素动效执行组件

这是个对单个元素标签做动效的组件,可以执行所有样式动画,包括 transform3d,模糊等效果,还可以完成贝塞尔曲线动画,具体参数请参见 API

rc-animate 样式进出场组件

对单个元素根据状态进行动画显示隐藏,需结合 css 或其它第三方动画类一起使用;具体参数请参见 API







请到「今天看啥」查看全文