画布动画点将移至mouseleave上的原始位置

Question

我创建了一个画布动画，当鼠标悬停在画布上时，线条会扭曲。将1个点拉向鼠标，将另一个点推开。

我正在努力的动画的某些方面，我想为被拉向鼠标的线条添加动画效果，现在这只是瞬间，鼠标离开画布时反之亦然，它们只是收到了最初的coördinates这使得它非常即时。我通过使用gsap.to进行了尝试，但似乎无法弄清楚如何使用它在一行中设置两个单独的点。

我想补充的一件事是，鼠标离某条线越远，我希望该线越短。现在，一旦鼠标悬停在画布上，所有行的长度均相等。

$(document).ready(function () {
    initContainerCanvas();
});

$(window).resize(function () {
    initContainerCanvas();
});

function initContainerCanvas() {
    var canvas = document.querySelector('.container-animation');

    canvas.setAttribute('width', window.getComputedStyle(canvas, null).getPropertyValue("width"));
    canvas.setAttribute('height', window.getComputedStyle(canvas, null).getPropertyValue("height"));


    var Line = function() {
        this.point1x = 0;
        this.point1y = 0;

        this.point2x = 0;
        this.point2y = 0;

        this.initialpoint1x = 0;
        this.initialpoint1y = 0;

        this.initialpoint2x = 0;
        this.initialpoint2y = 0;

        this.lineWidth = 0;

        this.color = 0;
    };

    Line.prototype.draw = function (context) {
        context.save();
        context.beginPath();

        context.moveTo(this.point1x, this.point1y);
        context.lineTo(this.point2x, this.point2y);

        context.strokeStyle = this.color;
        context.lineWidth = this.lineWidth;
        context.lineCap = "round";
        context.stroke();

        context.closePath();
        context.restore();
    };

    var context = canvas.getContext('2d');

    var lines = [];
    var mouse = {x: 0, y: 0};

    var mouseOver = false;
    var mouseMoved = false;
    var column = 4;

    for ( var i = 1; i < 10; i++) {
        lines[i] = [];
        var xa = 0;
        var ya = 0;

        for ( var j = 0; j < column; j++ ) {
            xa += 20;
            ya = (i * 20);

            var line = new Line();
            line.point1x = xa;
            line.point1y = ya;

            line.initialpoint1x = xa;
            line.initialpoint1y = ya;

            line.point2x = xa;
            line.point2y = ya;

            line.initialpoint2x = xa;
            line.initialpoint2y = ya;

            line.color = '#19FDB7';
            line.lineWidth = 10;
            lines[i][j] = line;
        }

        column++;
    }
    console.log(lines);

    gsap.ticker.add(draw);

    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        if(mouseOver && mouseMoved){
            calculateLinePosition();
            mouseMoved = false;
        }
        var column = 4;
        for (var i = 1; i < 10; i++) {
            for (var j = 0; j < column; j++) {
                var line = lines[i][j];
                line.draw(context);
            }

            column++;
        }
    }

    function calculateLinePosition() {
        var column = 4;
        for (var i = 1; i < 10; i++) {
            for (var j = 0; j < column; j++) {
                var line = lines[i][j];
                var radius = 20;
                var dx = mouse.x - line.initialpoint1x;
                var dy = mouse.y - line.initialpoint1y;
                var dist = Math.sqrt(dx * dx + dy * dy) || 1;
                var angle = Math.atan2(dy, dx);

                line.point1x = line.initialpoint1x - Math.cos(angle) * radius;
                line.point1y = line.initialpoint1y - Math.sin(angle) * radius;

                line.point2x = line.initialpoint2x + Math.cos(angle) * radius;
                line.point2y = line.initialpoint2y + Math.sin(angle) * radius;
            }

            column++;
        }
    }

    $(canvas).mousemove(function (e) {
        var rect = canvas.getBoundingClientRect();
        mouse.x = e.clientX - rect.left;
        mouse.y  = e.clientY - rect.top;

        mouseMoved = true;
    });

    $(canvas).mouseenter(function () {
        mouseOver = true;
    });

    $(canvas).mouseleave(function () {
        mouseOver = false;

        var column = 4;
        for (var i = 1; i < 10; i++) {
            for (var j = 0; j < column; j++) {
                var line = lines[i][j];

                line.point1x = line.initialpoint1x;
                line.point1y = line.initialpoint1y;
                line.point2x = line.initialpoint2x;
                line.point2y = line.initialpoint2y;

            }

            column++;
        }
    });
}

这是我到目前为止的内容：https://codepen.io/geordi-feijens/pen/abOMKKY

Answer 1

键是在draw和mouseleave函数内部使用补间，而不仅仅是设置值。确保将overwrite设置为true或auto，因为false的默认值不会有问题。

例如，这是在draw函数中进行设置的方式：

gsap.to(line, {
  duration: 0.2, 
  overwrite: 'auto',
  point1x: line.initialpoint1x - Math.cos(angle) * radius,
  point1y: line.initialpoint1y - Math.sin(angle) * radius,
  point2x: line.initialpoint2x + Math.cos(angle) * radius,
  point2y: line.initialpoint2y + Math.sin(angle) * radius
});

https://codepen.io/GreenSock/pen/oNXOvoy?editors=0010

不需要jQuery：）

顺便说一句，如果您在the GreenSock forums上发布这样的GSAP问题，您可能会得到更快的响应，并且会得到更多人的答复。

还有一堆现有的线程like this one可以满足您的要求。