Question

有人知道该动画如何构建，使用哪个js框架或可以帮助我了解重新创建类似内容的东西吗？

谢谢！

Answer 1

我无法确定该动画是用哪个库构建的，因为它被隐藏在React绑定代码中，但是我可以向您展示一种与Paper.js类似的方法。

通过观看动画，似乎规则是：

如果圆与圆之间的距离一定，圆会受到鼠标指针的影响
最接近鼠标指针的圆圈是：
- 它变得更大
- 离窗口中心越远。

这是Sketch的实现。

//
// CONSTANTS
//

// user defined
var ROWS_COUNT                = 10;  // number of rows in the grid
var COLUMNS_COUNT             = 10;  // number of columns in the grid
var MOUSE_INFLUENCE_RADIUS    = 350; // maximal distance from mouse pointer to be influenced
var INFLUENCE_SCALE_FACTOR    = 1;   // maximal influence on point scale
var INFLUENCE_POSITION_FACTOR = 15;  // maximal influence on point position

// computed
var STEP_X = view.bounds.width / COLUMNS_COUNT;
var STEP_Y = view.bounds.height / ROWS_COUNT;
var RADIUS = Math.min(STEP_X, STEP_Y) * 0.1;


//
// ITEMS
//

// create a circle for each points in the grid
var circles = [];
for (var i = 0; i < COLUMNS_COUNT; i++)
{
    for (var j = 0; j < COLUMNS_COUNT; j++)
    {
        var gridPoint = new Point((i + 0.5) * STEP_X, (j + 0.5) * STEP_Y);

        circles.push(new Path.Circle({
            center     : gridPoint,
            radius     : RADIUS,
            fillColor  : 'black',
            // matrix application is disabled in order to be able to manipulate scaling property
            applyMatrix: false,
            // store original center point as item custom data property
            data       : {gridPoint: gridPoint}
        }));
    }
}


//
// EVENTS
//

function onMouseMove(event)
{
    for (var i = 0; i < circles.length; i++)
    {
        var circle    = circles[ i ];
        var gridPoint = circle.data.gridPoint;
        var distance  = event.point.getDistance(gridPoint);

        // only influence circles that are in mouse influence zone
        if (distance <= MOUSE_INFLUENCE_RADIUS)
        {
            var influence = 1 - distance / MOUSE_INFLUENCE_RADIUS;

            // the closest the circle is from the mouse pointer
            // the bigger it is
            circle.scaling = 1 + influence * INFLUENCE_SCALE_FACTOR;
            // the farthest it is from view center
            circle.position = gridPoint + (gridPoint - view.center).normalize(influence * INFLUENCE_POSITION_FACTOR);
        }
        else
        {
            // reset circle state
            circle.scaling  = 1;
            circle.position = gridPoint;
        }
    }
}

Answer 2

您的问题太开放了。但是有些库可以为您节省很多时间：

还有很多，但这取决于您的需求。

如何创建此画布动画JS

2 个答案: