react 动画 react-motion-蒲公英云

react 动画 react-motion

安装包

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>
    );
  },
});