Перемещение текстовой анимации с помощью React-Spring?
Я разрабатываю веб-сайт, используя responsejs в качестве интерфейса. В заголовке я хочу автоматически переместить текст справа налево, но я хочу оживить это только с помощью реакции-пружины! кто-нибудь может решить мою проблему?
Поскольку я новичок в react-spring, я не могу найти правильного решения для этого!
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
Сначала вам нужно установить 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'))
Надеюсь, это сработает для вас.
