标签: react-spring

我正在使用react-spring 中的视差来创建视差效果。我知道可以使用其父级的高度来设置其面积。然而，此解决方案在滚动时通过保持 和 在屏幕上可见而导致奇怪的行为。我在这里有几个问题：

1. 我怎样才能以正常的方式设置这个布局？
2. 我是否需要将 和 放置在具有固定高度的 ParallaxComp 内部（我希望有更好的解决方案）？
3. 有没有办法根据里面的内容来假设其高度，而不是使用道具因子？

先感谢您。

代码沙箱

应用程序.js

import React from "react";

import ParallaxComp from "./ParallaxComp";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <nav style={{ height: "5rem", background: "purple", color: "white" }}>
        Nav
      </nav>
      {/* <main style={{ height: "100%" }}> */}
      <main style={{ height: "100vh" }}>
        <ParallaxComp />
      </main>
      <footer style={{ height: "5rem", background: "blue", color: "white" }}>
        Footer
      </footer>
    </div>
  );
}

视差Comp.js

import React from "react";
import { …

我正在尝试更改默认淡入和淡出过渡的速度，但文档似乎没有提到如何这样做：

<Transition
  items={show}
  from={{ opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}>
  {show => show && (props => <div style={props}>??</div>)}
</Transition>

鉴于此代码，我将如何使淡入/淡出动画更快或更慢？

我尝试这样做（如下），但最终完全破坏了过渡。动画不再起作用：

from={{ opacity: 1, transitionDelay: "5000ms" }}
enter={{ opacity: 1, transitionDelay: "5000ms" }}
leave={{ opacity: 0, transitionDelay: "5000ms" }}

有任何想法吗？

我正在尝试react-spring在我的网站上创建视差效果。我希望视差容器成为整个网站的背景，并在底部加上一个 100vh“页脚”。这是我的意思的简单图表：

我的问题是，根据react-spring parallax docs，视差容器需要一个pages属性，该属性“确定每个页面占用100％可见容器的内部内容的总空间”。

根据我对此的理解以及我的测试，这意味着我必须根据 100% 视口高度的划分显式设置视差容器的整个高度。这意味着我不能只让视差容器包含我网站的内容，因为它没有预设高度，更不用说高度除以 100vh。

所以我的问题是，我可以让视差容器react-spring完全包含我的整个网站的内容，并在底部加上 100vh 吗？

这是我的问题的沙箱演示，pages在第 29 行设置了视差属性：https://codesandbox.io/embed/react-spring-pageheight-question-c12er

我有一个组件，当animatedprop 设置为 true时会“震动” 。这是它的样子

const Shake = ({ animate, children, ...props }) => {
  const { x } = useSpring({
    from: { x: 0 },
    x: animate ? 1 : 0,
    config: { mass: 12, tension: 500, friction: 80 },
  });
  return (
    <animated.div
      style={{
        transformOrigin: 'center center',
        transform: animate && x
          .interpolate({
            range: [0, 0.5, 1],
            output: [0, 2, 0],
          })
          .interpolate((x) => `rotate(${x}deg)`),
      }}
      {...props}
    >
      {children}
    </animated.div>
  );
};

我之前测试过的动画或多或少只是从一种状态转换到另一种状态，比如从 0 到 1 的不透明度。用 react-testing-library …

我有带有自定义着色器和缓冲区几何形状的简单点网格。

几何图形具有位置、大小和颜色属性。指针悬停时，悬停的顶点会变成红色。

到目前为止，一切都很好。

现在我想为悬停顶点的颜色变化设置动画。

以下是点网格的代码片段：

const Points = (
  props = { hoveredIndex: null, initialCameraZ: 0, array: [], sizes: [] }
) => {
  const [_, setHover] = useState(false);

  const vertices = new Float32Array(props.array);
  const sizes = new Float32Array(props.sizes);
  const _colors = genColors(props.sizes.length); // returns [] of numbers.

  const uniforms = useMemo(() => {
    return {
      time: { type: "f", value: 0.0 },
      cameraZ: { type: "f", value: props.initialCameraZ }
    };
  }, [props.initialCameraZ]);

  // trying to use react-spring here
  const …

我目前正在使用react-spring动画库。

在文档中的某些CodeSandbox演示（例如https://codesandbox.io/embed/j150ykxrv）中，导入了一些称为“动画”的东西：

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

然后像这样使用：

  {this.state.items.map(item => styles => <animated.li style={{ ...defaultStyles, ...styles }}>{item}</animated.li>)}

在其他示例中，未使用：

import { Spring } from 'react-spring'

<Spring
  from={{ opacity: 0 }}
  to={{ opacity: 1 }}>
  {props => <div style={props}>??</div>}
</Spring>

我在文档中找不到有关此功能或使用原因的任何提及，因为您似乎可以通过将动画样式道具传递到组件中来进行动画处理。

文档中的用途是否是旧版本的一部分？

我已经阅读了整个react-spring文档，似乎没有明确的方法来做到这一点。

我的尝试：

import React, { useRef, useState } from "react"
import { animated, useSpring } from "react-spring"

const App = () => {
    const scrollDestinationRef = useRef()

    const [elementScroll, setElementScroll] = useState(false)

    const buttonClickHandler = () => setElementScroll(prevState => !prevState)

    const scrollAnimation = useSpring({
        scroll: elementScroll
            ? scrollDestinationRef.current.getBoundingClientRect().top
            : 0
    })

    return (
        <main>
            {/* Click to scroll to destination */}
            <animated.button
                onClick={buttonClickHandler}
                scrollTop={scrollAnimation.scroll}
                style={{
                    height: "1000px",
                    width: "100%",
                    backgroundColor: "tomato"
                }}
            >
                Scroll to destination
            </animated.button>

            {/* …

我正在尝试解决图像滑块中的一些性能问题，我发现使用它animated.img比使用内部的某些反应组件产生更好的性能animated.div。

React 组件显然不仅仅是为了它的乐趣而放置在里面，但幸运的是，react-spring 允许您通过执行以下操作来为自定义组件设置动画

const AnimatedComponent = animated(Component)

根据文档

但我该如何使用它呢？我一直在尝试，但 Typescript 只是给出了一些关于缺少 269 种不同类型的道具的非常无用的信息。

编辑添加错误

vscode 显示了 typescript 错误，但这可能并不重要。由于我不知道要传递哪些道具才能为组件设置动画，因此我对它不起作用并不感到惊讶，但错误消息并不能真正帮助确定我需要做什么。

' is missing the following properties from type 'AnimatedProps<{ title: string | FluidValue<string, any>; id: string | FluidValue<string, any>; article?: { title: string; metaTitle: string; metaDescription: string; description: string; showRelatedArticles: boolean; elements: ({ ...; } | ... 4 more ... | { ...; })[]; } | null | undefined; ... 269 more ...; key?: st...': …

我有一个动画，可以很好地从右侧移动项目并从左侧移动项目。我想在单击后退按钮时执行相反的操作，类似于从移动应用程序中的导航堆栈中弹出视图。我的代码如下，如何让动画在单击按钮时向后运行？我正在使用 React 17.0.2 和 react-spring 9.2.3 。

import React, { useState, useCallback, CSSProperties, useEffect } from "react";
import {
  useTransition,
  animated,
  AnimatedProps,
  useSpringRef,
} from "react-spring";

import styles from "../styles/components/carousel.module.css";

const Carousel: React.FC = () => {
  const [index, set] = useState(0);
  const onClick = useCallback(() => set((state) => (state + 1) % 6), []);
  const transRef = useSpringRef();
  const transitions = useTransition(index, {
    ref: transRef,
    keys: null,
    from: { opacity: 0, transform: "translate3d(100%,0,0)" },
    enter: { opacity: 1, transform: …

我的 webpack.config.js

const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const googleConfig = require("./google.config.json");

module.exports = (env, args) => {
  const evnConfig = require("./config.json")[args.mode];
  const timestamp = Date.now();

  return {
    entry: {
      main: "./front-end/index.js",
      rightpanel: "./front-end/rightPanelIndex.js",
      worklogs: "./front-end/worklogsIndex.js",
      leftpanel: "./front-end/leftPanelIndex.js",
      timelog: "./front-end/timelogIndex.js",
      confirm: "./front-end/confirmIndex.js",
    },
    output: {
      path: path.resolve(__dirname, "public"),
      filename: `js/[name].bundle.js`,
    },
    stats: { warnings: false },
    resolve: {
      extensions: [".js", ".jsx", ".json"],
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: { …