Ant Motion 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Ant Motion 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Ant Motion 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Ant Motion 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Ant Motion 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 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)

加载中
求vue版本
2018/10/02 21:39
回复
举报
听不懂
2017/07/18 15:06
回复
举报
更多评论
发表于大前端专区
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
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2011/07/12 08:52

ant

使用 ANT 开发 Java 程序 常听大家讨论哪个 Java 开发工具比较好,JBuilder,Virtual Cafe ? 今天介绍一个简单易用的 Java 开发,编译,集成,测试工具:Jakarta Ant 他被称为 java 环境里的 make (make 在 C 程序开发里人人皆知) Java 程序编辑器爱用啥用啥,我喜欢用 UltraEdit。 以 HelloWorld 为例介绍他的使用。 此示例可在此下载: ftp://cinc.dns2go.com/pub/doc/code/ant/HelloWorld.zip .下载 ant :(最新版 1.5) ht...

0
1
发表了博客
2013/04/04 12:15

ant

1 Ant是什么? Apache Ant 是一个基于 Java的生成工具。 生成工具在软件开发中用来将源代码和其他输入文件转换为可执行文件的形式(也有可能转换为可安装的产品映像形式)。随着应用程序的生成过程变得更加复杂,确保在每次生成期间都使用精确相同的生成步骤,同时实现尽可能多的自动化,以便及时产生一致的生成版本 Ant工具的作用: 1、可以用ant编译java类,生成class文件 2、ant可以自定义标签、配置文件 3、ant可以把相关层...

0
1
发表了博客
2018/02/26 09:10

Ant -----ant标签和自定义任务

随便记一下 Ant的用法吧。ant ,maven, gradle ,三个打包工具到齐了,Ant 常见标签解析,ant 自定义task 。 <?xml version="1.0" encoding="UTF-8"?> <project name="pase2" default="allElements"> <property environment="env" /> <!-- ===================================================================== --> <!-- Run a given ${target} on all elements being built --> <!-- Add on <ant> task for each top level e...

0
0
发表于大前端专区
2020/06/24 09:57

ant学习第一天 ant引入

通过vue ui安装完 vue-cli-plugin-ant-design  插件 ant-design 运行依赖 然后在main.js中引入 import './plugins/ant-design-vue.js' 即可

0
0
发表了博客
2012/07/19 14:53

Ant入门学习一(Ant的安装)

一:Setup 1.Add the bin directory to your path. 2.Set the ANT_HOME environment variable to the directory where you installed Ant. On some operating systems, Ant's startup scripts can guess ANT_HOME (Unix dialects and Windows NT/2000), but it is better to not rely on this behavior. 3.Optionally, set the JAVA_HOME environment variable (see the Advanced section below). This should be set to the di...

0
0
发表于软件架构专区
2015/07/22 14:06

ANT(2) Eclipse中使用ANT

在eclipse中使用ant非常方便,因为它提供了智能提示,自动检错等IDE常见的功能。 1 配置Ant eclipse中,默认打开build.xml文件时,将使用eclipse默认的xml编辑器,这并不是我们所希望的,因此需要修改fileAssociation. 在FileAssociation中添加build.xml ,并将其AntEditor设置为default 2 编写build.xml并运行 编写时,需要在project标签下指定basedir=“.”,即表示ant操作的目录为当前项目所在路径。 运行时runAs->AntBuild...

0
0
发表于开发技能专区
2014/02/28 14:46

Ant小总结

一、Ant的基础 1.1 Ant的Project 1.2 Ant的target target表示的是每一项具体的任务 1.3 Ant的depends 当不同的任务之间有相应的关联的时候,可以通过depends属性来设定 1.4 Ant编译普通java项目的流程 1、创建文件夹 build-->所有的文件信息都保存在这个文件夹中 src-->所有的源码信息保存在这个文件夹中 classes-->编译好的所有文件保存在这个文件夹中 dist-->编译好的jar文件保存在这个文件夹中 2、将src文件夹的数据拷贝到b...

0
2
发表了博客
2018/08/24 18:25

ant的原理

ANT批量完成项目代码的重新编译、打包、测试。java语言编写与平台无关的。 Ant工具  Ant是一种基于Java的build工具。理论上来说,它有些类似于(Unix)C中的make ,但没有make的缺陷。   既然我们已经有了make, gnumake, nmake, jam以及其他的build工具为什么还要要一种新的build工具呢?因为Ant的原作者在多种(硬件)平台上开发软件时,无法忍受这些工具的限制和不便。类似于make的工具本质上是基于shell(语言)的:他们计...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
2 评论
79 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部