react 动画 react-motion

柔情只为你懂 2022-12-03 11:26 213阅读 0赞

## 安装包 ##

npm install react-motion --save

## 简单示例 ##

import React from 'react'
    import IComponent from 'BaseCMSManage/Components/IETemplateComponents/IEAnimation/IComponent'
    import {  Motion, spring, presets } from 'react-motion'
    
    class IEAnimation extends IComponent { 
        constructor(props) { 
            super(props);
    
            this.state = { 
                value: 0
            }
    	}
    
        componentDidMount() { 
            this.setState({  value: 100 });
    	}
    
        render() { 
            // presets 是预设的几种动画类型
            // 动画执行过程
            // 初始化时 x = 0，
            // 当我们 setState 时，x = 100
            // 这时将产生一个 x 从 0 到 100 的一个变化，如（0, 20, 40, 60, 80, 100）,如何变化取决于我们的预设 presets
            // 每次变化将会调用我们的 动画组件 生成组件
            return (<div>
                <Motion style={ {  x: spring(this.state.value, presets.wobbly) }}>
                    { /* 动画组件 */}
                    { interpolatingStyle => { 
                        return (
                            <div style={ {  left: `${ interpolatingStyle.x - 100}%`, position: 'relative' }}>
                                { 
                                    this.props.children
                                }
                            </div>
                        )
                    }}
                </Motion>
            </div>);
        }
    }

## 联动动画StaggeredMotion组件 ##

联动动画执行过程n次变化如下：  
1.组件1\[x=10\]，组件2\[x=0\]，组件3\[x=0\]  
2.组件1\[x=20\]，组件2\[x=10\], 组件3\[x=0\]  
3.组件1\[x=30\]，组件2\[x=20\]，组件3\[x=10\]

示例：

import React from 'react'
    import IComponent from 'BaseCMSManage/Components/IETemplateComponents/IEAnimation/IComponent'
    import {  Motion, spring, presets, StaggeredMotion } from 'react-motion'
    
    class IEAnimation extends IComponent { 
        constructor(props) { 
            super(props);
    
            this.state = { 
                value: 0
            }
    }
    
        componentDidMount() { 
            this.setState({  value: 100 });
    }
    
        render() { 
            let childrens = [
                { childVal: this.state.value},
                { childVal: this.state.value},
                { childVal: this.state.value}
            ]
            return (<div>
                <StaggeredMotion 
                    defaultStyles={ childrens}
                    styles={ prevInterpolatedStyles => { 
                        // 这一步很重要，prevInterpolatedStyles 是上一次变化的 styles
                        // 而我们要返回的是这一次变化的 styles
                        // 我们这一次变化的 styles，要基于上一次变化
                        // 也就是说这一次的 styles[1] 要等于上一次的 prevInterpolatedStyles[0]，同理 2->1，3->2 ...
                        return prevInterpolatedStyles.map((_, i) => { 
                            return i === 0
                            ? { childVal: spring(this.state.value)}
                            : { childVal: spring(prevInterpolatedStyles[i - 1].childVal, presets.wobbly)}
                        })
                    }}
                >
                    { interpolatingStyles => { 
                        return <>
                            { 
                                interpolatingStyles.map((e, i)=>(
                                    <div style={ {  left: `${ e.childVal - 100}%`, position: 'relative' }}></div>
                                ))
                            }
                        </>
                    }}
                </StaggeredMotion>
            </div>);
        }
    }

## 挂载卸载动画TransitionMotion ##

没试过，直接使用官方示例：

import createReactClass from 'create-react-class';
    
    const Demo = 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 (
          <TransitionMotion
            willLeave={ 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 <div key={ config.key} style={ { ...config.style, border: '1px solid'}} />
                })}
              </div>
            }
          </TransitionMotion>
        );
      },
    });