如何使用react-spring创建从右到左移动的文本？

Question

使用react-spring移动文本动画？

我正在开发一个使用reactjs作为前端的网站，在标题中我想自动从右到左移动一些文本，但我想只用react-spring来制作动画！谁能解决我的问题吗？

由于我是react-spring新手，我找不到这个问题的正确解决方案！

Answer 1

React-spring 是基于物理的，这种类型的动画并不是它的真正优势。我会做这样的事情。

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

const TextScroller = ({ text }) => {
  const [key, setKey] = useState(1);

  const scrolling = useSpring({
    from: { transform: "translate(60%,0)" },
    to: { transform: "translate(-60%,0)" },
    config: { duration: 2000 },
    reset: true,
    //reverse: key % 2 == 0,
    onRest: () => {
      setKey(key + 1);
    }
  });

  return (
    <div key={key}>
      <animated.div style={scrolling}>{text}</animated.div>);
    </div>
  );
};

export default TextScroller;

它还有改进的空间。不处理文本长度。可以禁用滚动条。但我留给你一些东西。:)

工作演示：https://codesandbox.io/s/basic-text-scroller-with-react-spring-siszy