如何在react spring中按顺序依次运行动画

Question

我正在使用react-spring库，它对我有用，我想做的，我想按顺序运行3个动画，现在一次运行所有3个动画，我们可以一个一个地做吗，在这里我已经添加了我的整个代码，任何人都可以查看它并帮助我解决这个问题吗？任何帮助将不胜感激。如果你有任何其他动画库可以做同样的事情，那么请告诉我

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
    withRouter,
    NavLink
  } from "react-router-dom";
import ScrollToTop from "./scrollToTop";
import App from "./App";
import { useAuth0 } from "@auth0/auth0-react";
import {useSpring, animated} from 'react-spring';
//import { useGesture } from 'react-use-gesture';

const LoginButton = () => {
    const { loginWithRedirect, isAuthenticated, isLoading, error } = useAuth0();
    const scrollingLeft = useSpring({
        from: { transform: "translate(60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true,
        tension:170,
        friction:26,
        mass:1,
      });

      const scrollingRight = useSpring({
        from: { transform: "translate(-60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true,
        tension:170,
        friction:26,
        mass:1,
      });  

      const scrollingCenter = useSpring({
        from: { transform: "translate(-60%,0)" },
        to: { transform: "translate(0,0)" },
        config: { duration: 1000 },
        reset: true,
        tension:170,
        friction:26,
        mass:1,
      });  

      
    console.log('isLoading', isLoading, isAuthenticated, error)
    const isAuth = localStorage.getItem('isAuthenticated')
    console.log('isAuth', isAuth)
    if(!isAuth){
        if (isLoading) {
            return <div>Loading...</div>;
          }
    
        if (!isAuthenticated) {
            loginWithRedirect()
        } else {
            localStorage.setItem('isAuthenticated', isAuthenticated)
        }
    }

   

    


    return (
        <Router>
            <ScrollToTop />
            <Switch>
                <Route path="/app" component={App} />
                <Route path="/" exact>
                    <NavLink to="/app">
                        {" "}
                        
                        <div className="full_width">
                            <animated.div style={scrollingLeft} className="class_1">
                                <img src="https://cloudinary-res.cloudinary.com/image/upload/c_limit,h_540,w_770/f_auto,fl_lossy,q_auto/rzxcje2xocuicsxjevlviw.jpg" />
                            </animated.div>
                            <animated.div style={scrollingRight} className="class_2">
                                <img src="https://cloudinary-res.cloudinary.com/image/upload/c_limit,h_540,w_770/f_auto,fl_lossy,q_auto/rzxcje2xocuicsxjevlviw.jpg" />
                            </animated.div>
                            <animated.div style={scrollingCenter} className="class_3">
                                <table>
                                    <tr>
                                        <th>Header 1</th>
                                        <th>Header 2</th>
                                    </tr>
                                    <tr>
                                        <td>Test 1</td>
                                        <td>Test 2</td>
                                    </tr>
                                    <tr>
                                        <td>Test 1</td>
                                        <td>Test 2</td>
                                    </tr>
                                 </table>                                   
                            </animated.div>
                        </div>

                        <div>
                            <img src="site.png" className="welcome-screen" />
                        </div>
                    </NavLink>
                </Route>
            </Switch>
        </Router>
    );
};

export default LoginButton;

Answer 1

我创建了一个示例。我使用 useSpring 钩子的 onRest 属性。但是在每个动画 endng 上都会调用 onRest。所以我必须为第二个动画创建一个组件。我只在第一个动画完成时渲染它。我没有将最后一个动画放在单独的组件中，因为我们不使用它的 onRest 事件。代码如下：

import React from "react";

import { useSpring, animated } from "react-spring";
//import { useGesture } from 'react-use-gesture';

const ScrollLeft = ({ onRest }) => {
  const scrollingLeft = useSpring({
    from: { transform: "translate(60%,0)" },
    to: { transform: "translate(20%,0)" },
    onRest
  });

  return (
    <animated.div style={scrollingLeft} className="class_1">
      <img src="https://cloudinary-res.cloudinary.com/image/upload/c_limit,h_540,w_770/f_auto,fl_lossy,q_auto/rzxcje2xocuicsxjevlviw.jpg" />
    </animated.div>
  );
};

const ScrollRight = ({ onRest }) => {
  const scrollingRight = useSpring({
    from: { transform: "translate(-60%,0)" },
    to: { transform: "translate(20%,0)" },
    onRest
  });

  return (
    <animated.div style={scrollingRight} className="class_2">
      <img src="https://cloudinary-res.cloudinary.com/image/upload/c_limit,h_540,w_770/f_auto,fl_lossy,q_auto/rzxcje2xocuicsxjevlviw.jpg" />
    </animated.div>
  );
};

const LoginButton = () => {
  const [finished1, setFinished1] = React.useState(false);
  const [finished2, setFinished2] = React.useState(false);

  const scrollingCenter = useSpring({
    from: { transform: "translate(-60%,0)" },
    to: { transform: finished2 ? "translate(0,0)" : "translate(-60%,0)" },
    reset: true,
    tension: 170,
    friction: 26,
    mass: 1
  });

  return (
    <div className="full_width">
      <ScrollLeft onRest={() => setFinished1(true)} />
      {finished1 && <ScrollRight onRest={() => setFinished2(true)} />}
      <animated.div style={scrollingCenter} className="class_3">
        <table>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
          <tr>
            <td>Test 1</td>
            <td>Test 2</td>
          </tr>
          <tr>
            <td>Test 1</td>
            <td>Test 2</td>
          </tr>
        </table>
      </animated.div>
    </div>
  );
};

export default LoginButton;

https://codesandbox.io/s/spring-animations-in-sequence-hjubr