Cara Mengacak Putaran Suatu Bentuk dengan Javascript -

Untuk kali kita akan coba belajar cara mengacak putaran suatu bentuk dengan Javascript, dimana nantinya saya mempunyai suatu bentuk yang bisa kita acak perputarannya, tentunya kita bisa semua itu karena kita menggunakan javascript. seperti apa simak terus ya teman-teman.

Seperti biasa cara mengacak putaran suatu bentuk dengan Javascript saya masih menggunakan animejs karena masih banyak efek menarik yang ada disini, contohnya dengan control dari sebuah anime yang dinamakan set, kita bisa mensetting putaran bentuk yang kita punya, lalu untuk mencontohkan hal tersebut disini saya akan membuat sebuah bentuk bintang, lalu bentuk bintang tersebut. kita akan acak peputarannya, oke dari pada teman-teman tambah penasaran disini kita langsung saja.

saya mempunyai template seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
</head>
<body class="bg-dark">
<div class="container mt-5">
	<div class="row">
		<div class="col-md-6 offset-md-2">
			<div id="star"></div>
			<div id="star"></div>
			<div id="star"></div>
		</div>
	</div>
	<div class="row">
		<button class="btn btn-light text-danger move">move</button>
	</div>
</div>
<script src="master.js"></script>

</body>
</html>

untuk mempercantik saya mengunakan sebuah bootstrap dan saya mempunyai 3 bintang, yang saya namakan sebagai id star, lalu jika sudah seperti itu berarti saya mempunyai sebuah css untuk mempercantik id tersebut, oke untuk membuat bentuk bintang kita harus membuat cssnya seperti ini:

#star {
			width: 0;
			height: 0;
			margin: 120px 0;
			color: #fff;
			position: relative;
			display: block;
			border-right: 100px solid transparent;
			border-bottom: 70px solid #fff;
			border-left: 100px solid transparent;
			-moz-transform: rotate(35deg);
			-webkit-transform: rotate(35deg);
			-ms-transform: rotate(35deg);
			-o-transform: rotate(35deg);
		}

#star:before {
	height: 0;
	width: 0;
	position: absolute;
	display: block;
	top: -45px;
	left: -65px;
	border-bottom: 80px solid #fff;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	content: '';
	-webkit-transform: rotate(-35deg);
	-moz-transform: rotate(-35deg);
	-ms-transform: rotate(-35deg);
	-o-transform: rotate(-35deg);
}

#star:after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	display: block;
	top: 3px;
	left: -105px;
	color: #fff;
	border-right: 100px solid transparent;
	border-bottom: 70px solid #fff;
	border-left: 100px solid transparent;
	-webkit-transform: rotate(-70deg);
	-moz-transform: rotate(-70deg);
	-ms-transform: rotate(-70deg);
	-o-transform: rotate(-70deg);
}

Cukup panjang memang untuk kita membuat sebuah bentuk bintang tidak apa, jika tampilan template sudah selesai, kita langsung saja membuat controll set yang ada di animejs seperti ini

<script>
	anime.set('#star', {
	  translateX: function() { return anime.random(50, 250); },
	  rotate: function() { return anime.random(0, 360); },
	});
	document.querySelector(".move").onclick = function () {
		location.reload();	
	}
</script>

teman-teman silahkan focus kepada translatex dan rotatenya, disini saya mengguankan sebuah button untuk mengganti sebuah posisi bentuk bintang yang kita punya, dan jika kita coba gabungkan semua kodingan di atas, maka teman-teman akan mendapatkan hasil yang kita inginkan seperti ini:

gambar di berbeda letak bintangnya benar, tetapi jika teman-teman perhatikan tidak hanya letak tetapi rotasi bintang tersebut pun berubah, jika tidak percaya silahkan coba sendiri, dan saya rasa cukup sampai disini belajar kita sampai jumpa pada artikel berikutnya.

Cara Mengacak Putaran Suatu Bentuk dengan Javascript

Kategori