Как реализовать конструкцию с реагирующей пружиной? - PullRequest
Новая
       14

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

0 голосов
/ 15 ноября 2018

В репозитории проекта в приложении JS-файлы установлено приложение response-redux с CSS.Теперь я должен анимировать изображения с помощью мыши, как на этом веб-сайте: https://www.madwell.com/

Компонент изначально был функциональным компонентом, и я изменил его на компонент на основе классов следующим образом:

`` `

class BannerContainer extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      x: 0,
      y: 0
    };

    this.handleMouseMove = this.handleMouseMove.bind(this);
  }

  componentDidMount(){
    window.addEventListener("mousemove", this.handleMouseMove);
  }

  componentWillUnmount(){
    window.removeEventListener('mousemove', this.handleMouseMove);
  }

  handleMouseMove({ x, y }){
    this.setState({
      x : x / window.innerWidth,
      y : y / window.innerHeight
    })
  }

  render(){
  const { banner = {} } = this.props;

  const {
    title = '&nbsp;<br>&nbsp;',
    text = '&nbsp;<br>&nbsp;',
    image__google_350x80 = '',
    image__app_350x80 = '',
    image__bg1_1166x1878 = '',
    image__bg2_961x1782 = '',
    image__curve_730x151 = ''
  } = banner;

  return (
    <Container>
      <BGPatch>
        {console.log(this.state.x , this.state.y)}
        <img src={'/images/bg_purple.jpg'} alt="" />
      </BGPatch>

` ``

В этом примере я могу прослушать событие mouse-move и получить координаты x & y соответственно.Но теперь я должен использовать библиотеку react-spring для ее реализации, так как мне это сделать?Также CSS должен быть написан в отдельном файле JS для каждого компонента, где, как в примере react-spring, они также напрямую изменяют opacity или trasform в компоненте Spring, чего я не хочу

пример компонента пружины, приведенный в их документах 

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

1 Ответ

0 голосов
/ 15 ноября 2018

Эффекты параллакса относительно легко сделать, если у вас есть координаты мыши, вот пример с похожим эффектом: https://twitter.com/0xca0a/status/1058505720574959616

Он использует зацепы, но то же самое относится и к обычной пружине.Хотя это, вероятно, даже хороший пример, потому что он не рендерит компонент при перемещении мыши, что очень быстро.Вы не будете использовать вращение в вашем случае, переводит, я думаю, но дело в том, что вы получаете x / y и используете его для интерполяции ваших изображений в положение.

РЕДАКТИРОВАТЬ: я раздвоил пример, этоверсия использует переводы: https://codesandbox.io/embed/r5x34869vq

...