Как заставить div трястись из стороны в сторону с помощью React Spring

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

Я хотел бы, чтобы div двигался вправо, затем назад, чтобы начать, затем вправо, но не так далеко, назад, чтобы начать, вправо, но не так далеко снова и, наконец, обратно, чтобы начать. Точно так же, как пружина, которую натягивают, а когда ее отпускают, она возвращается в исходное положение.

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

Редактировать: пока у меня есть эта анимация, и она работает, но кажется очень бессвязной.

const shake = useSpring({ 
    from: { "margin-left": 0 },
    to: [
        { "margin-left": 30 },
        { "margin-left": 0 },
        { "margin-left": 20 },
        { "margin-left": 0 },
        { "margin-left": 10 },
        { "margin-left": 0 }
    ],
    config: {
        mass: 1,
        tension: 500,
        friction: 10
    }
});

В настоящее время это явно три движения, могу ли я уменьшить задержку между движениями, чтобы она выглядела как одно движение?

Остается ли margin лучшим свойством CSS?


reactjs react-spring
person Exitialis    schedule 24.09.2019    source источник
comment
Вопрос слишком широк... Поскольку SO не является службой кодирования, вам следует попробовать создать макет, показать некоторые попытки и спросить, как анимировать конкретный div, см. Как создать минимальный воспроизводимый пример   -  person Dennis Vash    schedule 24.09.2019
comment
Извините, я добавил то, что у меня есть на данный момент   -  person Exitialis    schedule 25.09.2019

Ответы (1)


arrow_upward
0
arrow_downward

НАЧАЛО ОБНОВЛЕНИЯ

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

export default function App() {
  const { x } = useSpring({
    from: { x: 0 },
    to: { x: 1 }
  });

  return (
    <div className="App">
      <animated.div
        style={{
          transform: x
            .interpolate({
              range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
              output: [180, 220, 180, 220, 180, 220, 180, 200]
            })
            .interpolate(x => `translate3d(${x}px, 0px, 0px)`)
        }}
      >
        Shake
      </animated.div>
    </div>
  );
}

https://codesandbox.io/s/awesome-framework-go5oh?file=/src/App.js:103-609

ОБНОВЛЕНИЕ КОНЕЦ*

Вы можете добиться упругого эффекта. Есть 3 переменные, управляющие анимацией на основе пружины:

  • масса
  • трение
  • напряжение

Вы можете поиграть с розовым квадратом здесь: https://www.react-spring.io/docs/hooks/api Я рекомендую низкую массу и трение и высокое натяжение. Вы можете установить эти переменные в каждом типе анимации. Например:

useSpring({ ..., config: {mass: 1, tension: 500, friction: 10} });
person Peter Ambruzs    schedule 25.09.2019
comment
Спасибо, это сделало его лучше, я обновил вопрос тем, что у меня есть. Вы знаете, что я мог бы изменить, чтобы это казалось единым движением и менее бессвязным? - person Exitialis; 25.09.2019
comment
Как насчет изменения значения «to» на один параметр вместо массива. В моем решении движение вперед и назад вызвано пружинной анимацией. Вы должны определить только два крайних положения. И вы должны использовать встроенные стили с camelCase, например: from: { marginLeft: 0 } - person Peter Ambruzs; 25.09.2019