gsap 鼠标尾随 v3

Question

我正在尝试使用 gsap v3 获得 this pen 中显示的效果，但无法使其工作。提供的笔是旧版本的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 完成这项工作。

Answer 1

您在修饰函数内部使用静态值，而原始函数在每次更新时从对象中提取值。使用修饰函数的 gsap.getProperty() inside both line 和 leader 它将表现如您所愿：Demo

gsap 鼠标尾随 v3

gsap mouse trailing on v3

javascript

gsap