1. Dom Animation trong JavaScript là gì?
Dom Animation giúp ta tạo ra các hiệu ứng động bằng cách thay đổi các thuộc tính của phần tử từ giá trị ban đầu đến giá trị mong muốn. Ta có thể sử dụng Js để tạo một hiệu ứng phức tạp, không giới hạn, có các phần tử sau:
- Fireworks
- Fade Effect
- Roll-in hoặc Roll-out
- Page-in hoặc Page-out
- Object movements
Js có thể được sử dụng để di chuyển một số phần tử DOM (<img/> , <div> 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. Js cung cấp 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ờ.
- 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).
- 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() .
Js 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. Ta 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.
// Đặt khoảng cách từ mép trái của màn hình. object.style.left = distance in pixels or points; or // Đặt khoảng cách từ cạnh trên của màn hình. object.style.top = distance in pixels or points;
2. Thao tác tay với Dom Animation
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 Js như sau. Sau đây liệt kê các phương thức DOM khác nhau:
- 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
- Định nghĩa một hàm khởi tạo init() để khởi tạo imgObj , ở đây đã thiết lập các thuộc tính position và left của nó
- Gọi hàm khởi tạo tại thời điểm tải cửa sổ.
- Cuối cùng 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.
Ví dụ:
<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://laptrinhtudau.com/wp-content/uploads/2021/08/logolttd2021.png" />
<p>Nhấp vào nút bên dưới để di chuyển hình ảnh sang phải</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>
3. Tự động hóa với Dom Animation
Với ví dụ trên ta phải click chuột để di chuyển hình ảnh đó. Vậy bây giờ ta muốn nó tự di chuyển thì sao? Chúng ta có thể tự độ hóa tiến trình này bởi sử dụng hàm setTimeout()
Ví dụ:
<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); // gọi moveRight trong 20msec
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="https://laptrinhtudau.com/wp-content/uploads/2021/08/logolttd2021.png" />
<p>Nhấp vào nút bên dưới để di chuyển hình ảnh sang phải</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>
Ở đây đã sử dụng nhiều phương thức hơn:
- Hàm moveRight() đang gọi hàm setTimeout() để thiết lập vị trí của imgObj .
- 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.
4. Tạo một Animation đầy đủ với JavaScript
Đầu tiên ta cho các Animation liên quan đến một chỗ. Tức là ta đưa chúng vào trong một thẻ <div> như thế này
<div id ="container"> <div id ="animate">Animation xuất hiện ở đây</div> </div>
Animation được thực hiện bằng cách thay đổi dần trong kiểu của một phần tử. Các thay đổi được gọi bằng bộ đếm thời gian. Khi khoảng thời gian hẹn giờ nhỏ, hoạt ảnh sẽ liên tục.
id = setInterval(frame, 5);
function frame() {
if (/* Kiểm tra*/) {
clearInterval(id);
} else {
/* Code để thay đổi kiểu phần tử */
}
}
Sau đó là tạo một Animation hoàn thiện
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
function myMove() {
let id = null;
const elem = document.getElementById("animate");
let pos = 0;
clearInterval(id);
id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
</script>
</body>
</html>
