Hoạt hình - chuyển động
Bạn đã biết cách chọn một phần tử DOM, giờ tạo ra sự di chuyển động cho nó.
Bắt đầu bạn thử tạo một hình vuông và cho nó di chuyển bằng sử dụng JS
<style>
#container {
width: 200px;
height: 200px;
background: green;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: red;
position: absolute;
}
</style>
<div id="container">
<div id="box"> </div>
</div>
Ví dụ trên có sử dụng CSS để định dạng, nên bạn cần biết cơ bản về CSS
Phần tử box được chứa bên trong phần tử container. Chú ý mối quan hệ vị trí: đối với container là relate còn với box là absolute.
Điều này giúp tạo ra sự di chuyển có liên hệ với container
Tạo ra sự di chuyển của box : giờ ta làm các bước để box di chuyển từ trái qua phải
Để tạo ra các đối tượng chuyển động, bạn cần thay đổi thuộc tính của phần tử cứ mỗi một khoảng thời gian ngắn nào đó.
Bạn có thể sử dụng hàm setInterval() để tạo ra hành động lặp lại (thay đổi thuộc tính phần tử) sau mỗi khoảng thời gian tính bằng mili giây xác đinh.
Ví dụ:
var t = setInterval(move, 500);
Đoạn code trên tao ra một timer, nó gọi hàm move() sau mỗi 500 mili giây, việc của bạn là định nghĩa hàm move() cho phù hợp
<script>
// vị trí bắt đầu
var pos = 0;
//lấy hộp box
var box = document.getElementById("box");
function move() {
pos += 1;
box.style.left = pos+"px"; //px = pixels
}
</script>
Hàm move() mỗi lần gọi sẽ thay đổi box.style.left thêm 1
Để dừng quá trình chuyển động (không thay đổi box.style.left) sau mỗi khoảng thời gian nữa bạn hãy gọi hàm clearInterval()
Ví dụ kiểm tra nếu tọa độ left trên 150 thì dừng lại
function move() {
if(pos >= 150) {
clearInterval(t);
}
else {
pos += 1;
box.style.left = pos+"px";
}
}
Đoạn mã hoàn chỉnh để tạo ra sự di chuyển từ trái qua phải của box, bạy chạy thử nó và xem kết quả
<style>
#container {
width: 200px;
height: 200px;
background: green;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: red;
position: absolute;
}
</style>
<div id="container">
<div id="box"> </div>
</div>
var pos = 0;
//our box element
var box = document.getElementById("box");
var t = setInterval(move, 10);
function move() {
if(pos >= 150) {
clearInterval(t);
}
else {
pos += 1;
box.style.left = pos+"px";
}
}
Di chuyển qua lại
Sửa mã hàm move() sau để giá trị pos nhận từ 0 - 150, nếu đến 150 quay lại giảm về 0 ...
<script>
var tanggiam = 1;
var pos = 0;
var box = document.getElementById("box");
var t = setInterval(move, 10);
function move() {
if ((pos > 150) || (pos <0)) {
tanggiam = (-tanggiam);
}
pos += tanggiam;
box.style.left = pos+"px";
}
</script>
Chạy code hoàn chỉnh sau:
<html>
<head>
<style>
#container {
width: 200px;
height: 200px;
background: green;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="container">
<div id="box"> </div>
</div>
<script>
var tanggiam = 1;
var pos = 0;
var box = document.getElementById("box");
var t = setInterval(move, 10);
function move() {
if ((pos > 150) || (pos <0)) {
tanggiam = (-tanggiam);
}
pos += tanggiam;
box.style.left = pos+"px";
}
</script>
</body>
</html>
<script>
var tanggiam = 1;
var pos = 0;
var box = document.getElementById("box");
var t = setInterval(move, 10);
function move() {
if ((pos > 150) || (pos <0)) {
tanggiam = (-tanggiam);
}
pos += tanggiam;
box.style.left = pos+"px";
}
</script>
