Анимация нескольких атрибутов одного элемента с различными атрибутами анимации для каждого атрибута элемента в svgjs - PullRequest
Новая
       25

Анимация нескольких атрибутов одного элемента с различными атрибутами анимации для каждого атрибута элемента в svgjs

0 голосов
/ 07 ноября 2019

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

Одна вещь, которую я пробовал (r это rect): 

// horizontal
r.animate({
  duration: Math.random() * 4000 + 1000,
  swing: true,
  times: Number.MAX_SAFE_INTEGER
})
.attr({
  x: width - 10
})
// vertical
r.animate({
  duration: Math.random() * 4000 + 1000,
  swing: true,
  times: Number.MAX_SAFE_INTEGER
})
.attr({
  y: r.y() + (Math.random() * 250) - 125
})

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

Я также пробовал это: 

// horizontal
r.animate({
  duration: Math.random() * 4000 + 1000,
  swing: true,
  times: Number.MAX_SAFE_INTEGER
})
.attr({
  x: width - 10,
  y: r.y() + (Math.random() * 250) - 125
})

Это работает, новыглядит скучно / неловко, потому что петли прозрачны для зрителя.

(Кстати, если вы можете предложить способ, чтобы эти циклы длились вечно, кроме установки times: Number.MAX_SAFE_INTEGER, я был бы обязанпотому что это кажется неаккуратным.)

1 Ответ

1 голос
/ 07 ноября 2019

Вам нужно запланировать анимацию, чтобы она запускалась одновременно. Вы можете сделать это, передав ключевое слово when: 'absolute' в animate(), которое указывает, что бегун должен быть запланирован в абсолютное время на временной шкале. Поскольку оба бегуна (также называемые вызовами animate) относятся к одному и тому же элементу, они планируются на одной временной шкале. Вы также можете использовать now в качестве альтернативы, которая в основном означает: начать прямо сейчас. Но в этом случае может случиться так, что обе анимации будут на расстоянии нескольких миллисекунд.

Также вы можете использовать times: true или times: Infinity или просто позвонить loop(true, true)

r.animate({when: 'absolute', delay: 0, ...}) // 0 is time on the timeline, can be dropped
r.animate({when: 'absolute', delay: 0, ...})

Вы также можете передать это как несколько аргументов и, как я упоминал, использовать loop: 

r.animate(Math.random() * 4000 + 1000, 0, 'absolute').loop(true, true) // loop(times, swing)
...