SVG форма морфируется со значением, а не со временем - PullRequest
Новая
       52

SVG форма морфируется со значением, а не со временем

0 голосов
/ 03 мая 2020

Я создаю игру, используя Javascript и snap.svg

До этого я создавал множество интерфейсов и интерфейсов с помощью snap.svg и широко использовал анимацию движения, предоставляемую функцией animate. Это включает анимацию перехода между двумя фигурами с одинаковым количеством вершин. Вопрос в том, могу ли я переключаться между двумя путями SVG, используя значение, а не время? Я хочу преобразовать две фигуры, вставив свое собственное значение интерполяции, а именно: morph (PATH_A, PATH_B, 0.76), тогда оно должно быть 0,76 для пути от A к B.

Мне кажется, эта функциональность уже должна существовать, поскольку это то, что происходит с SVG с каждым шагом по времени? Как мне получить доступ к этой нижней функции?

С уважением, Дейл

1 Ответ

1 голос
/ 05 мая 2020

Есть несколько разных, немного хакерских способов сделать это. Вероятно, самое простое - сделать так, чтобы функция замедления анимации возвращала желаемое значение, и не тратьте время. Таким образом, это будет выглядеть примерно так: 

var s = Snap("#svg");
var d1 = "M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6 46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z";

var d2 = "M179.4,83.5l62.4-11.8c15.3,43.4-76,102.6-22.6,111.5c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C250.6,296.7,52.4,259.2,179.4,83.5z"

var path = s.path(d1)

function animatePartial( val ) {
    var a = Snap.animation({ d: d2 }, 0, function(n) { return val })
    path.animate(a)
}

animatePartial(0.1)

setTimeout( function() { animatePartial(0.9) }, 1000 )

Таким образом, в приведенном выше примере будет отображаться процент анимации со значением от 0 до 1, являющимся началом / концом.

jsfiddle

...