如何在 React 运行 中一个接一个地 运行 动画 spring
how to run animation in sequence one by one in react spring
我正在使用 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;
我创建了一个示例。我用的是useSpring钩子的onRest属性。但是 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
我正在使用 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;
我创建了一个示例。我用的是useSpring钩子的onRest属性。但是 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