如何在滚动时使用 react-spring 从左到右正确移动 React 组件？

Question

我有一个 div，其中包含一个 image 和一些 text 对齐到中心

我需要使用 react-spring 进行转换， 当我滚动 时，文本看起来应该从 -x 值变为 0 而且它必须非常光滑和真实。

所以我查看了 react-spring 文档，他们 没有关于这类事情的丰富文档 。只有几个例子。

举个例子，我怎样才能为这样的场景找到其他道具？

import {useTransition, animated} from 'react-spring'

const component = () => {

  const props = useSpring({opacity: 1, from: {opacity: 0}}) // how can I know other parameters like opcacity, from, to etc...

  return (
    <animated.div>
      {div contents here}
    </animated.div>
  )
}

有人可以帮助我进行左右转换，其中 文本从左侧开始并落在上述图像的中心当滚动浏览 时？

谢谢。

Answer 1

我想你可能对 translateX

感兴趣

from left and lands at the center of the above mentioned image

将以上与display: flex和align-items: center

合并

例子

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { useSpring, animated } from "react-spring";

const style = {
  background: 'url("https://picsum.photos/200/300") center center / cover no-repeat',
  padding: '10px',
  width: '300px',
  height: '200px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}

const textStyle = {
  color: 'white',
  fontSize: '50px',
  background: 'black'
}

const App = props => {
  const [isLoaded, setLoaded] = useState(false);
  const springProps = useSpring({ 
    opacity: 1, 
    delay: 700,
    reset: isLoaded,
    transform: 'translateX(0px)',
    from: { 
      opacity: 0,
      transform: 'translateX(-250px)'
    } });

  useEffect(() => {
    fetch("https://picsum.photos/200/300")
      .then(pr => {
        setLoaded(true);
      })
  }, [])

  return <>{isLoaded ? <div style={style}>
        <animated.div style={{...textStyle, ...springProps}}>Some text</animated.div>
      </div> : <span></span>}</>
};

WHEN SCROLLING THROUGH?

在这种情况下，您必须对 useSpring 使用第二个重载，并使用析构 set 方法更新 onscroll 回调

中的值

例子

const App = props => {
  const [isLoaded, setLoaded] = useState(false);
  const [{ param }, set] = useSpring(() => ({ param: 0 }));

  const onScroll = () => {
    let ratio = window.scrollY / window.innerHeight;
    ratio = ratio > 1 ? 1 : ratio;

    set({
      param: ratio
    });
  };

  useEffect(() => {
    window.addEventListener("scroll", onScroll);

    fetch("https://picsum.photos/200/300").then(pr => {
      setLoaded(true);
    });

    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

  return (
    <div style={containerStyle}>
      {isLoaded ? (
        <div style={style}>
          <animated.div
            style={{
              ...textStyle,
              opacity: param.interpolate({
                range: [0, 0.5, 0.75, 1],
                output: [0, 0.5, 0.75, 1]
              }),
              transform: param
                .interpolate({ range: [0, 0.5, 1], output: [-50, -25, 0] })
                .interpolate(x => `translateX(${x}px)`)
            }}
          >
            Some text
          </animated.div>
        </div>
      ) : (
        <span />
      )}
    </div>
  );
};

如何在滚动时使用 react-spring 从左到右正确移动 React 组件？

How to properly move a React component from left to right using react-spring on scroll?

reactjs

react-spring