开始使用 javascript 中的动画排版/粒子（将粒子映射到单词）？

Question

好的，所以我在 HTML 和 CSS 方面有很多经验，并且在 Javascript 方面有一些经验（我可以编写基本函数并用类似的语言编写过代码）。

我正在寻找开始一些视觉项目，并且对进入粒子系统特别感兴趣。我有一个类似于 Codecademy 的名称生成器的想法（https://www.codecademy.com/courses/animate-your-name/0/1），其中粒子被映射到一个单词并在悬停时移动。似乎 alphabet.js 是 Codecademy 演示背后的真正内容，但我无法准确理解它们是如何将粒子映射到单词等的。

我已经完成了一些基本教程，只是在画布中创建基本粒子，但我不确定画布是否是最好的方法 - 使用许多可用库之一的演示（例如 http://soulwire.github.io/sketch.js/examples/particles.html）不要'不要使用画布。

所以我的问题是 - Javascript 初学者/中级从粒子系统开始的最佳方式是什么？专门来完成 Codecademy 的名字效果还是类似的？我应该尝试使用画布还是最好从哪个库开始？您建议如何开始？

Answer 1

这个项目的代码对于你的中级 JS 程序员状态是可以实现的。

CodeAcademy 项目的工作原理...

• 首先从圆圈中构建每个字母并将每个圆圈的中心点保存在一个数组中。 alphabet.js 脚本包含该圆心点数组。

• 在mousemove 事件中，测试哪些圆圈位于鼠标位置的指定半径内。然后使用简单的三角函数将每个发现的圆圈从鼠标位置径向向外设置动画。

• 当鼠标再次移动时，测试哪些圆圈不再在当前鼠标位置的指定半径内。然后将这些“外部”圆圈中的每一个设置为动画返回到它们的原始位置。

你也可以在没有任何库的情况下使用原生 html5 画布...

另一种方法允许“分解”和重新组合任何文本

• 首先在画布上绘制文本。顺便说一句，这种方法将“溶解”任何绘图，而不仅仅是文本。

• 使用context.getImageData 获取画布上每个像素的不透明度值。确定画布上的哪些像素包含部分文本。您可以判断一个像素是否是文本的一部分，因为它是不透明的而不是透明的。

现在执行 CodeAcademy 对他们的圆圈所做的相同过程 - 但使用您的像素：

• 在mousemove 事件中，测试哪些像素位于鼠标位置的指定半径内。然后使用简单的三角函数将每个发现的像素从鼠标位置径向向外设置动画。

• 当鼠标再次移动时，测试哪些像素不再在当前鼠标位置的指定半径内。然后将每个“外部”像素动画化回其原始位置。

[增加：mousemove 事件来测试圆圈是否在鼠标距离内]

注意：您可能希望保持动画帧运行，根据每个圆圈的标志 (isInside) 将圆圈从其原始位置移近或移远。

function handleMouseMove(e){
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
    // calc the current mouse position
    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY);

    // test each circle to see if it's inside or outside
    // radius of 40px to current mouse position
    // circles[] is an array of circle objects shaped like this
    //      {x:,y:,r:,originalX:,originalY:,isInside:}
    var radius=40;
    for(var i=0;i<circles.length;i++){
        var c=circles[i];
        var dx=c.x-mouseX;
        var dy=c.y-mouseY;
        if(dx*dx+dy*dy<radius*radius){
            c.isInside=true;
            // move c.x & c.y away from its originalX & originalY
        }else{
            c.isInside=false;
            // if the circle is not already back at it's originalX, originalY
            // then move c.x & c.y back towards its originalX, originalY
        }
    }
}