10/10/2018, 00:06

Giải thuật javascript & tốc độ chuyển động của các đối tượng trên web

Conan đang làm một cái bài tập về sự chuyển động của các đối tượng trên trang web bằng cách sử dụng javascript và css.

Về nguyên tắc chuyển động thì Conan dùng javascript để truy xuất đến đối tượng muốn set chuyển động, và set lại vị trí của đối tượng đó ở cùng một khoản thời gian bằng nhau, tạo ra cảm giác đối tượng đang dịch chuyển một cách liên tục.

Nhưng như vậy thì chỉ có thể làm cho đối tượng chuyển động đều. Giờ conan muốn đối tượng đó ban đầu chuyển động nhanh dần, chậm dần rồi dừng lại thì phân tích giải thuật thế nào nhỉ? Bác nào good giải thuật chỉ giúp Conan với.

3do viết 02:16 ngày 10/10/2018

xem xét mối quan hệ giữa v, a và t trong đó a là gia tốc, v là vận tốc còn t là thời gian. a = v/t, nhanh dần thì a> 0, chậm dần thì a < 0

zoejoe viết 02:16 ngày 10/10/2018

Phuơng trình chuyển động thẳng biến đổi đều
x = xo + vo.t + 0.5at^2

Thử theo đó mà làm xem sao ! Hoặc là làm như sau : sau mỗi lần timeout thì ta tăng hoặc giảm giá trị 1 biến toàn cục time hoặc tăng hay giảm biến toàn cục px nào đó để cho nó thay đổi vị trí với lượng px thay đổi (nhưng nó sẽ không còn mượt đi nữa nếu số lượng px khi đạt 1 giá trị nào đó mà hình ảnh chuyển động ít hơn 24/s hay số lượng px tăng theo cấp số cộng hoặc nhân quá nhanh)

amida viết 02:09 ngày 10/10/2018

Xin phân tích phương trình thẳng biến đổi đều trong động học chất điểm:
x = x0 + v0*t + 1/2a*t^2
Với:
- x là điểm đích.
- x0 là điểm đầu.
- v0 là vận tốc đầu.
- t là thời gian.
- a là gia tốc.

Nếu chuyển động nhanh dần đều thì gia tốc a > 0 (set giá trị dương).
Nếu chuyển động chậm dần đều thì gia tốc a < 0 (set giá trị âm)

Nhớ là |a| không nên quá cao (>10).

tra_lai_user_day viết 02:15 ngày 10/10/2018

Làm vội nên chất lượng ko dc tốt cho lắm. Mong rằng ít nhiều giúp bạn hiểu dc nguyên lý

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Java script - Demo chuyển động</title>
<style type="text/css">
<!--
#Layer1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	position:absolute;
	width: 70px;
	height: 70px;
	z-index:1;
	background-color: red;
	border: 1px solid #00FF00;
}
-->
</style>
</head>

<body>
<div id="Layer1" style="left: 200px; top: 0px">Đối tượng bay</div>
<script type="text/javascript">
var toc_do = 0;
var roi_xuong = true;//Cắm cờ xem rơi xuống hay nảy lên
function bay()
{
	var div = document.getElementById('Layer1');
	var top = parseInt(div.style.top);
	
	if(toc_do <= 0)
	{
		toc_do = 0;
		roi_xuong = true;
	}
			
	if(roi_xuong)
	{
		toc_do+= 1;
		div.style.top = top + toc_do;
		if(parseInt(div.style.top) > 500) roi_xuong = false;
	}
	else
	{
		toc_do-= 1;
		div.style.top = top - toc_do;
		if(parseInt(div.style.top) <= 0) roi_xuong = true;
	}
	setTimeout('bay();', 10);
}

</script>

<p align="center">
<input type="button" value="Bắt đầu chuyển động" onclick="bay();" />
</p>
</body>
</html>

[=========> Bổ sung bài viết <=========]

Được gửi bởi amida

Công thức đó học lớp 9-10 là biết. Nhưng có điều còn hình dung ra mà thực tiễn thì.... ko phải ai cũng áp dụng dc ngay

amida viết 02:20 ngày 10/10/2018

Công thức đó học lớp 9-10 là biết. Nhưng có điều còn hình dung ra mà thực tiễn thì.... ko phải ai cũng áp dụng dc ngay

Sao hông đc

conan1212 viết 02:21 ngày 10/10/2018

Được gửi bởi tra_lai_user_day

Làm vội nên chất lượng ko dc tốt cho lắm. Mong rằng ít nhiều giúp bạn hiểu dc nguyên lý

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Java script - Demo chuyển động</title>
<style type="text/css">
<!--
#Layer1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	position:absolute;
	width: 70px;
	height: 70px;
	z-index:1;
	background-color: red;
	border: 1px solid #00FF00;
}
-->
</style>
</head>

<body>
<div id="Layer1" style="left: 200px; top: 0px">Đối tượng bay</div>
<script type="text/javascript">
var toc_do = 0;
var roi_xuong = true;//Cắm cờ xem rơi xuống hay nảy lên
function bay()
{
	var div = document.getElementById('Layer1');
	var top = parseInt(div.style.top);
	
	if(toc_do <= 0)
	{
		toc_do = 0;
		roi_xuong = true;
	}
			
	if(roi_xuong)
	{
		toc_do+= 1;
		div.style.top = top + toc_do;
		if(parseInt(div.style.top) > 500) roi_xuong = false;
	}
	else
	{
		toc_do-= 1;
		div.style.top = top - toc_do;
		if(parseInt(div.style.top) <= 0) roi_xuong = true;
	}
	setTimeout('bay();', 10);
}

