Tạo Animation với thư viện Anime.js

Nếu như bạn đang cần tìm kiếm một thư viện animation nhanh gọn nhẹ, thì Anime.js của Julian Garnier là một lựa chọn đáng để bạn xem xét. Tôi sẽ không chia nhỏ thư viện ra để phân tích hay đào sâu mã code của nó. Thay vào đó, tôi sẽ tiếp cận thư viện này từ quan điểm của một người làm việc với CSS nhưng muốn khám phá những gì JavaScript cung cấp khi nói đến animation.

Khi nói về animation trên web có một sự phân biệt rõ ràng giữa UI/UX animation và standalone animation. Nghiên cứu cho thấy rằng con người sẽ tiếp nhận mọi thứ tốt hơn thông qua sự di chuyển hình ảnh. Điều này có nghĩa là chúng ta có thể hiểu và thu nhận thông tin tốt hơn khi nó được trình bày với trong một bối cảnh động chứ không phải dưới dạng hình ảnh tĩnh. UI/UX animation phục vụ mục đích trợ giúp người dùng khi họ chuyển hướng một trang web, tiếp nhận thông tin trên trang web, hoặc thực hiện một nhiệm vụ cụ thể ví dụ như đăng ký bản tin, thêm sản phẩm vào giỏ mua sắm,.... Ngược lại, standalone animation là:

Được sử dụng để minh họa cho các khái niệm trong phần body của trang, phần bên cạnh hoặc trên phần riêng của nó. Sarah Drasner

Sự khác biệt rất quan trọng vì khi bạn tạo một UI animation, mục tiêu của bạn là để giúp người dùng thực hiện những chức năng mà đi theo hướng đạt được mục tiêu của trang web.Thay vào đó, một hình ảnh động độc lập(standalone animation) được tạo ra để thể hiện một khái niệm nhất định càng đầy đủ càng tốt. Điều đó nói rằng, cả hai loại hoạt hình đêù được thực hiện để mọi người thưởng thức. Đó là lý do tại sao một hình ảnh động tạo ra sự vui thích cho người xem nhưng cũng có thể khiến cho người xem cảm thấy phiền phức, khó chịu cho người sử dụng.

Ngày nay CSS có thể cung cấp rất nhiều hiệu ứng chuyển tiếp và hình ảnh động đẹp. Tuy nhiên, khi nói đến animation trên web thì JavaScript vẫn là một người chơi lớn. Tại sao lại nên sử dụng JavaScript? Chúng ta có thể tạo animation mà chỉ sử dụng CSS, tại sao lại cần JavaScript để thực hiện công việc này?

Để giúp bạn đưa ra được quyết định giữa CSS và JavaScript, Rachel Nabors đã đưa ra lý do sau: Animation có thể là:

• static: animation hoạt động từ đầu đến cuối mà không cần sự quyết định của logic. Bạn có thể tạo animation chỉ với CSS.
• stateful: sidebar mở ra và đóng vào bằng một nút bấm là một ví dụ phổ biến của animation. Bạn có thể xây dựng animation đấy bằng việc sử dụng CSS và một chút JavaScript.
• dynamic: loại animation này có thể cho ra có kết quả khác nhau, phụ thuộc vào các yếu tố khác nhau như tương tác người dùng, DOM, trạng thái của hình ảnh động ... Bạn không thể tạo các animation chỉ với CSS trong bối cảnh này, JavaScript là sự lựa chọn tối ưu nhất.

Có rất nhiều thư viện animation sử dụng JavaScript bạn có thể thử. Ví dụ như GSAP (GreenSock Animation Platform), và Velocity.js là một trong số những người chơi lớn.

Cả hai đều là các thư viện tuyệt vời tuy nhiên trong bài này tôi muốn giới thiệu với mọi người Anime.js, một thư viện hình ảnh động mới của JavaScript.

Các tính năng chính của AnimeJS

Anime.js là một thư viện hình ảnh động JavaScript linh hoạt nhưng nhẹ. Nó hoạt động với CSS, Individual Transforms, SVG, các thuộc tính DOM và các đối tượng JS.

Anime.js hỗ trợ các trình duyệt sau:

• Chrome
• Safari
• Opera
• Firefox
• Internet Explorer 10+

Với tất cả các thư viện Animation có sẵn, tại sao lại chọn AnimeJS?

Câu trả lời cho câu hỏi này là tốt nhất chúng ta hãy nghe tác giả của AnimeJS giải thích lý do tại sao ông đã đưa ra Anime.js trong khi có một thư viện mạnh mẽ như GSAP:

GSAP có thể làm nhiều hơn Anime. Nhưng nó lại khá nặng. Mục tiêu của tôi với thư viện này là giữ cho API trở nên đơn giản nhất có thể, tập trung vào những điều tôi thực sự cần (multiple timings, easings, playback controls….) trong khi vẫn giữ được mã siêu nhẹ (9KB minified). Tin tức Hacker

Làm thế nào để sử dụng AnimeJS

Trước hết, bạn tải xuống thư viện anime.js trên GitHub, sau đó extract các tệp và thêm anime.min.js vào file html thông qua thẻ <script> :

<script src="anime.min.js"></script>

Ngoài ra, bạn có thể sử dụng npm hoặc bower:

npm install animejs
bower install animejs

Tạo một animation: Bouncing Ball

Dưới đây là một ví dụ minh họa để tạo một animation đơn giản : chỉ cần một vài yếu tố, một quả bóng, nảy lên xuống.

