如何将数据从样式组件发送到函数？

发布于 2025-02-02 18:19:38 字数 1060 浏览 2 评论 0原文

我正在尝试制作一个滚动动画，例如此组件和反应。我的策略是降低变换的价值：比例（1），以便将用户向下滚动图像宽度和高度，并将获得类似的效果。为此，我需要访问该属性并将其在功能中使用，然后将其在使用效果挂钩中使用。我检查了样式组件的文档，但我想我缺少一些东西。这是代码：

const AnimationImg = styled.img.attrs((props) => ({ src: props.src }))`
  position: absolute;
  top: 0;
  object-fit: cover;
  transform: scale(1);
  transform-origin: 49% 50%;
`;
const Animation = () => {
  //Scroll positionu yakalamami sagliyor.
  const [scrollPosition, setScrollPosition] = useState(0);
  const [zoom, setZoom] = useState(1);

  const handleScroll = () => {
    const position = window.pageYOffset;
    setScrollPosition(position);
  };

  const handleZoom = () => {
    if (scrollPosition >= 2000 && handleScroll) {
      // function here
    }
  };

Zoom Logic：

const handleZoom = () => {
    if (scrollPosition >= 2000 && handleScroll) {
      setZoom(zoom - 0.001);
    }
  };

原文

I am trying to make a scrolling animation something like this using styled components and react. My strategy is to reduce the value of transform: scale(1) so that as the user scrolls down the image width and height will be reduced and similar effect will be obtained. To do that I need to access that property and use it in a function and then use it in an useEffect hook. I checked the documentation of styled components yet I guess I am missing something. Here is the code:

const AnimationImg = styled.img.attrs((props) => ({ src: props.src }))`
  position: absolute;
  top: 0;
  object-fit: cover;
  transform: scale(1);
  transform-origin: 49% 50%;
`;
const Animation = () => {
  //Scroll positionu yakalamami sagliyor.
  const [scrollPosition, setScrollPosition] = useState(0);
  const [zoom, setZoom] = useState(1);

  const handleScroll = () => {
    const position = window.pageYOffset;
    setScrollPosition(position);
  };

  const handleZoom = () => {
    if (scrollPosition >= 2000 && handleScroll) {
      // function here
    }
  };

zoom logic:

const handleZoom = () => {
    if (scrollPosition >= 2000 && handleScroll) {
      setZoom(zoom - 0.001);
    }
  };

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉世弥音 2025-02-09 18:19:38

由于Zoom是从scrollPosition状态得出的，因此您可以在组件渲染时重新计算它，并将其作为支撑物传递给样式的组件。使用内部尺度插值使用Zoom。

const AnimationImg = styled.img`
  position: absolute;
  top: 0;
  object-fit: cover;
  transform: scale(${({ zoom }) => zoom});
  transform-origin: 49% 50%;
`;

const Animation = () => {
  const [scrollPosition, setScrollPosition] = useState(0);
  
  const zoom = scrollPosition >= 2000 ? zoomFunction(scrollPosition) : 1;
  
  useEffect(() => {
    const handleScroll = () => {
      setScrollPosition(window.pageYOffset);
    };
    
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  
  return (
    <AnimationImg zoom={zoom} />
  );
}

Since zoom is derived from the scrollPosition state, you can recompute it whenever the component renders, and pass it as a prop to the styled component. Use interpolation inside scale to use the zoom.

const AnimationImg = styled.img`
  position: absolute;
  top: 0;
  object-fit: cover;
  transform: scale(${({ zoom }) => zoom});
  transform-origin: 49% 50%;
`;

const Animation = () => {
  const [scrollPosition, setScrollPosition] = useState(0);
  
  const zoom = scrollPosition >= 2000 ? zoomFunction(scrollPosition) : 1;
  
  useEffect(() => {
    const handleScroll = () => {
      setScrollPosition(window.pageYOffset);
    };
    
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  
  return (
    <AnimationImg zoom={zoom} />
  );
}

回复收藏 0 原文

~没有更多了~