React Motion - это API для анимации компонентов React с реальной физикой.

Есть и другие компоненты, такие как ‹StaggeredMotion /› и ‹TransitionMotion /›, которые очень полезны, но выходят за рамки данной статьи. Мы сосредоточимся на компоненте ‹Motion /›.

Начнем с анимации компонента слева направо по экрану. Мы хотим, чтобы компонент появлялся на месте при запуске нашего веб-приложения. Для этого мы можем использовать состояние и встроенные методы жизненного цикла. Узнайте больше о методах жизненного цикла React здесь.

constructor(props) {
  super(props);
  this.state = { startAnimation: false };
};

Установите начальное состояние в нашем конструкторе на false, чтобы мы могли контролировать, когда запускается анимация.

componentDidMount() {
  this.setState{(startAnimation: !this.state.startAnimation)};
}

Когда вызывается componentDidMount (), состояние переключается, запускается анимация.

Попробуйте поэкспериментировать с setTimeout(() => {toggle()},500);, чтобы настроить анимацию в определенное время.

<Motion 
  style={{ x: spring(this.state.startAnimation ? 0 : -100)}}>
  { x => 
    <h1 style={{transform: `translate3d(${x}px, 0, 0)`}}>
      Hello!
    </h1>
  }
</Motion>

Опора стиля - это то место, где вы устанавливаете начальное и конечное значения для x. У нас есть тернарный оператор, который определяет, равен ли параметр пружины 0 или -100. Значение x возвращается из функции spring и используется в стиле преобразования в теге h1, поэтому перемещается «Hello!» из исходной позиции за экраном -100 в поле зрения 0.

Несколько переменных

<Motion 
  style={{ opacity: spring(this.state.startAnimation ? 0 : 1), 
    y: spring(this.state.startAnimation ? 300 : 0), 
    x: spring(this.state.startAnimation ? -600 : 0, ), 
    scale: spring(this.state.startAnimation ? 4: 1) }}>
{
  ({ x, y, scale, opacity}) =>
    <h1 style={{transform: `translate3d(${x}px, ${y}px, 0)       
      scale(${scale})`, opacity:`${opacity}`}}> 
        Hello!
    </h1>
}
</Motion>

В опоре стиля ‹Motion› вы можете добавить столько переменных, сколько необходимо. Например, вы можете добавить y, непрозрачность и масштаб, если объявите их в функции.

Жесткость и демпфирование

К функции пружины можно добавить дополнительные эффекты для дальнейшего улучшения анимации:

  • жесткость - это скорость, с которой компонент встанет на место.
  • демпфирование - это эффект подпрыгивания. Подумайте, что происходит, когда вы тянете за пружину.

Вы можете проверить, как они выглядят, в этой демонстрации. Ведь увидеть - значит поверить!

<Motion 
  style={{ x: spring(this.state.startAnimation ? 0 : -100, {stiffness: 180, damping: 12})}}>
  { x => 
    <h1 style={{transform: `translate3d(${x}px, 0, 0)`}}>
      Hello!
    </h1>
  }
</Motion>

Ниже приведены общие параметры, предложенные командой React Motion.

export default { 
  noWobble: {stiffness: 170, damping: 26}, // the default
  gentle: {stiffness: 120, damping: 14}, 
  wobbly: {stiffness: 180, damping: 12}, 
  stiff: {stiffness: 210, damping: 20},
};

Надеюсь, этого достаточно, чтобы начать. Помните, что никакие учебные пособия или руководства не дадут опыта экспериментирования ...

Удачи!