Artikel kali ini tentang cara membuat animasi java script. Dalam program animasi ini menggunakan ekstensi html dalam penyimpanannya. Berikut listing programnya
<canvas height="600" id="surface" width="1000" ></canvas>
//ini membuat tentang ukaran layar yang akan tampil setelah programnya sukses.
<script type="text/javascript">
//membuat variable dan menentukan jari-jari
var ball = {
x: 100, // Letak memantul, misalnya center, left, right.
y: 300, // Tinggi rendahnya pantulan bola
r: 100, // Besar kecil bolanya pantulan bola,silahkan tambahin atau kurangi ukurannya(modifikasi)
vx: 10, // Memantul kesamping, jika 0 maka memantul keatas
vy: 10, //Tinggi pantulannya, jika 10 pantulannya lebih tinggi dan jika 0 pantulan biasa
elasticity:1 // ini merupakan kecepatan pantulan yang diberikan, silahkan modifikasi
};
//memanggil canvas di tag HTML
var canvas = document.getElementById("surface");
var ctx = canvas.getContext('2d');
setInterval(function() {
ctx.save();
ctx.fillStyle = "rgba(174, 2,252, .226)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();
//mengkonfigurasi secara fisik
// 1 - memberikan fungsi velocity ke (vx -> x)
ball.x += ball.vx
ball.y += ball.vy
// 2 - memberikan drag/friction ke dalam velocity
ball.vx *= .99
ball.vy *= .99
// 3 - memberikan gravity ke dalam velocity
ball.vy += 1.25
// 4 - cek ulang lagi
if (ball.y + ball.r > canvas.height) {
ball.y = canvas.height - ball.r;
ball.vy = -Math.abs(ball.vy);
ball.vy *= ball.elasticity;
};
//menggambar bola dengan metode arc
ctx.save();
ctx.translate(ball.x, ball.y);
ctx.fillStyle = "#03fbfe";
ctx.beginPath();
ctx.arc(0, 0, ball.r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.restore();
}, 1000 / 77);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>**** Siman Mendrofa ***</title>
<script type="text/javascript">
function animateTitle(){
var title=document.title;
document.title=title.substr(1,title.length)+title.substr(0,1);
}
setInterval(animateTitle,100);
</script>
</head>
Seperti Berikut Hasilnya nanti, tapi ini hanya dalam bentuk gambar, yang aslinya dalam bentuk animasi bola memantul.
Artikel Lain :
Demikian Artikel Kali ini, Tunggu Artikel Berikutnya.
Please Like YA
.jpg)
