Как создать движущийся текст справа налево с помощью ответной пружины? - PullRequest
Новая
       15

Как создать движущийся текст справа налево с помощью ответной пружины?

0 голосов
/ 20 июня 2019

Перемещение текстовой анимации с использованием реагирующей пружины?

Я занимаюсь разработкой веб-сайта, в котором в качестве внешнего интерфейса используется responsejs. В заголовке я хочу автоматически перемещать текст справа налево, но я хочу анимировать его только с помощью response-spring! кто-нибудь может решить мою проблему?

Так как я новичок в реагирующей пружине, я не могу найти правильное решение для этого!

Ответы [ 2 ]

0 голосов
/ 20 июня 2019

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

0 голосов
/ 20 июня 2019

Сначала вы должны установить 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'))

Я надеюсь, что эта работа для вас.

...