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

【问题标题】：How to create moving text from right to left using react-spring?如何使用 react-spring 创建从右到左的移动文本？
【发布时间】：2019-06-20 11:46:54
【问题描述】：

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

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

由于我是 react-spring 新手，所以我找不到正确的解决方案！

【问题讨论】：

您的意思是要创建滚动文本？
@PeterAmbruzs 是的！我想要一个滚动文本（从右到左）在我的标题中，它应该在页面呈现时开始移动，并且应该连续移动而不会停止。

标签： reactjs react-spring

【解决方案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

【讨论】：

非常感谢兄弟...效果很好！感谢您花费宝贵的时间。
如何立即开始？

【解决方案2】：

您首先必须将react-spring 安装到您的项目中。

例如，您可以将您的代码包含在 App.js 文件中，如下所示：

import { render } from 'react-dom'
import React, { useState, useCallback } from 'react'
import { useTransition, animated } from 'react-spring'

const pages = [
  ({ style }) => <animated.div style={{ ...style, background: 'lightpink' }}>A</animated.div>,
  ({ style }) => <animated.div style={{ ...style, background: 'lightblue' }}>B</animated.div>,
  ({ style }) => <animated.div style={{ ...style, background: 'lightgreen' }}>C</animated.div>,
]

export default function App() {
  const [index, set] = useState(0)
  const onClick = useCallback(() => set(state => (state + 1) % 3), [])
  const transitions = useTransition(index, p => p, {
    from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
    enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
    leave: { opacity: 0, transform: 'translate3d(-50%,0,0)' },
  })
  return (
    <div className="simple-trans-main" onClick={onClick}>
      {transitions.map(({ item, props, key }) => {
        const Page = pages[item]
        return <Page key={key} style={props} />
      })}
    </div>
  )
}

render(<App />, document.getElementById('root'))

我希望这对你有用。

【讨论】：

感谢妈妈的回复！实际上它只在onClick上起作用，我想让文本在我的标题中滚动（从右到左）而不停止。
一旦页面被渲染，它应该开始从右向左移动！