SVG трансформируется с anime.js - PullRequest
Новая
       37

SVG трансформируется с anime.js

0 голосов
/ 10 ноября 2018

Я пытаюсь создать SVG-анимацию, где сначала я рисую анимацию в Adobe Illustrator, затем получаю код и анимирую его с помощью anime.js.

Я анимирую (изменяю) только атрибут "d" в SVG. Я столкнулся с проблемой, такой же, как и проблема в учебнике, который я читал:

учебное пособие по YouTube (19:20)

Кажется, мой SVG-код не экспортируется должным образом или я что-то не так делаю с точками привязки. 

StartUpTimeline.add({
		targets: morph,
		d: [
			{ value: 'M0,0,1,360S184,253,440,254c245,1,346,236,520,236,182,0,277-189,559-189,183,0,402,100,402,100V1Z' },
		],
		easing: 'easeInQuint',
		duration: 1500,
	})
<svg id="morph" height="100%" width="100%" viewbox="0 0 1920 1080" preserveAspectRatio="none">	
      <path class="morph" fill="#002e3a" 
			d="M0,0H1S184-1,440,0C685,1,786,0,960,0c182,0,246,1,528,1h433Z"/>
</svg>

1 Ответ

0 голосов
/ 26 марта 2019

У меня возникла похожая проблема с беспорядочными переходами при переходе между SVG, созданными в Adobe Illustrator.

Я решил, убедившись, что:

  1. Пути имеют одинаковое количество точек привязки. (Вы можете проверить это в AI, открыв окно информации о документе и выбрав «Объекты».)

  2. Пути прорисовываются в одном направлении, начиная с одного угла. В противном случае вы получите пересечение точек во время морфа, так как первый узел первой фигуры перемещается в положение первого узла второй фигуры и т. Д.

Вот демоверсия . 

let shapes = [
    {
        d: "M1037.5,253.5c-159.2-139.1-508-173-508-173l-444,899l737-253l262,328C1084.5,1054.5,1187.2,384.3,1037.5,253.5z"
    },
    {
        d: "M926.5,301.5c-159.2-139.1-793-135-793-135l38,925l244-330l606,354C1021.5,1115.5,1076.2,432.3,926.5,301.5z"
    }
]


var morph = anime({
    targets: '.morph-path',
    d: [
        {value: shapes[0].d},
        {value: shapes[1].d}
    ],
    duration: 5000,
    direction: 'alternate',
    autoplay: true,
    easing: 'linear',
    elasticity: 100,
    loop: true
});

Я нашел этот урок полезным.

...