React 弹性动画库 React Motion

MIT
JavaScript
跨平台
2018-03-26
王练

React Motion 是一个 React 弹性动画库,使用 0-10 的弹性参数进行动画处理:

import {Motion, spring} from 'react-motion';
// In your render...
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {value => <div>{value.x}</div>}
</Motion>

这个库解决了什么问题?

对于 95% 的动画组件使用案例,我们没有必要用硬编码(把配置写死)式的缓冲曲线和时间过渡来重排序。只需要给你的 UI 设置一个刚度系数和阻尼系数,接下来让神奇的物理原理处理即可。用这种方式,根本无需担心如中断动画等小问题。它也极大的简化了 API 。

该库还为 React 的 TransitionGroup(React 自带的 CSS 动画组件)提供了一个更强大的替代 API :

  • spring

  • Motion

  • StaggeredMotion

  • TransitionMotion 

  • presets

Demos

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

SegmentFault 技术周刊 Vol.8 - React,“5 分钟快速入门”

![weekly_vol008.jpg](https://segmentfault.com/img/bVD6kQ) 前段时间开始学习 React,浏览官方文档时,被其中提及的一篇文章——[《Give It Five Minutes》](https://signalvnoise.com/po...

2016/10/21 13:21
10
0
初体验react的状态机

初步体验,感觉爽飞了,非常强大

2016/03/03 22:41
525
1
React Native开发之动画

概述 目前,React Native的版本是0.28,主要的动画分为两大类 LayoutAnimation 用来实现布局切换的动画 Animated 更&#...

2016/06/29 16:27
176
0
VSCode HTML、CSS、JavaScript、jQuery、Vue、npm代码补全提示检查插件

HTMLHint Integrates the HTMLHint static analysis tool into Visual Studio Code. Configuration The HTMLHint extension will attempt to use the locally installed HTMLHint module (th...

2018/05/23 17:28
757
0
ios shake手势

先说点,下面的是IOS7 后的方法,but 如果向下兼容IOS6 的话,也是可以的,不过需要加上这个方法(因为IOS7可以不用写): -( BOOL )canBecomeFirstResponder The following code shows how ...

2014/06/25 11:30
28
0
react,antdesign使用

1.dva new app 完善配置:a.安装antd 和 babel-plugin-import 2.使用: a.Link 引自 dva/router中 b.dispatch中的type值应该写全:index/add c.注册model时,应判断是否已绑过,避免重复绑定而报错...

2018/03/22 15:22
846
0
Motion controller simulator

Motion controller simulator

2016/07/09 13:54
133
0
Linux软件安装与卸载

安装/卸载软件

2016/12/20 09:44
15
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部