javascript - 开始使用 JavaScript 中的动画排版/粒子(将粒子映射到单词)？

Question

好吧，我在 HTML 和 CSS 方面拥有丰富的经验，并且在 Javascript 方面也有一些经验(我可以编写基本功能并使用类似的语言进行编码)。

我正在寻找一些视觉项目，并且对进入粒子系统特别感兴趣。我有一个类似于 Codecademy 的名称生成器( https://www.codecademy.com/courses/animate-your-name/0/1 )的想法，其中粒子被映射到单词并在悬停时移动。看起来好像 Alphabet.js 才是 Codecademy 演示的真正幕后黑手，但我无法准确理解他们如何将粒子映射到单词等。

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

所以我的问题是 - 对于 Javascript 初学者/中级初学者来说，开始使用粒子系统的最佳方法是什么？专门为了实现Codecademy名称效果或者类似的？我应该尝试使用 canvas 或哪个库最适合开始，您建议如何开始？

Answer 1

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

CodeAcademy 项目如何运作...

• 首先用圆圈构建每个字母并将每个圆圈的中心点保存在数组中。 Alphabet.js 脚本保存圆中心点数组。

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

• 当鼠标再次移动时，测试哪些圆不再位于当前鼠标位置的指定半径内。然后将每个“外部”圆圈动画回到原来的位置。

您还可以使用原生 html5 canvas，无需任何库...

另一种允许任何文本“溶解”并重新组合的方法

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

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

现在执行与 CodeAcademy 对其圆圈相同的过程 - 但使用您的像素:

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

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

[添加:用于测试圆圈是否在鼠标距离内的 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
        }
    }
}