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

Get started with animated typography/particles in javascript (mapping particles to a word)?

本文关键字：粒子 映射 单词 javascript 动画 开始      更新时间：2023-11-03

好吧，所以我对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名称效果还是类似效果？我应该尝试使用canvas还是最好从哪个库开始？你建议如何开始？

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

CodeAcademy项目如何运作

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

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

  • 当鼠标再次移动时，测试哪些圆不再位于当前鼠标位置的指定半径内。然后设置每个"外部"圆的动画，使其返回原始位置。

您也可以使用没有任何库的本地html5画布。。。

允许任何文本被"溶解"并重新组装的另一种方法

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

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

现在执行CodeAcademy对圆圈所做的相同程序——但使用您的像素：

  • 在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
        }
    }
}
相关文章：