Разбить анимацию на шаги
В компоненте у меня есть анимация, по пути свг рисуется линия. Она разбита на несколько шагов, с этим все хорошо, работает норм.
const path_length = anime.setDashoffset(svgPath);
const step1 = 3600;
const step2 = 2000;
const step3 = 400;
const line123 = anime.timeline({
easing: 'easeInOutSine',
duration: 8500,
loop: false,
});
line123
.add({
targets: svgPath,
strokeDashoffset: {
value: [path_length, step1],
easing: 'easeInOutSine',
duration: 2500
}
})
.add(
{
targets: svgPath,
strokeDashoffset: {
value: [step1, step2],
easing: 'easeInOutSine',
duration: 2500
}
},
'+=1000'
)
.add(
{
targets: svgPath,
strokeDashoffset: {
value: [step2, step3],
easing: 'easeInOutSine',
duration: 2500
}
},
'+=1000'
)
.add(
{
targets: svgPath,
strokeDashoffset: {
value: [step3, 0],
easing: 'easeInOutSine',
duration: 1000
}
},
'+=1000'
);
Теперь мне нужно, чтобы впереди этой линии, на её так сказать "голове", "ехал" некий элемент. Элемент есть, провести его по всей линии получается с помощью этого:
const marker_path = anime.path('.wrapper path');
anime({
targets: '.wrapper .placemark123',
translateX: marker_path('x'),
translateY: marker_path('y'),
easing: 'easeInOutSine',
duration: 8500
});
Задача состоит в том, чтобы метка также двигалась вместе с линией. По тем же шагам, с теми же задержками. Помогите пжлст реализовать это.