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

码农软件 · 软件分类 · 滚动视图(ScrollView) · 2019-06-03 16:57:40

软件介绍

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 。

本文地址:https://www.codercto.com/soft/d/7176.html

信息简史

信息简史

[美] 詹姆斯·格雷克 / 高博 / 人民邮电出版社 / 2013-10 / 69.00元

人类与信息遭遇的历史由来已久。詹姆斯•格雷克笔下的这段历史出人意料地从非洲的鼓语讲起(第1章)。非洲土著部落在尚未直接跨越到移动电话之前,曾用鼓声来传递讯息,但他们是如何做到的呢?后续章节进而讲述了这段历史上几个影响深远的关键事件,包括文字的发明(第2章)、罗伯特•考德里的第一本英语词典(第3章)、查尔斯•巴贝奇的差分机与爱达•拜伦的程序(第4章)、沙普兄弟的信号塔与摩尔斯电码(第5章)。 ......一起来看看 《信息简史》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具