如何为组转换中的一个元素设计 react-spring 动画？

问题描述

我正在尝试使用 react-spring 创建图像轮播。我正在尝试复制可以在此网站上看到的轮播：

https://knightsofsuburbia.com

您会注意到，在该网站上，轮播不仅会更改图像，还会“放大”活动图像。

在 react-spring 中，我创建了以下内容。但是，我的缩放动画并没有像我希望的那样运行。当图像淡出时，它会迅速缩小到下一张图像的比例。我可以看到这是“缩放”弹簧的问题，但我不知道如何解决。

CodePen 可以在这里查看：

https://codesandbox.io/s/frosty-water-118xp?file=/src/App.js

这是代码：

import React,{ useState,useEffect } from "react";
import { useSpring } from "react-spring";
import { useTransition,animated,config } from "@react-spring/web";
import Image1 from "./Carousel1.jpg";
import Image2 from "./Carousel2.jpg";
import Image3 from "./Carousel3.jpg";
import styled from "styled-components";
import "./App.css";

const slides = [Image1,Image2,Image3];

const Container = styled(animated.div)`
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgreen;
  width: 100%;
  height: 30rem;
  position: relative;
  overflow: hidden;
`;

export default function App() {
  const [index,set] = useState(0);
  const zoomer = useSpring({
    from: { number: 1 },to: { number: 1.1 },delay: 200,config: { duration: 6000 },reset: true,});
  const transitions = useTransition(index,{
    from: { opacity: 0 },enter: { opacity: 1,scale: zoomer.number },leave: { opacity: 0 },config: { duration: 2000 },});
  useEffect(() => {
    const t = setInterval(() => {
      set((state) => (state + 1) % slides.length);
    },4000);
    return () => clearTimeout(t);
  },[]);
  return (
    <>
      <Container>
        {transitions((style,i) => {
          return (
            <animated.img
              src={slides[i]}
              alt="a thing"
              style={{
                ...style,position: "absolute",}}
            />
          );
        })}
      </Container>
      <animated.h1>{zoomer.number.to((n) => n.toFixed(2))}</animated.h1>
    </>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）