Yıldızlarla Yükleniyor Animasyonu (Spinner)

Web sayfanızdaki yüklenme işlemlerinizin uçuşan yıldızlardan oluşan bir animasyonla süslenmesini ister misiniz? Georgi tarafından hazırlanan bu şık tasarım sayesinde bir canvas öğesini JavaScript ile süsleyebilir, bu yapıyı oluşturabilirsiniz.

Hazırsanız yıldızlardan oluşan yükleniyor animasyonunu birlikte oluşturalım.

ÖRNEĞİ GÖRÜNTÜLE

JavaScript ile Yıldızlı Yükleniyor Animasyonu (Spinner)

Birbirinin kopyası yıldızların koordinatlarını yöneterek, perdeye giren ve bir süre sonra çıkan oyuncular misali görünürlükleriyle oynayarak, klasik canvas yapısını etkileyici bir şekilde kullanıyor Georgi’nin JavaScript kodları. Anlaşılır bir şekilde temiz ve sade olarak yazılmış kodlar, bizlere de tasarımı özgünleştirme şansı tanıyor.

Şimdi bu yapıyı oluşturmaya başlıyoruz.

HTML ve CSS Kodları

İhtiyaç duyacağımız içi boş bir canvas tanımı.

<canvas></canvas>

Beraberinde de bu canvas öğesini ekrana düzgün bir şekilde basmamızı sağlayacak CSS tanımları da şöyle :

body,html{margin:0; padding:0;}
canvas {position:absolute; display: block; top:0;left:0;}

Şimdi sırada JavaScript kodları var.

JavaScript Kodları

Eğer Georgi’nin tasarımında

1. yıldızların rengini değiştirmek isterseniz ctx.fillStyle = “#ffeb3b”;
2. yıldızlara border eklemek isterseniz ctx.strokeStyle = ‘rgba(0,0,0,0)’;
3. tasarımın arkaplanını değiştirmek isterseniz ctx.fillStyle = ‘#e91e63’;

alanlarını değiştirmeniz gerekmektedir.

İşte kodlar :

function Circle (x, y, radius) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.angle = 0;
}

function Star (x, y, rotation) {
  this.x = x;
  this.y = y;
  this.length = 15;
  this.scaleX = .1;
  this.scaleY = .1;
  this.rotation = rotation;
  this.angle = Math.random() * 360;
  this.vx = 0;
  this.vy = 0;
  this.alpha = 1;
}

Star.prototype.draw = function(ctx) {
  ctx.save();
  ctx.globalAlpha = this.alpha;
  ctx.translate(this.x, this.y);
  ctx.rotate(this.rotation * Math.PI / 180);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(24,0);
  ctx.lineTo(24,24);
  ctx.lineTo(0,24);
  ctx.closePath();
  ctx.scale(this.scaleX, this.scaleY);
  ctx.strokeStyle = 'rgba(0,0,0,0)';
  ctx.lineCap = 'butt';
  ctx.lineJoin = 'miter';
  ctx.miterLimit = 4;
  ctx.save();
  ctx.fillStyle = "#ffeb3b";
  ctx.beginPath();
  ctx.moveTo(12,0.89);
  ctx.lineTo(15.609,8.204);
  ctx.lineTo(23.682,9.377);
  ctx.lineTo(17.842,15.071);
  ctx.lineTo(19.22,23.11);
  ctx.lineTo(12,19.315);
  ctx.lineTo(4.78,23.11);
  ctx.lineTo(6.159,15.071);
  ctx.lineTo(0.318,9.377);
  ctx.lineTo(8.39,8.204);
  ctx.lineTo(12,0.89);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.restore();
  ctx.restore();
};

function Square(x, y) {
  this.x = x;
  this.y = y;
}

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
    W = canvas.width = window.innerWidth,
    H = canvas.height = window.innerHeight,
    stars = [],
    circle = new Circle(W / 2, H / 2, 110),
    square = new Square(W / 2, H / 2);

function animateRect(square) {
  var star, counter = 0;
  square.x = W / 2 + (circle.radius * Math.cos(circle.angle * .047));
  square.y = H / 2 + (circle.radius * Math.sin(circle.angle * .047));
  circle.angle++;
  stars.push(new Star(square.x, square.y, Math.random() * 360));
}

function moveStars() {
  for (var i = 0; i < stars.length; i++) {
    var star = stars[i];
    if (star.scaleX <= 1) {
      star.scaleX += .05;
      star.scaleY += .05;
    }
    if (star.alpha >= .05) {
      star.alpha -= .015;
    } else if (star.alpha < .1) {
      stars.splice(stars[i], 1);
    }
    star.vx = Math.sin(star.angle) * .5;
    star.vy = Math.cos(star.angle) * .5;
    star.angle += .1;
    star.x += star.vx;
    star.y += star.vy;
    star.draw(ctx);
  }
}

(function drawFrame(){
  window.requestAnimationFrame(drawFrame, canvas);
  ctx.fillStyle = '#e91e63';
  ctx.fillRect(0, 0, W, H);
  animateRect(square);
  moveStars();
}());

Yorumlarınız?

Bu şık spinner ile ilgili yorumlarınızı bekliyoruz.