var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic'
});

Nếu bạn mong muốn thuộc tính target có thể mang nhiều giá trị, bạn có thể sử dụng một mảng như là cấu trúc dữ liệu như sau:

var bouncingBall = anime({
  targets: ['.ball', '.kick'],
  //rest of the code
});

Thuộc tính thứ hai cần trong ví dụ trên để bóng có thể di chuyển theo chiều dọc là translateY. Thuộc tính duration cho biết bạn muốn animation kéo dài bao lâu. Nếu bạn có nhiều hơn một animation diễn ra vào những thời điểm khác nhau, bạn có thể sử dụng thuộc tính delay. Thuộc tính loop nói cho bạn biết số lần bạn muốn animation diễn ra. Giá trị mặc định của nó là false, làm cho animation chỉ chạy một lần. Bạn có thể làm cho animation chạy vô thời hạn bằng cách thay đổi giá trị này thành true, hoặc có thể chạy một số lần chính xác bằng cách thiết lập thuộc tính này thành số mong muốn. Thuộc tính direction cho phép bạn đặt nó vào bất kỳ giá trị nào trong các giá trị dưới đây: normal, reverse và alternate. Thuộc tính easing: Bạn muốn tỷ lệ liên tục thay đổi? Hay muốn animation chạy chậm lúc đầu và tăng tốc về lúc cuối? Bạn mong muốn animation được tung lên ở lúc cuối? Chính thuộc tính easing là sẽ giúp bạn làm những điều đó.Nó là một thành phần quan trọng để tạo một animation hiệu quả.

Thêm một Animation thứ hai

Giả sử bạn muốn quả bóng bật lên rồi bị đè bẹp một chút khi nó chạm vào lề dưới. Bạn có thể làm điều này với animejs bằng cách thêm một số các thông số cụ thể dưới đây:

var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic',
  //new code
  scaleX: {
    value: 1.05,
    duration: 150,
    delay: 268
  }
});

Demo: https://codepen.io/Flowerlantern/pen/MrdKPR

Tạo Animation với hai phần tử: Kicking a Ball

Ví dụ dưới đây cho phép tạo animation với hai phần tử, trong trường hợp này aninmation thứ hai được bắt đầu khi animation đầu tiên đã hoàn thành.

var kickBall = anime({
  targets: '.kick',
  scale: 1.2,
  duration: 300,
  easing: 'easeInCubic',
  complete: function() {
    anime({
      targets: '.ball',
      translateX: '70vw',
      scale: 1.5,
      easing: 'easeOutBounce',
      delay: 150
    });
  }
});

Với Anime.js bạn có thể tách rời các animation bằng cách sử dụng phương thức complete(). Demo: https://codepen.io/Flowerlantern/pen/WdBrVY

Playing, Pausing và Restarting trong Animation

Anime.js cho phép bạn kiểm soát khi nào animation play, pause và restart các animation thông qua các phương thức sau: .play (), .pause () và .restart ().

//Animating the kick
var kickBall = anime({
  targets: '.kick',
  scale: 1.2,
  duration: 300,
  delay: 100,
  easing: 'easeInCubic',
  autoplay: false
});

//Animating the ball
var movingBall = anime({
  targets: '.ball',
  translateX: '70vw',
  scale: 1.5,
  easing: 'easeOutBounce',
  delay: kickBall.duration + 100,
  autoplay: false
});

/* Playing the animation 
when clicking the play button */
btnPlay.addEventListener('click', function(e) {
  e.preventDefault();
  kickBall.play();
  movingBall.play();
});

Một số điều cần lưu ý về đoạn mã ở trên:

• Để có thể kiểm soát cú đá và bóng tôi đã tạo ra hai đối tượng riêng biệt.
• Để ngăn chặn animation tự động chạy thiết lập autoplay thành false.
• Cuối cùng, đó chỉ là vấn đề gọi phương thức .playball để kick Ball và move Ball để chúng hoạt động chính xác theo như mong muốn. Demo: https://codepen.io/Flowerlantern/pen/OzYNJE

Animating Inline SVG Attributes với Anime.js

Bản demo này giúp bạn hiểu làm thế nào để có thể làm động thuộc tính của một inline SVG. Trong trường hợp này chúng ta sẽ tạo một animation cho một con mèo chơi với một quả bóng. Đây là cách bạn có thể làm chuyển động cho mắt mèo:

var movingEyes = anime({
  targets: ['.inner-left-eye', '.inner-right-eye'],
  cy: 400,
  duration: 500,
  delay: function(el, index) {
    var singleDelay = index === 0 ? 300 : index * 500;
    return singleDelay;
  },
  autoplay: false
});

Làm mắt mèo chuyển động bằng cách thay đổi giá trị của thuộc tính** cy**. Demo:https://codepen.io/Flowerlantern/pen/goJrpz

Tôi đã giới thiệu xong ngắn gọn về Anime.js - thư viện hỗ trợ tạo animation trên Web bằng cách minh hoạ một số tính năng của nó và đưa nó hoạt động trên CodePen. Nhìn chung, tôi thấy Anime.js khá thú vị, cú pháp sử dụng của nó khá đơn giản, và nó cho phép bạn tạo hiệu ứng animation mịn, đẹp. Là một thư viện rất đáng để bạn tìm hiểu. Nếu bạn muốn tìm hiểu thêm về cách sử dụng thư viện này hãy thao khảo tại : Anime.js Homepage