انتقالات الواجهة والتفاعلات الصغرى

المفهوم

التفاعل الصغير استجابة بصرية خفية لفعل ما: مرور، نقر، تحميل. يجعل الواجهة تبدو حية. يجب أن تكون الانتقالات متسقة في المدة (150-300ms للأفعال) والمنحنى.

الكود

// Micro-interactions: button states
let hovered = false, pressed = false, progress = 0;
function setup() { createCanvas(400, 280); }
function draw() {
  background(11, 15, 20);
  let bx=width/2-70, by=height/2-24, bw=140, bh=48;
  hovered = mouseX>bx&&mouseX<bx+bw&&mouseY>by&&mouseY<by+bh;
  // Animate scale on hover (ease)
  let targetScale = hovered ? 1.06 : 1.0;
  progress = lerp(progress, targetScale, 0.12);
  push();
  translate(width/2, height/2);
  scale(progress);
  // Button
  noStroke();
  fill(hovered ? [55,227,195] : [40,180,155]);
  rect(-70,-24,140,48,10);
  fill(11,15,20);
  textAlign(CENTER,CENTER); textSize(15);
  text(pressed ? 'Envoyé ✓' : 'Envoyer', 0, 0);
  pop();
}
function mousePressed() { if(hovered) pressed = true; }
function mouseReleased() { setTimeout(()=>pressed=false, 1200); }

للمزيد

استكشف الدورات المجانية الأخرى على صفحة الورش.