动效语言& React 框架动效解决方案 Ant Motion

动效语言& React 框架动效解决方案 Ant Motion

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 。

加载中

评论(2)

雷丘
雷丘
求vue版本
一个大土豆
一个大土豆
听不懂

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

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

10/02 07:31

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

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

07/14 07:26

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

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

2017/10/19 11:18

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

eclipse使用ant + ivy 配置项目jar包和依赖关系

首先,ant是版本区分的,不同版本适配不同jdk版本。 以我本机为例,本机ant版本为1.7.0对应ivy版本是2.2.0,jdk使用的1.5 将ant文件安装或解压后,配置ant的环境变量: ANT_HOME:指向ant的文...

12/03 18:50
129
0
ANT 环境配置

ANT是java开发的很好的构建工具,很多开源项目都是使用ANT来构建的,并且ANT和JUNIT可以很好的配合使用,生成非常完美的测试报告,帮助开发人员开发。作为一名开发人员,如果一天天的时间都花...

2011/12/30 10:37
6.6K
0
Myeclipse中Ant编译文件停止的问题

http://blog.csdn.net/horizonpan/article/details/8573912 在Myeclipse中经常用到ant工具来编译java工程。 选择ant工具的步骤如下: Windows->Shown view->Ant 这样就出项了ant视图框。在a...

2013/05/22 11:15
45
0
Ant学习小记

本文主要介绍利用javac和java2个命令运行java程序,使用Ant运行java程序和带外部依赖的java程序

2014/02/26 20:32
73
0
Ant构建工具

参考资料 1、Ant之build.xml配置详解 2、Ant build.xml中的各种变量 3、Ant学习总结(1)对exec的理解 4、Ant + Ivy管理项目依赖 5、自动构建工具Ant深入剖析(二) Ant属性、目标、依赖深度详...

05/08 17:27
11
0
Java Ant build.xml详解

1,什么是ant ant是构建工具 2,什么是构建 概念到处可查到,形象来说,你要把代码从某个地方拿来,编译,再拷贝到某个地方去等等操作,当然不仅与此,但是主要用来干这个 3,ant的好处 跨平台 ...

2015/07/12 01:19
22
0
Java_Ant详解

本文转自:百度空间 Java_Ant详解 1,什么是ant ant是构建工具 2,什么是构建 概念到处可查到,形象来说,你要把代码从某个地方拿来,编译,再拷贝到某个地方去等等操作,当然不仅与此,但是主...

2013/10/12 17:27
37
0
[Android] 基于 Linux 命令行构建 Android 应用(五):Ant 构建命令

[Android] 基于 Linux 命令行构建 Android 应用(五):Ant 构建命令 http://www.cnblogs.com/ifantastic/p/3979260.html...

2015/01/08 17:52
23
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部