Sketch.js |介绍

Sketch.js 是一个轻量级的创意编码平台。它提供了您需要添加的所有片段和代码，以便为您的网站制作酷炫的动画和效果。 Sketch.js 使动画的实现变得非常快速和容易。它类似于使用 Processing 。它的主要概念是基于鼠标事件、触摸事件和键盘事件等事件。为方便起见，所有事件都进行了扩充，以便您可以轻松使用它们，如果您愿意，可以在事件处理程序之外使用它们。为了获取鼠标和触摸事件的坐标，我们有在普通 JavaScript 中也使用的x和y坐标。使用sketch.js 使编码变得更快、更有趣，而无需担心设置和为配置编写大量样板代码。它提供了内置的图形上下文和动画循环。所以最后应该使用sketch.js来制作动画，因为它快速、易于设置和使用，并且可以节省你编写大量代码的时间。

安装：

• Step-1:首先你需要在你的机器上下载它。下载链接如下。
  下载 Sketch.js：立即下载。
  这就是他们的 github 页面的样子。单击下载或克隆按钮下载 zip 文件。
  
• 第 2 步：现在，解压缩 zip 文件。您需要将sketch.min.js文件添加到您的项目中。
  
• 第 3 步：现在，如果您进入示例文件夹，您将看到三个 HTML 文件。您需要做的就是将要添加其效果的文件的JS复制到您的项目中。
  

  这就是您需要做的所有工作。以下是将示例的 JS 之一添加到项目中后的最终代码。

  例子：

    
  
      
      
    
      Sketch.js
    
      
          body {
              margin: 0;
              padding: 0;
              background: green;
          }
      
  
    
  
      
      
    
          // Particle function
          function Particle(x, y, radius) {
              this.init(x, y, radius);
          }
    
          Particle.prototype = {
              init: function (x, y, radius) {
                  this.alive = true;
                  this.radius = radius || 10;
                  this.wander = 0.15;
                  this.theta = random(TWO_PI);
                  this.drag = 0.92;
                  this.color = '#fff';
                  this.x = x || 0.0;
                  this.y = y || 0.0;
                  this.vx = 0.0;
                  this.vy = 0.0;
              },
    
              move: function () {
                  this.x += this.vx;
                  this.y += this.vy;
                  this.vx *= this.drag;
                  this.vy *= this.drag;
                  this.theta += random(-0.5, 0.5) * this.wander;
                  this.vx += sin(this.theta) * 0.1;
                  this.vy += cos(this.theta) * 0.1;
                  this.radius *= 0.96;
                  this.alive = this.radius > 0.5;
              },
    
              draw: function (ctx) {
                  ctx.beginPath();
                  ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
                  ctx.fillStyle = this.color;
                  ctx.fill();
              }
          };
    
          var MAX_PARTICLES = 280;
          var COLOURS = ['#69D2E7',
              '#A7DBD8',
              '#E0E4CC',
              '#F38630',
              '#FA6900',
              '#FF4E50',
              '#F9D423'];
    
          var particles = [];
          var pool = [];
          var demo = Sketch.create({
              container: document.getElementById('container'),
              retina: 'auto'
          });
    
          demo.setup = function () {
    
              // Set off some initial particles.
              var i, x, y;
    
              for (i = 0; i < 20; i++) {
                  x = (demo.width * 0.5) + random(-100, 100);
                  y = (demo.height * 0.5) + random(-100, 100);
                  demo.spawn(x, y);
              }
          };
    
          demo.spawn = function (x, y) {
              var particle, theta, force;
              if (particles.length >= MAX_PARTICLES)
                  pool.push(particles.shift());
    
              particle = pool.length ? pool.pop() : new Particle();
              particle.init(x, y, random(5, 40));
    
              particle.wander = random(0.5, 2.0);
              particle.color = random(COLOURS);
              particle.drag = random(0.9, 0.99);
    
              theta = random(TWO_PI);
              force = random(2, 8);
    
              particle.vx = sin(theta) * force;
              particle.vy = cos(theta) * force;
    
              particles.push(particle);
          };
    
          demo.update = function () {
    
              var i, particle;
    
              for (i = particles.length - 1; i >= 0; i--) {
    
                  particle = particles[i];
    
                  if (particle.alive) particle.move();
                  else pool.push(particles.splice(i, 1)[0]);
              }
          };
    
          demo.draw = function () {
    
              demo.globalCompositeOperation = 'lighter';
    
              for (var i = particles.length - 1; i >= 0; i--) {
                  particles[i].draw(demo);
              }
          };
    
          demo.mousemove = function () {
    
              var particle, theta, force, touch, max, i, j, n;
    
              for (i = 0, n = demo.touches.length; i < n; i++) {
    
                  touch = demo.touches[i], max = random(1, 4);
                  for (j = 0; j < max; j++) {
                      demo.spawn(touch.x, touch.y);
                  }
    
              }
          };
      
  
    

  如果我们看一下上面的代码，我们所做的就是提供一个后台添加两个 JS 文件，一个是sketch.min.js ，另一个来自 example 文件夹中的一个文件。我们在这里演示了粒子。

  输出：