react-motion, 解决动画问题的spring

分享于 

17分钟阅读

GitHub

  繁體 雙語
This might be it!
  • 源代码名称:react-motion
  • 源代码网址:http://www.github.com/chenglou/react-motion
  • react-motion源代码文档
  • react-motion源代码下载
  • Git URL:
    git://www.github.com/chenglou/react-motion.git
    Git Clone代码到本地:
    git clone http://www.github.com/chenglou/react-motion
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/chenglou/react-motion
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    React

    Build Statusnpm versionBower versionreact-motion channel on discord

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

    将计数器从 0 转换为 10。 有关更高级用法的信息,请参阅下面的。

    安装

    • Npm: npm install --save react-motion

    • Bower: 英镑不随 bower install react-motion 安装,它将不能工作。 用户 bower install --save https://unpkg.com/react-motion/bower.zip 或者在 bower.json 中:

    {
     "dependencies": {
     "react-motion": "https://unpkg.com/react-motion/bower.zip" }
    }

    然后包括

    <scriptsrc="bower_components/react-motion/build/react-motion.js"></script>
    • 1998脚本标记:
    <scriptsrc="https://unpkg.com/react-motion/build/react-motion.js"></script>
    (Module exposed as `ReactMotion`)

    工作 react v0.18 +

    演示

    查看wiki以获得更多信息

    本地试用演示

    git clone https://github.com/chenglou/react-motion.gitcd react-motion
    npm install
    • 使用热重新加载( 开发版本 ): 运行 npm start
    • 没有热重新加载( ,生产版本 ): 运行 npm run build-demos 并直接打开 static demos/demo_name/index.html 文件。 在测试动画的性能时,不要忘记使用生产模式 !

    要自己构建 repo: npm run prepublish

    :这个库试图解决什么

    我的react

    对于 95%个用于动画组件的用例,我们不必使用硬编码的简单曲线和持续时间。 为你的UI元素设置刚度和阻尼,并让物理的魔术处理它的余的。 这样,你就不必担心琐碎的情况,比如中断的动画行为。 它也大大简化了 API。

    这个库还为React的TransitionGroup 提供了一个可选的。更强大的API。

    API

    导出:

    • spring
    • Motion
    • StaggeredMotion
    • TransitionMotion
    • presets

    这里是注释的public 流类型定义文件( 你不必在响应动作时使用流,但类型有助于记录下面的API )。

    P.S。在这里使用 app是React动作的定义? !

    帮助器

    --spring: ( val: 数字,配置: SpringHelperConfig ) => OpaqueConfig?

    下面的组件一起使用。 指定如何对目标值进行动画处理,比如 spring(10, {stiffness: 120, damping: 17}) 表示"值 10的动画,带有刚度 120和阻尼 17的spring"。

    • val: 值。

    • config: 可选,用于进一步调整。 可能的字段:

      • stiffness: 可选,默认为 170
      • damping: 可选,默认为 26
      • precision: 可选,默认为 0.01。 指定插值值的舍入和速度( 内部)。

      感觉刚度和阻尼是如何影响你的spring 是正常的;使用 spring 参数选择器来获得感觉。 通常 ,你只需在下面使用有品位的刚度/湿。

    - {stiffness, damping}的预置

    常用的spring 配置如下所示: spring(10, presets.wobbly) 或者 spring(20, {...presets.gentle, precision: 0.1})在这里看到。

    <运动/>

    用法
    <MotiondefaultStyle={{x:0}}style={{x:spring(10)}}>
     {interpolatingStyle=> <divstyle={interpolatingStyle}/>}</Motion>
    道具风格: 样式

    必需。Style 类型是映射到 number 或者上 spring() 返回的OpaqueConfig的对象。 必须在组件的整个存在中保持相同的键。 值的含义:

    • spring(x) 返回的OpaqueConfig: 插入 x
    • numberx: 跳转到 x,不插入。
    - defaultStyle: PlainStyle?

    可选。PlainStyle 类型映射到 number。 默认为上面与 Style 具有相同键的对象,它的值是你正在插入的初始数字。 注意在后续渲染过程中,这里道具将忽略。 这些值将从当前的值插入到目标( 由 Style 指定)。

    - 子对象:( interpolatedStyle: PlainStyle ) => ReactElement

    需要的函数

    • interpolatedStyle: 传递给你的内插样式对象。 如果你给了 比如 style={{x: spring(10), y: spring(20)}} 你会在特定的时间收到 interpolatedStyle{x: 5.2, y: 12.1} 你可以在你的div 或者其他东西上应用。

    • 返回:必须返回一个React元素才能呈现。

    - onRest: ( ) => void?

    可选。当动画到达其他位置时触发的回调。

    <StaggeredMotion/>

    设置一个值依赖于彼此的( 固定长度 ) 项的集合,创建一个自然的。弹性的。"staggering"效果 ,例如。 这比硬编码 array的Motions 延迟来达到类似的( 但更自然的是) 效果更可取。

    用法
    <StaggeredMotiondefaultStyles={[{h:0}, {h:0}, {h:0}]}styles={prevInterpolatedStyles=> prevInterpolatedStyles.map((_, i) => { return i ===0? {h:spring(100)}: {h:spring(prevInterpolatedStyles[i -1].h)} })}>
     {interpolatingStyles=> <div>{interpolatingStyles.map((style, i) => <divkey={i}style={{border:'1px solid',height: style.h}}/>)} </div>}</StaggeredMotion>

    Aka"spring 值的当前目标是前一个 spring的插值值"。 想象一个 spring 拖动另一个。 物理,它工作 !

    道具风格: ( previousInterpolatedStyles:数组 <PlainStyle> ) => 数组 <样式>?

    必需的英镑函数。不要忘了"s" !

    • previousInterpolatedStyles: 以前插值的( array ) 样式(。第一次渲染时 undefined,除非提供了 defaultStyles )。

    • 返回:必须返回包含目标值的Style的array,比如 [{x: spring(10)}, {x: spring(20)}]

    - defaultStyles: array <PlainStyle>?

    可选,类似于 MotiondefaultStyle,但它们的array。

    - 子对象:( interpolatedStyles: array <PlainStyle> ) => ReactElement

    需要函数。类似于 Motionchildren,但接受内插样式的array,比如 [{x: 5}, {x: 6.4}, {x: 8.1}]

    因为我们还没有找到一个很好的语义,所以( 对于 StaggeredMotion,没有 onRest。 在问题部分中你的支持。

    <TransitionMotion/>

    帮助你完成挂载和卸载动画任务。

    用法

    你拥有 abc 和它们各自的样式配置,它们都提供给 TransitionMotionstyles。 在 children 函数中,将三个插值样式作为参数传递;通过映射它们并生成三个组件。 一切都好。

    当你在下一次渲染时,只给出 ab,表示你想要 c,但是你希望在杀死它之前对它进行动画处理,从而使它的。

    幸好 TransitionMotion 一直保留 c,并将它传递到 children 函数参数中。 所以当你用这三种插值方式进行贴图时,你仍然在产生三个成分。 它将保持插值,同时检查每个帧的c 电流值。 一旦 c 到达指定的0TransitionMotion 将删除它以获得良好的( 从传递给 children 函数的内插样式)。

    此时,当通过其余两个插值样式映射时,你将只生成两个。 c 已经消失了。

    import createReactClass from'create-react-class';constDemo =createReactClass({
     getInitialState() {
     return {items: [{key:'a',size:10}, {key:'b',size:20}, {key:'c',size:30}],
     };
     },
     componentDidMount() { this.setState({items: [{key:'a',size:10}, {key:'b',size:20}],// remove c. });
     },
     willLeave() {// triggered when c's gone. Keeping c until its width/height reach 0.return {width:spring(0),height:spring(0)};
     },
     render() { return (
     <TransitionMotionwillLeave={this.willLeave}styles={this.state.items.map(item=> ({key: item.key,style: {width: item.size,height: item.size}, }))}>
     {interpolatedStyles=>// first render: a, b, c. Second: still a, b, c! Only last one's a, b. <div>{interpolatedStyles.map(config=> { return <divkey={config.key}style={{...config.style,border:'1px solid'}}/> })} </div>} </TransitionMotion>
     );
     },
    });
    道具

    首先,两种类型定义可以简化理解。

    • TransitionStyle: 格式的对象 {key: string, data?: any, style: Style}

      • key: 必要的。TransitionMotion 用来跟踪呈现的配置,即使事件重新排序也是必需的。 当你在插值的样式上映射时,通常作为组件 key 重用。

      • data: 可选的任何你想要携带的东西。 这样,当前一节的c 消失时,你仍然可以访问与数据相关的c,例如文本。

      • Style: 必需。实际的启动样式配置,类似于你为 MotionStyle 提供的。 将键映射到由 spring() 返回的数字或者 OpaqueConfig

    • TransitionPlainStyle: 与上面的类似,除了字段的Style 值为 PlainStyle,也是映射到数字的对象。

    - 样式:array <TransitionStyle> | ( previousInterpolatedStyles: <TransitionPlainStyle> ) => 阵列 <TransitionStyle>?

    必需的。接受:

    • TransitionStyle 配置的array,比如 [{key: 'a', style: {x: spring(0)}}, {key: 'b', style: {x: spring(10)}}]

    • 类似于 StaggeredMotion的函数,以前插入的样式(。第一次调用 undefined,除非提供了 defaultStyles ),并返回前面提到的配置的array。 你可以用这个 mounting。

    - defaultStyles: array <TransitionPlainStyle>?

    可选。类似于其他组件的defaultStyle/defaultStyles

    - 子对象:( interpolatedStyles: array <TransitionPlainStyle> ) => ReactElement

    需要函数类似于其他两个组件'children"。 接收类似于为 defaultStyles 提供的array,只有对象值的每个 Style 数值都表示当前插值值。

    - willLeave: ( styleThatLeft:? TransitionStyle ) =>样式?

    可选。默认为 () => null。magic属性

    • styleThatLeft: 比如 {key:.. ., data:.. ., style:.. .}styles array 标识的对象,由 key 标识,现在呈现在前面的渲染中,因这里现在无法调用 willLeave。 注意,样式属性是你在 styles 中传递的,而不是内插的。 例如如果你为 x 传递了一个 spring,那么你将收到 {x: {stiffness, damping, val, precision}}

    • 返回:null 表示要立即删除 TransitionStyle。 指示你希望在杀死 TransitionStyle 之前达到指定值的Style 对象。

    - didLeave: ( styleThatLeft:? {key: string, data?: any} ) => void

    可选。默认为 () => {}

    • styleThatLeft: 完成转换后被删除的{key:..., data:...}
    - willEnter: ( styleThatEntered:? TransitionStyle ) => PlainStyle

    可选。默认为 styleThatEntered => stripStyle(styleThatEntered.style)stripStyle turns {x: spring(10), y: spring(20)}{x: 10, y: 20}

    • styleThatEntered: 与 willLeave 类似,除了 TransitionStyle 表示在最后一个 render 中没有 key 值的对象,而且现在是。

    • 返回:defaultStyle -like PlainStyle 配置,比如 {x: 0, y: 0} ,作为动画的起始值。 在这种光线下,默认提供的是"具有与目标值具有相同起始值的样式配置"。

    willEnterdefaultStyles 提供不同用途的英镑说明。 只有在 styles 中以前存在的TransitionStyle 进入新的渲染时,willEnter 才会触发。

    因为我们还没有找到一个很好的语义,所以( 对于 TransitionMotion,没有 onRest。 在问题部分中你的支持。

    常见问题解答

    • 如何设置动画的持续时间?

    硬编码持续时间与流体接口。 如果你的动画中断了,你会得到一个奇怪的完成动画,如果你硬编码时间。 也就是说,在演示部分有一个伟大的 spring 参数选择器,让你感觉到是合适的,而不是在黑暗中推测持续时间。

    • 如何卸载 TransitionMotion 容器本身?

    除非你把它放在另一个 TransitionMotion 里。

    • 如何执行动画/链接动画,它的中项目之后一个动画?

    请参见 StaggeredMotion

    • 我的ref 在子函数中不起作用。

    响应字符串将不起作用:

    <Motionstyle={...}>{currentValue=> <divref="stuff"/>}</Motion>

    这就是React的作用。 下面是回调ref解决方案


    动画  Spring  
    相关文章