react-motion 动画案例介绍

Z时代
2024-01-10
分类：综合

react

第一个案例：Motion组件

import React,{Component} from 'react';
import {Motion,spring,presets} from 'react-motion';
import './motion.css';
class ReactMotion extends Component{
  constructor(props){
    super(props);
    this.state={
      left:0
    }
  }
  clickHandler=()=>{
    let targetX=0;
    if(this.state.left===0){
      targetX=200;
    }else{
      targetX=0;
    }
    this.setState({
      left:targetX
    })
  }
  componentDidMount=()=>{
    this.clickHandler();
  }
  render(){
    return(
      <div className="container">
        <Motion style={{x:spring(this.state.left,presets.wobbly)}}>
          {
            //关键： interpolatingStyle===style
            interpolatingStyle=>{
              return(
                <div
                style={{transform:`translateX(${interpolatingStyle.x}px)`}}
                className='box'
                ></div>
              )
            }
          }
        </Motion>
        <button onClick={this.clickHandler}>run</button>
      </div>
    )
  }
}
export default ReactMotion;

三个组件共用CSS：

.box{
  width: 100px;
  height: 100px;
  background-color: #000;
}
.box2{
  width: 100px;
  height: 100px;
  background-color: #000;
  float:left;
}
.box3{
  width: 200px;
  height: 200px;
  background-color: red;
}

第二个案例：StargeredMotionCom

import React, { Component } from 'react';
import { StaggeredMotion, spring, presets } from 'react-motion';
import '../ReactMotion/motion.css';
// 用StaggeredMotion 实现一个联动动画
class StargeredMotionCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      length: 10
    }
  }
  addLength = () => {
    let newLength;
    if (this.state.length) {
      newLength = 0;
    } else {
      newLength = 10;
    }
    this.setState({
      length: newLength
    })
  }
  render() {
    let boxes = [];
    for (let i = 0, len = this.state.length; i < len; i++) {
      boxes.push({ scale: 0 })
    }
    return (
      <React.Fragment>
        <div>
          {this.state.length > 0 ? (
            <StaggeredMotion defaultStyles={boxes} styles={prevStyles => {
              console.log(prevStyles,'prevStyles') 
              return prevStyles.map((item, i) => i === 0?{scale: spring(1, { ...presets.noWobble })}:prevStyles[i - 1])}}
              >
              {interpolatingStyles =>{
                console.log(interpolatingStyles,'interpolatingStyles')
                return<div>
                {interpolatingStyles.map((item, i) => {
                  return (
                    <div className="box2" key={i} style={{transform: `scale(${item.scale}, ${item.scale})`}}></div>)})
                }
              </div>
              }
              }
            </StaggeredMotion>
          ) : null}
        </div>
        <button onClick={this.addLength}>run</button>
      </React.Fragment>
    )
  }
}
export default StargeredMotionCom;

第三个案例：TransitionMotion

import React, { Component } from 'react';
import { TransitionMotion, spring } from 'react-motion';
import '../ReactMotion/motion.css';
class TransitionMo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true
    }
  }
  componentDidMount = () => {
    this.setState({
      show: false
    })
  }
  clickHandler = () => {
    this.setState({
      show: !this.state.show
    })
  }
  willEnter = styleThatEnter => {
    return { scale: 0 }
  }
  willLeave = styleThatLeft => {
    return { scale: spring(0) }
  }
  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>run</button>
        {/* style===inStyles */}
        <TransitionMotion styles={this.state.show ? [{ key: 'test', style: { scale: spring(1) } }] : []}
          willEnter={this.willEnter}
          willLeave={this.willLeave}>
          {inStyles => (
            inStyles[0] ? (
              <div className="box3"
                key={inStyles[0].key}
                style={{
                  transform: `scale(${inStyles[0].style.scale},${inStyles[0].style.scale})`
                }}></div>
            ) : null
          )}
        </TransitionMotion>
      </div>
    );
  }
}
export default TransitionMo;