gsap мышь трейлинг на v3 - PullRequest
Новая
       1

gsap мышь трейлинг на v3

0 голосов
/ 10 января 2020

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

            const createLine = (leader, i) => {
            let line = document.createElementNS(svgns, 'line');
            line.setAttribute('data-svg-origin', '0 0');
            rootSvg.appendChild(line);

            gsap.set(line, { x: -15, y: -15, alpha: (5 - i) / 5 });

            let posX = gsap.getProperty(line, 'x');
            let posY = gsap.getProperty(line, 'y');

            gsap.to(line, 1000, {
                x: '+=1',
                y: '+=1',
                repeat: -1,
                modifiers: {
                    x: () => {
                        let x = posX + (leader.x - posX) * ease;
                        line.setAttribute('x2', leader.x - x);
                        return x;
                    },
                    y: () => {
                        let y = posY + (leader.y - posY) * ease;
                        line.setAttribute('y2', leader.y - y);
                        return y;
                    }
                }
            });

            return { x: posX, y: posY };
        };

Но это приводит к очень ошибочному выводу. Как я могу сделать это с помощью gsap v3.

1 Ответ

1 голос
/ 11 января 2020

Вы используете значения c внутри функций-модификаторов, тогда как оригинал извлекает значения при каждом обновлении объектов. Используйте gsap.getProperty() внутри функций модификаторов для и line и leader, и оно будет вести себя так, как вы хотите: Демо

...