Hướng dẫn animation javascript - javascript hoạt hình

Question

Để tạo chuyển động cho đối tượng, bạn có thể làm bằng nhiều cách như sử dụng CSS3, Jquery, hoặc các framework animation đầy rẫy trên mạng :D. Hôm nay Demos Việt Nam sẽ hướng dẫn bạn cách tạo chuyển động đơn giản nhất bằng 1 vài lệnh jquery đơn giản.

Nội dung chính Show

1. Xây dựng giao diện
2. Xử lí với Javascript
3. Lời kết
Trong ví dụ trên, chúng ta đã thấy cách một hình ảnh di chuyển qua phải mỗi khi nhấp chuột. Chúng ta có thể tự độ hóa tiến trình này bởi sử dụng hàm setTimeout() như sau:
Animation thao tác tay
Animation tự động hóa
Animation tự động hóa

Đầu tiên, chúng ta tạo html đơn giản cho đối tượng trước:

<div id="divsanta">
    <img src="img/santa.png" alt="Demos Xmas" />
</div>

Tiếp theo là một tí CSS

#divsanta{
    position: absolute;
    left: 0;
    bottom: 0;
}

Sau đó áp dụng jquery bằng hàm đơn giản như sau:

var windowW = window.innerWidth - 270;
// 270 là chiều dài của tấm hình

//Di chuyển đối tượng từ trái sang phải
function moveRight(){
    $("#divsanta").animate({left: "+="+windowW}, 15000, moveLeft)
}

//Di chuyển đối tượng từ phải sang trái
function moveLeft(){
    $("#divsanta").animate({left: "-="+windowW}, 15000, moveRight)
}

$(document).ready(function() {
    //Bắt đầu chạy thôi :D
    moveRight();
});

Cùng xem thành quả nhé :D

Trong ví dụ trên, chúng ta đã thấy cách một hình ảnh di chuyển qua phải mỗi khi nhấp chuột. Chúng ta có thể tự độ hóa tiến trình này bởi sử dụng hàm setTimeout() như sau:

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Trong bài này mình sẽ hướng dẫn các bạn tạo hiệu ứng Animations với Javascript.

1. Xây dựng giao diện

Bước đầu tiên là xây dựng phần giao diện, các bạn tạo file

#divsanta{
    position: absolute;
    left: 0;
    bottom: 0;
}

0 và đặt đoạn mã HTML dưới đây vào trong thẻ body:

Code

<div class="container">
  <h2>Freetuts.net hướng dẫn tạo hiệu ứng Animation</h2>
  <button id="btn" onclick="myMove()">Xem kết quả</button>
  <div id ="myContainer">
    <div id ="myAnimation"></div>
  </div>
</div>

Giờ ta đã có các thành phần nền rồi, mình tiếp tục sử dụng CSS để định dạng cho các thành phần dễ nhìn hơn, các bạn thêm đoạn mã CSS dưới đây vào bên trong thẻ style nhé:

Bài viết này được đăng tại [free tuts .net]

.container {
  width: 500px;
  margin: auto;
  text-align: center;
}
#myContainer {
  width: 400px;
  height: 400px;
  margin: auto;
  position: relative;
  background: #222222;
}
#myAnimation {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: #FF0000;
}
#btn {
  width: 150px;
  height: 40px;
  margin: 20px;
}

Đoạn mã này rất cơ bản nên mình cũng không giải thích nữa. Giờ ta sẽ chuyển đến bước tiếp theo.

2. Xử lí với Javascript

Sau khi đã hoàn thành phần giao diện, việc tiếp theo của chúng ta là thêm các xử lí javascript để các danh sách có thể hoạt động, các bạn đặt đoạn mã script dưới đây vào sau thẻ body nhé:

<script type="text/javascript">
  function myMove() {
    var btn = document.getElementById("btn"); 
    btn.style.display = "none";
    var elem = document.getElementById("myAnimation");   
    var pos = 0;
    var id = setInterval(frame, 10);
    function frame() {
      if (pos == 350) {
        clearInterval(id);
      } else {
        pos++; 
        elem.style.top = pos + 'px'; 
        elem.style.left = pos + 'px'; 
      }
    }
  }
</script>

Thuật toán mình sử dụng ở đây khá đơn giản:

