Bài 23: Tạo animation nối tiếp nhau bằng thư viện TimelineMax

0

Trong bài học này, mình sẽ hướng dẫn các bạn tạo hiệu ứng chuyển động nối tiếp nhau bằng thư viện TimelineMax. Thư viện này nằm trong bộ thư viện js Gsap – Greensock tương tự như TweenMax trong bài học trước – Bài 22: Tạo Hiệu Ứng Chuyển Động Với Thư Viện TweenMax.

Video – Tạo animation nối tiếp nhau bằng thư viện TimelineMax

Ý tưởng

+ Tạo chuyển động nối tiếp nhau bằng thư viện TimelineMax. Bạn có thể tải hoặc dùng link CDN trên trang chủ Gsap. Còn không cứ copy đoạn code hướng dẫn bên dưới. Xem tại link này: https://greensock.com/docs

+ Thư viện này tương tự TweenMax nhưng lại hỗ trợ liên kết các hiệu ứng đơn lẻ thành một chuỗi chuyển động.

+ Sử dụng Bootstrap để căn chỉnh nhanh, các bạn có thể thêm Bootstrap hoặc căn chỉnh bằng CSS tự viết cũng được.

Hướng dẫn chi tiết

Phần HTML

Thêm các css và js

<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Khối chuyển động và các nút điều khiển chuyển động.

<div class="container">
   <div class="row mt-5">
      <div class="col">
         <div class="btn-group">
            <button id="play" class="btn btn-primary">Chạy ngay đi</button>
            <button id="stop" class="btn btn-danger">Dừng lại</button>
            <button id="chay-nguoc-lai" class="btn btn-info">Quay lại từ đầu</button>
         </div>
      </div>
   </div>
   <div class="row mt-5">
      <div class="col">
         <div class="khoi"></div>
      </div>
   </div>
</div>

Phần CSS

.khoi{
   height: 100px;
   width: 100px;
   background: #5f5c5c;
}

Phần JS

$(document).ready(function() {
   timeline = new TimelineMax();
   timeline.to($('.khoi'),1,{x:300})
   .to($('.khoi'),1,{y:300})
   .to($('.khoi'),2,{x:-300},"+=1");
   // dừng hiệu ứng
   $('#stop').click(function(event) {
      timeline.stop();
   });
   // tiếp tục hiệu ứng
   $('#play').click(function(event) {
      timeline.play();
   });
   // đi ngược lại
   $('#re-play').click(function(event) {
      timeline.reverse();
   });
});

Các hàm được sử dụng từ thư viện TimelineMax

+ Hàm khởi tạo new TimelineMax(), để sử dụng TimelineMax, các bạn cần khởi tạo bằng hàm dựng này.

+ Hàm to(phần tử được chọn,thời gian,{hiệu ứng},”khoảng cách 2 chuyển động”) dùng để xác định chuyển động. Hiệu ứng trong hàm là vị trí cuối cùng. Có thể viết nối tiếp các hàm to để tạo thành chuỗi chuyển động. Nếu dùng TweenMax, các bạn dùng thuộc tính delay trong phần hiệu ứng để định thời gian chuyển động. Trong TimelineMax, các bạn định thời gian bằng cách thêm 1 thuộc tính phía sau hiệu ứng như cú pháp bên trên.

+ Hàm stop(): dừng chuyển động.

+ Hàm play(): chạy hiệu ứng.

+ Hàm reverse(): đảo ngược hiệu ứng.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.