anime.js — Animation - Hoàn Chân • Blog

Anime.js là gì?

Anime.js là thư viện JavaScript animation nhẹ (~17KB), dễ dùng, hỗ trợ animate CSS properties, SVG, DOM attributes và JavaScript objects. Thay thế hoàn hảo cho CSS animation khi cần animation phức tạp hoặc điều khiển bằng code.

CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>

Cú pháp cơ bản:

anime({
  targets: '.box',        // Phần tử cần animate
  translateX: 250,        // Thuộc tính CSS cần animate
  duration: 800,          // Thời gian (ms)
  easing: 'easeInOutQuad',
  loop: true
});

Các Hiệu Ứng Cơ Bản

Kết quả

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Anime.js Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
<style>
  * { box-sizing:border-box; font-family:sans-serif; }
  body { padding:1rem; background:#1a1a2e; min-height:100vh; }
  h4   { color:#aaa; font-size:.85rem; margin:0 0 .5rem; }
  .demo-section { margin-bottom:1.5rem; }

  .btn { padding:.4rem 1rem;background:#4472c4;color:white;border:none;border-radius:5px;cursor:pointer;font-size:.82rem;margin-right:.5rem; }

  .box {
    width:50px; height:50px; border-radius:8px; display:inline-block; margin-right:.5rem;
    background:linear-gradient(135deg,#6fa3ef,#4472c4);
  }
  .box.orange { background:linear-gradient(135deg,#f5a623,#ed7d31); }
  .box.green  { background:linear-gradient(135deg,#2ecc71,#27ae60); }

  /* Stagger demo */
  #stagger-wrap .dot {
    width:14px; height:14px; border-radius:50%; display:inline-block; margin:0 3px;
    background:#6fa3ef;
  }

  /* Path demo */
  #svg-path { margin-top:.5rem; display:block; }
  #svg-dot  { width:16px; height:16px; border-radius:50%; background:#f5a623; position:relative; offset-rotate:0deg; }
</style>
</head>
<body>

<div class="demo-section">
  <h4>1. Basic translate + rotate + scale</h4>
  <button class="btn" onclick="runBasic()">▶ Chạy</button>
  <br><br>
  <div id="basic-box" class="box"></div>
</div>

<div class="demo-section">
  <h4>2. Stagger — nhiều phần tử lần lượt</h4>
  <button class="btn" onclick="runStagger()">▶ Chạy</button>
  <br><br>
  <div id="stagger-wrap">
    <div class="dot"></div><div class="dot"></div><div class="dot"></div>
    <div class="dot"></div><div class="dot"></div><div class="dot"></div>
    <div class="dot"></div><div class="dot"></div>
  </div>
</div>

<div class="demo-section">
  <h4>3. Timeline — chuỗi animation</h4>
  <button class="btn" onclick="runTimeline()">▶ Chạy</button>
  <br><br>
  <div id="tl-a" class="box"></div>
  <div id="tl-b" class="box orange"></div>
  <div id="tl-c" class="box green"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
<script>
function runBasic() {
  anime({
    targets: '#basic-box',
    translateX: [0, 180],
    rotate: [0, 360],
    scale: [1, 1.4, 1],
    backgroundColor: ['#4472c4', '#e74c3c'],
    duration: 1000,
    easing: 'easeInOutQuad',
  });
}

function runStagger() {
  anime({
    targets: '#stagger-wrap .dot',
    translateY: [-30, 0],
    opacity: [0, 1],
    backgroundColor: ['#4472c4', '#6fa3ef'],
    delay: anime.stagger(80),
    duration: 600,
    easing: 'spring(1,80,10,0)',
    direction: 'alternate',
    loop: 2,
  });
}

function runTimeline() {
  const tl = anime.timeline({ easing: 'easeOutExpo', duration: 500 });
  tl.add({ targets: '#tl-a', translateX: 160, backgroundColor: '#e74c3c' })
    .add({ targets: '#tl-b', translateX: 100, rotate: 180 }, '-=200')
    .add({ targets: '#tl-c', translateX: 50,  scale: 1.5   }, '-=200')
    .add({ targets: ['#tl-a','#tl-b','#tl-c'],
      translateX: 0, rotate: 0, scale: 1,
      backgroundColor: ['#e74c3c','#4472c4'],
      duration: 700,
    });
}
</script>
</body>
</html>

Trong series này:

Trong series này:

anime.js — Animation

Anime.js là gì?

Các Hiệu Ứng Cơ Bản

Bình luận