DevOps研发效能
媒体矩阵
开源中国APP
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织 阿里巴巴
地区 国产
投 递 者 王练
适用人群 未知
收录时间 2017-07-12

软件简介

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

Ant Motion 能做什么 ?

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

动效 Demo

列表的增删间的动画;

详细说明的切换动效;

列表交换位置的动效;

图片详细缩略间的切换动效;

>> 查看更多;

动效语言

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

动效组件

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

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

rc-animate 样式进出场组件

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

rc-queue-anim 队列进出场组件

通过简单的配置对一组元素添加串行的进场动画效果。具体参数请参见 API

rc-scroll-anim 随滚动执行效果组件

通过简单的配置,对页面里的元素添加随滚动条滚动的动画。具体参数请参见 API

rc-banner-anim banner 切换效果组件

通过简单的配置, 就能让你的 banner 动起来。 具体参数请参见 API

首页的解决方案

这是以 Ant Motion 的 React 组件遵从 Ant Design 的视觉规范来完成的 demo 页面,可灵活又快速的配置出你想要的首页模板。

主要提供了单元素示例与配置完后的整页示例。

生成首页在 dva-cli 里运行的例子

>> 查看详细;

Develop

安装

npm install

启动:

npm start

访问 http://127.0.0.1:8111 。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(2) 发布并加入讨论🔥
发表了资讯
2019/02/22 07:40

Ant Motion 1.7.0 发布,React 框架动效解决方案

Ant Motion 1.7.0 发布了,Ant Motion 是从蚂蚁金服的 Ant Design 中提炼出来的动效语言。它不仅仅是动效语言,同时也是一套 React 框架动效解决方案,提供了单项,组合动画,以及整套解决方案,帮助开发者更容易的在项目中使用动效。 更新内容: 删除编缉系统,motion 的模板系统已下线,请移步至 landing.ant.design。 升级脚手架(bisheng)。 增加国际化,新增英文版本,目前文档还没有翻译完成,如果你有意愿 PR,请先查看 ...

0
5
发表了资讯
2018/10/02 07:31

蚂蚁金服动效语言 Ant Motion 1.6.2,更新动效原则

Ant Motion 是从蚂蚁金服的 Ant Design 中提炼出来的动效语言。它不仅仅是动效语言,同时也是一套 React 框架动效解决方案,提供了单项,组合动画,以及整套解决方案,帮助开发者更容易的在项目中使用动效。 Ant Motion v1.6.2 更新如下: 原则 以自然、高效、克制三大原则为主体。 速度 以时间与缓动来详细讲解速度的理念。 空间 将现实空制与动效的结合。 组合 基本的元素组合与多个元素组合的动效。 过渡 页面里视图发生变化...

0
5
发表了资讯
2018/07/14 07:26

动效语言 Ant Motion v1.6.1 发布,新增动效组件

Ant Motion 是从蚂蚁金服的 Ant Design 中提炼出来的动效语言。它不仅仅是动效语言,同时也是一套 React 框架动效解决方案,提供了单项,组合动画,以及整套解决方案,帮助开发者更容易的在项目中使用动效。 Ant Motion v1.6.1 更新如下: 新增动效组件, rc-texty 一个针对文字标题的进行进出场动画的组件,提供非富的动画效果,也可以随自已的需求来配置完成不同的效果。 修复编辑器里拖动报错问题 #176 动效 Demo 列表的增删...

0
4
发表了资讯
2017/10/19 11:18

动效语言 Ant Motion v1.5.2 发布,支持 React 16

Ant Motion 是从蚂蚁金服的 Ant Design 中提炼出来的动效语言。它不仅仅是动效语言,同时也是一套 React 框架动效解决方案,提供了单项,组合动画,以及整套解决方案,帮助开发者更容易的在项目中使用动效。 v1.5.2 更新内容: 升级 react 到 16 统一跟 ant design 的 footer 更新所有 react 16 的组件 更新 eslint 版本 动效 Demo 列表的增删间的动画 详细说明的切换动效 列表交换位置的动效 图片详细缩略间的切换动效 >> 查看...

1
17
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
2 评论
76 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部