Анимированная кнопка с React Spring - PullRequest
Новая
       24

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

2 голосов
/ 12 марта 2019

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

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

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

Спасибо.

Ответы [ 2 ]

4 голосов
/ 13 марта 2019

Что-то вроде этого, вероятно: 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} />

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

3 голосов
/ 13 марта 2019

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

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>
  );
}

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

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

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

...