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}, };
Надеюсь, этого достаточно, чтобы начать. Помните, что никакие учебные пособия или руководства не дадут опыта экспериментирования ...
Удачи!