</script>

<p align="center">
<input type="button" value="Bắt đầu chuyển động" onclick="bay();" />
</p>
</body>
</html>

[=========> Bổ sung bài viết <=========]

Công thức đó học lớp 9-10 là biết. Nhưng có điều còn hình dung ra mà thực tiễn thì.... ko phải ai cũng áp dụng dc ngay

Code hay quá bác ơi, tham khảo cũng ngon, nhưng Conan muốn nó chạy gần tới đích thì tốc độ giãm dần và dừng từ từ lại thì sao hả bác.

[=========> Bổ sung bài viết <=========]

Được gửi bởi amida

công thức thì biết, nhưng mà trong trường hợp ứng dụng nó lại là một phạm trù khác.

tra_lai_user_day viết 02:18 ngày 10/10/2018

Bạn cố tư duy chậm lại 1 chút. Vấn đề càng phức tạp cần tư duy thật chậm và thật đơn giản. Đừng nghĩ đến cả cái lớn làm rối ko nghĩ dc đâu.

Ví dụ nha. Bạn cần làm 1 vật thể bay nhanh dần rồi tới gần đích thì chậm dần và dừng lại.

Mình nói đại tư duy của mình nha:

đầu tiên vật bay có tốc độ ban đầu (cho nó = 0 cho dễ hiểu). Mỗi một lần gọi hàm set vị trí của vật thể để tạo cảm giác vật thể chạy. Mỗi lần này bạn cộng vào 1 giá trị vào tọa độ. Cái giá trị dc cộng này mỗi lần dc gọi thì nó cũng tự tăng lên 1 ít.

Ban đầu tọa độ x của vật thể = 0.
sau lần set tọa độ đầu tiên thì:

toa_do++;//Tang toc do
toa_do = toa_do_ban_dau + toc_do

Ko biết đến chỗ này bạn có hiểu dc ko. Nhưng nôm na là cứ sau 1 lần gọi set toạ độ thì giá trị dc cộng vào toạ độ cũng biến thiên tăng lên.

Đó là tăng tốc. Còn giản tốc thì tùy điều kiện bạn đặt ra thôi.

Ví dụ. khi chạy dc 500 Km thì bắt đầu giảm tốc. Lúc này bật cái cờ báo giảm tốc. Và đến phần biện luận if() ta sẽ cho tốc độ giảm giần (toc_do--).

Khi toc do giam = 0 là lúc vật thể dừng lại.

Xin lỗi. Nói thật. Nhiều khi muốn viết ra tư duy của mình để người khác hiểu cũng khó thật. Thôi thì đành giao lưu giữa các tư duy với nhau = demo là dễ hiểu nhất.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Java script - Demo chuyển động</title>
<style type="text/css">
<!--
#Layer1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	position:absolute;
	width: 70px;
	height: 70px;
	z-index:1;
	background-color: red;
	border: 1px solid #00FF00;
}
-->
</style>
</head>

<body>
<div id="Layer1" style="left: 0px; top: 200px">Đối tượng bay</div>
<script type="text/javascript">
var toc_do = 0;
var chay_nhanh_dan = true;//Cắm cờ xem đang tăng tốc hay giảm tốc
function bay()
{
	var div = document.getElementById('Layer1');
	var left = parseInt(div.style.left);
	
	
	if(chay_nhanh_dan)//đang chạy nhanh dần
		toc_do++;
	else
		toc_do-=2;
		
	div.style.left = left + toc_do;
	
	if( left + toc_do > 700) chay_nhanh_dan = false;
	
	
	if(toc_do <= 0) return 0;
	
	
	
	setTimeout('bay();', 10);
}

</script>

<p align="center">
<input type="button" value="Bắt đầu chuyển động" onClick="bay();" />
</p>
</body>
</html>

Tại cái màn hình ngắn quá nên chưa thể hiện dc nhiểu. Tuy nhiên bạn để ý kỹ thì nó đúng như ý bạn đó. Cũng chỉ là nguyên lý thôi.

conan1212 viết 02:21 ngày 10/10/2018

Cám ơn mọi người đã giúp. Xem ra vẫn còn nhiều khoản cách để có thể đến đc các chuyển động như các bật cao thủ JavaScript trên các trang nước ngoài.

herofit viết 02:09 ngày 10/10/2018

Được gửi bởi conan1212

Cám ơn mọi người đã giúp. Xem ra vẫn còn nhiều khoản cách để có thể đến đc các chuyển động như các bật cao thủ JavaScript trên các trang nước ngoài.

bác tra_lai_user_day đã phân tích rất rõ ràng roài bạn có thể dựa vào đó làm bạn muốn làm.
bạn tính khoảng cách từ vị trí đứng đến vị trí mốc rồi bạn căn tốc độ tăng giảm cho phù hợp để khi tới đích v=0 chúc bạn thành công

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

conan1212

0 chủ đề

0 bài viết

Tác giả nổi bật