Блог

Главная - Вопросы по программированию - Анимированная кнопка с помощью React Spring

Анимированная кнопка с помощью React Spring

#react-spring

#react-spring

Вопрос:

Я исходил из фона React-pose и хотел бы попробовать React-spring. У меня есть действительно простой случай, который я хотел бы перенести для использования с React-spring.

У меня есть пример, написанный в Codesanbox с использованием React-pose,https://codesandbox.io/s/4wxzm60nk9

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

Спасибо.

Ответ №1:

Я только вчера создал анимированную кнопку, поэтому переработал ее, чтобы изменить ее размер.

 import React, {useState} from "react";
import { Spring, animated as a } from 'react-spring/renderprops';

const SpringButton = () => {
  const [pressed, setPressed] = useState(false);
  return (
  <Spring native from={{scale: 1}} to={{scale: pressed? 0.8 : 1}}>
    {({scale}) => (
      <a.button 
        style={{
          backgroundColor: 'red', 
          height: '100px', 
          width: '100px', 
          color: 'rgb(255, 255, 255)',
          transform: scale.interpolate(scale => `scale(${scale})`)
          }}
        onMouseDown={() => setPressed(true)}
        onClick={() => setPressed(false)}
        onMouseLeave={() => setPressed(false)}
      >
        Click me
      </a.button>
    )}
  </Spring>
  );
}

Это еще не интерфейс hook, но я думаю, это поможет вам понять, как это работает. В ней также используется более быстрый собственный рендеринг. Обработка события немного отличается от react-pose. И вы также можете настроить конфигурацию, если хотите, чтобы анимация была действительно упругой.

 import {config} from 'react-spring/renderprops';
<Spring config={config.wobbly} ...>

https://codesandbox.io/s/7zlrkv4kjj

Комментарии:

1. Вау! Большое спасибо, Питер! Позже попытаюсь сделать из нее хук. Я также заметил одну вещь: когда вы нажимаете и удерживаете анимированную кнопку в нужном положении и отводите мышь от кнопки, она остается «нажатой», между тем, если вы проделаете то же самое с кнопкой react-spring, она вернется к своей первоначальной форме. Как вы думаете, это связано с тем, как построены две библиотеки? Еще раз спасибо за ответ. Теперь я могу удалить react-pose из своего проекта, ха-ха

2. Именно так я решил обработку событий. Pose обрабатывает событие наведения курсора мыши за пределами кнопки. Я не хочу возиться с ней, поэтому я использовал событие mouseLeave для сброса в исходное состояние. С react-spring вся обработка событий зависит от вашей реализации.

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

Ответ №2:

Вероятно, что-то вроде этого:https://codesandbox.io/s/pyvo8mn5x0

 function App() {
  const [clicked, set] = useState(false)
  const { scale } = useSpring({ scale: clicked ? 0.8 : 1 })
  return (
    <div className="App">
      <animated.button
        onMouseDown={() => set(true)}
        onMouseUp={() => set(false)}
        style={{
          backgroundColor: 'red',
          height: '100px',
          width: '100px',
          color: '#FFF',
          transform: scale.interpolate(s => `scale(${s})`)
        }}
        children="Click me"
      />
    </div>
  )
}

Вы также можете выполнить интерполяцию заранее, если хотите:

 const props = useSpring({ transform: `scale(${clicked ? 0.8 : 1})` })
return <animated.button style={props} />

В отличие от pose, react-spring не включает в себя элементы жестов, для этого он использует интерфейс со сторонними библиотеками. Например: https://github.com/react-spring/react-with-gesture