Đầu tiên mình sẽ lấy thành phần chuyển động
```
#divsanta{
    position: absolute;
    left: 0;
    bottom: 0;
}
```
1, tiếp đến là khai báo biến
```
#divsanta{
    position: absolute;
    left: 0;
    bottom: 0;
}
```
2 đại diện cho vị trí hiện tại và biến
```
#divsanta{
    position: absolute;
    left: 0;
    bottom: 0;
}
```
3 tức lại cứ sau 10 mili giây sẽ gọi hàm frame 1 lần.
Tiếp đến mình sẽ định nghĩa hàm frame, Nếu vị trí đã bằng 350 thì dừng việc gọi hàm frame, ngược lại thì tăng biến pos lên 1 đơn vị và đặt vị trí cho
```
#divsanta{
    position: absolute;
    left: 0;
    bottom: 0;
}
```
1 theo
```
#divsanta{
    position: absolute;
    left: 0;
    bottom: 0;
}
```
5. Như vậy khi chưa đến vị trí 350, thì mỗi 10 mili giây phần
```
#divsanta{
    position: absolute;
    left: 0;
    bottom: 0;
}
```
1 sẽ di chuyển 1px.

Xong rồi giờ các bạn chạy file

#divsanta{
    position: absolute;
    left: 0;
    bottom: 0;
}

0 để xem thành quả nhé.

3. Lời kết

Qua bài viết này, mình đã hướng dẫn các bạn tạo hiệu ứng Animation, hi vọng nó sẽ giúp các bạn có thêm sự lựa chọn khi xây dựng website. Nếu có bất cứ thắc mắc gì các bạn hãy để lại ở phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net

Tham khảo: w3schools.com

Trong ví dụ trên, chúng ta đã thấy cách một hình ảnh di chuyển qua phải mỗi khi nhấp chuột. Chúng ta có thể tự độ hóa tiến trình này bởi sử dụng hàm setTimeout() như sau:

Fireworks
Fade Effect
Roll-in hoặc Roll-out
Page-in hoặc Page-out
Object movements

Bạn nên quan tâm đến thư viện hiệu ứng đang tồn tại xây dựng trên nền JavaScript: Script.Aculo.us.

Chương hướng dẫn này cung cấp cho bạn kiến thức cơ bản về cách sử dụng JavaScript để tạo một hiệu ứng.

JavaScript có thể được sử dụng để di chuyển một số phần tử DOM

#divsanta{
    position: absolute;
    left: 0;
    bottom: 0;
}

8 hoặc bất kỳ phần tử HTML nào khác) xung quanh trang theo một số mẫu được quyết định bởi một phương trình hoặc hàm logic.

JavaScript cung cấp hai hàm sau mà được sử dụng thường xuyên trong các chương trình animation.

setTimeout( function, duration) − Hàm này gọi Hàm sau quãng thời gian duration (tính bằng mili giây) từ bây giờ. − Hàm này gọi Hàm sau quãng thời gian duration (tính bằng mili giây) từ bây giờ.
setInterval(function, duration) − Hàm này gọi Hàm sau mỗi quãng thời gian duration (tính bằng mili giây). − Hàm này gọi Hàm sau mỗi quãng thời gian duration (tính bằng mili giây).
clearTimeout(setTimeout_variable) − Hàm này xóa bất cứ bộ bấm giờ nào được thiết lập bởi các hàm setTimeout(). − Hàm này xóa bất cứ bộ bấm giờ nào được thiết lập bởi các hàm setTimeout().

JavaScript có thể cũng thiết lập một số thuộc tính của một đối tượng DOM bao gồm vị trí của nó trên màn hình. Bạn có thể thiết lập thuộc tính top và left của một đối tượng để xác định vị trí của nó bất cứ đâu trên màn hình. Dưới đây là cú pháp:top và left của một đối tượng để xác định vị trí của nó bất cứ đâu trên màn hình. Dưới đây là cú pháp:

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or

// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

Animation thao tác tay

Bây giờ chúng ta cùng thực hiện một animation đơn giản sử dụng các thuộc tính đối tượng DOM và các hàm JavaScript như sau. Sau đây liệt kê các phương thức DOM khác nhau:

Chúng tôi đang sử dụng hàm getElementById() để nhận một đối tượng DOM và sau đó gán nó tới một biến Global là imgObj.getElementById() để nhận một đối tượng DOM và sau đó gán nó tới một biến Global là imgObj.
Chúng tôi đã định nghĩa một hàm khởi tạo init() để khởi tạo imgObj, ở đây chúng tôi đã thiết lập các thuộc tính position và left của nó.init() để khởi tạo imgObj, ở đây chúng tôi đã thiết lập các thuộc tính position và left của nó.
Chúng tôi đang gọi hàm khởi tạo tại thời điểm tải cửa sổ.
Cuối cùng, chúng tôi đang gọi hàm moveRight() để tăng khoảng cách trái bởi 10 pixel. Bạn có thể cũng thiết lập nó một giá trị âm để di chuyển nó sang cạnh trái.moveRight() để tăng khoảng cách trái bởi 10 pixel. Bạn có thể cũng thiết lập nó một giá trị âm để di chuyển nó sang cạnh trái.

