Как сделать встряхивание div из стороны в сторону с пружиной реакции - PullRequest
Новая
       22

Как сделать встряхивание div из стороны в сторону с пружиной реакции

0 голосов
/ 24 сентября 2019

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

Я хотел бы переместить 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 для использования?

1 Ответ

1 голос
/ 25 сентября 2019

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

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

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

useSpring({ ..., config: {mass: 1, tension: 500, friction: 10} });
...