Ant Motion

动效语言& React 框架动效解决方案
授权协议 MIT
开发语言 JavaScript
所属分类 iOS代码库、 滚动视图(ScrollView)
软件类型 开源软件
地区 国产
投 递 者 顾英发
操作系统 跨平台
开源组织 阿里巴巴
适用人群 未知
 软件概览

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 。

  • 1、安装 cnpm install rc-queue-anim --save 2、引入 import QueueAnim from 'rc-queue-anim'; 3、使用: <QueueAnim delay={300} className="queue-simple"> <div key="a">Queue Demo</div> <div key="b">Que

  • 例行惯例,欢迎来波star: 仓库地址:vueComponent/ant-design 官方网站:A UI Design Language 为何造这个轮子: 用惯了Antd,再看其他的总觉得没有Antd好用 周边生态,组件数量及质量都是略胜一筹,至于样式,每个人的审美不一样,就不加评判了,不过个人还是喜欢antd的。 社区很多Antd的Vue实现,大多已经弃坑,已经实现的也多是阉割版 github

  • 安装 cnpm install rc-queue-anim --save 使用 TweenOne 闪烁效果 import TweenOne from 'rc-tween-one'; <TweenOne repeat={-1} animation={[ { opacity: 1, duration: 750, ease: 'linear' }, //750毫秒显示

  • 渲染问题 当从后端获取数组对象进行map渲染,使用 {option&&option.map(()=>{ <> ..... </> })} option会出现偶发的渲染为0的现象 严谨做法如下 {Boolean(option)&&option.map(()=>{ <> ..... </> })} ant组件库的select在使用defaultValue属性时,操作如下: <Se

 相关资料
  • 本文向大家介绍Python flask框架端口失效解决方案,包括了Python flask框架端口失效解决方案的使用技巧和注意事项,需要的朋友参考一下 大家可能有这样的体验,好比在程序里面我明明写了app.run(port=8001),结果程序还是在5000端口输出,我们右键点击py程序,直接运行。 可以看到,端口为5000 这时候我们要做的是点击以下图标 进入页面,填入如下内容,点击ok,再点击

  • 本文向大家介绍django框架模板语言使用方法详解,包括了django框架模板语言使用方法详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了django框架模板语言使用方法。分享给大家供大家参考,具体如下: 模板功能 作用:生成html界面内容,模版致力于界面如何显示,而不是程序逻辑。模板不仅仅是一个html文件,还包括了页面中的模板语言。 静态内容:css,js,html。 动态内容:

  • 本文向大家介绍Android利用滑动菜单框架实现滑动菜单效果,包括了Android利用滑动菜单框架实现滑动菜单效果的使用技巧和注意事项,需要的朋友参考一下 之前我向大家介绍了史上最简单的滑动菜单的实现方式,相信大家都还记得。如果忘记了其中的实现原理或者还没看过的朋友,请先去看一遍之前的文章Android仿人人客户端滑动菜单的侧滑特效实现代码,史上最简单的侧滑实现 ,因为我们今天要实现的滑动菜单框架

  • 本文向大家介绍Extjs grid panel自带滚动条失效的解决方法,包括了Extjs grid panel自带滚动条失效的解决方法的使用技巧和注意事项,需要的朋友参考一下 之前用EXTJS的gridPanel组件的时候,因为经常对gridPanel中的stroe数据进行过滤,所以有时候总是导致gridPanel自身所带的scrollbar失效。 取个实例,EXTJS gridPanel自带的滚

  • 本文向大家介绍vue动画打包后失效问题的解决方法,包括了vue动画打包后失效问题的解决方法的使用技巧和注意事项,需要的朋友参考一下 webpack 打包后动画未执行, 就是npm run build后在dist中生成的项目中动画未生效 解决: 找到build文件夹中 得vue-loader.conf.js,把extract的值改为false---如图 下面看下vue-cli 打包后自定义动画未执行

  • 问题内容: 我正在尝试使用React创建滑动事件。我不想使用任何外部组件或jquery。 CSS是这样的: 在react组件中,我正在尝试执行以下操作: 如何识别滑动事件? 如果在我的示例中而不是添加它,它可以工作,但是如何制作滑动效果? 这是jsfiddle。 问题答案: 您可以将事件处理程序添加到您的React组件中: 您可能还想为鼠标事件添加事件处理程序,以实现跨平台兼容性: 您有正确的想法

  • 本文向大家介绍android开发 eclipse alt+”/”自动提示失效的解决方法,包括了android开发 eclipse alt+”/”自动提示失效的解决方法的使用技巧和注意事项,需要的朋友参考一下 1、用于没有一点提示的情况:依次打开eclipse上面的windows ——preferences ——java ——editor —— content assist ,在右上方有一行“sel

  • 本文向大家介绍解释行为驱动框架。,包括了解释行为驱动框架。的使用技巧和注意事项,需要的朋友参考一下 行为驱动框架从项目中的所有涉众那里获取信息,比如开发人员、测试人员、产品所有者、经理、客户和业务分析师。这个想法是为了让项目的每个成员都有相同的理解。 行为驱动框架致力于团队中每个人之间的协作和协调。技术编码知识是不必要的,因为功能需求或规范是用非技术性的,通用的语言描述的。 在自动和手动测试人员设