Ví dụ

Bạn thử ví dụ sau:

<html>

   <head>
      <title>JavaScript Animation</title>

      <script type="text/javascript">
         <!--
            var imgObj = null;

            function init(){
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }

            function moveRight(){
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
            }

            window.onload =init;
         //-->
      </script>

   </head>

   <body>

      <form>
         <img id="myImage" src="https://media.hoclaptrinh.vn/images/hieu-ung-animation-trong-javascript5c0ddc900f35f.gif" />
         <p>Click button below to move the image to right</p>
         <input type="button" value="Click Me" onclick="moveRight();" />
      </form>

   </body>
</html>

Kết quả

Animation tự động hóa

Trong ví dụ trên, chúng ta đã thấy cách một hình ảnh di chuyển qua phải mỗi khi nhấp chuột. Chúng ta có thể tự độ hóa tiến trình này bởi sử dụng hàm setTimeout() như sau:setTimeout() như sau:

Dưới đây, chúng tôi thêm nhiều phương thức hơn. Đó là:

Hàm moveRight() đang gọi hàm setTimeout() để thiết lập vị trí của imgObj.moveRight() đang gọi hàm setTimeout() để thiết lập vị trí của imgObj.
Chúng tôi đã thêm một hàm mới là stop() để xóa bộ bấm giờ được thiết lập bởi hàm setTimeout() và để thiết lập đối tượng tại vị trí khởi tạo.stop() để xóa bộ bấm giờ được thiết lập bởi hàm setTimeout() và để thiết lập đối tượng tại vị trí khởi tạo.

Ví dụ

Bạn thử ví dụ sau:

<html>

   <head>
      <title>JavaScript Animation</title>

      <script type="text/javascript">
         <!--
            var imgObj = null;
            var animate ;

            function init(){
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }

            function moveRight(){
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,20); // call moveRight in 20msec
            }

            function stop(){
               clearTimeout(animate);
               imgObj.style.left = '0px'; 
            }

            window.onload =init;
         //-->
      </script>

   </head>

   <body>

      <form>
         <img id="myImage" src="./images/html.gif" />
         <p>Click the buttons below to handle animation</p>
         <input type="button" value="Start" onclick="moveRight();" />
         <input type="button" value="Stop" onclick="stop();" />
      </form>

   </body>
</html>

Kết quả

Animation tự động hóa

Trong ví dụ trên, chúng ta đã thấy cách một hình ảnh di chuyển qua phải mỗi khi nhấp chuột. Chúng ta có thể tự độ hóa tiến trình này bởi sử dụng hàm setTimeout() như sau:

Dưới đây, chúng tôi thêm nhiều phương thức hơn. Đó là:

Hàm moveRight() đang gọi hàm setTimeout() để thiết lập vị trí của imgObj.
Chúng tôi đã thêm một hàm mới là stop() để xóa bộ bấm giờ được thiết lập bởi hàm setTimeout() và để thiết lập đối tượng tại vị trí khởi tạo. constructor tạo và tải lại một đối tượng Image mới gọi là image1.
Bạn thử code sau:
Rollover với một Mouse Eventimage2 và gán ./images/http.gif trong đối tượng này.
Dưới đây là ví dụ đơn giản minh họa rollover hình ảnh với một Mouse Event.
Chúng ta cùng quan sát những gì đang được sử dụng trong ví dụ này:onMouseOver được kích hoạt khi người dùng di chuyển chuột qua link (hình ảnh đó), và onMouseOut event handler đươc kích hoạt khi người dùng di chuyển chuột ra khỏi link đó.
Tại thời điểm tải trang này, lệnh if kiểm tra cho sự tồn tại của đối tượng Image. Nếu đối tượng Image này không có sẵn, khối này sẽ không được thực thi.
Image() constructor tạo và tải lại một đối tượng Image mới gọi là image1.

<html>

   <head>
      <title>Rollover with a Mouse Events</title>

      <script type="text/javascript">
         <!--
            if(document.images){
               var image1 = new Image(); // Preload an image
               image1.src = "./images/html.gif";
               var image2 = new Image(); // Preload second image
               image2.src = "./images/http.gif";
            }
         //-->
      </script>

   </head>

   <body>
      <p>Move your mouse over the image to see the result</p>

      <a href="#" onMouseOver="document.myImage.src=image2.src;" onMouseOut="document.myImage.src=image1.src;">
      <img name="myImage" src="./images/html.gif" />
      </a>
   </body>
</html>

Kết quả

Animation tự động hóa