Animasi rotasi dengan javascript

Kucoba membuat animasi rotasi di javascript. Ini dia :

function mcAnimateRotate(mc){

function animate(timestamp) {

if (!startTime) startTime = timestamp;

const elapsed = timestamp - startTime;

var sdt = Math.min(elapsed / duration * 180 , 180);

mc.style.transform = "rotate("+sdt+"deg)";

if (elapsed < duration) {

requestAnimationFrame(animate);

} else {

// jika selesai

}

}

let startTime = null;// perlu di null kan lagi setiap mau di animasi kan

const duration = 1500; // Durasi 0.5 detik dalam milidetik

requestAnimationFrame(animate);

}

Display vs opacity - javascript

Barusan mencoba tombol hide dan show untuk unsur-unsur lingkaran. Dimana unsur lingkaran ada juring yang dibentuk dari dua titik yang bisa digeser dan sebuah titik pusat.

Masalahnya, ketika menggunakan style.display ternyata sempat error. Dari yang titik pusatnya berubah, hingga gak kelihatan area juringnya.

Akhirnya coba pakai style.opacity dan berhasil.

Masih belum tau kenapa bisa begitu. Namun mungkin kalau opacity itu gak mengganggu draw juring yang terus dipanggil ketika ada perubahan di titik lain yang di geser (misal titik diameter atau jari-jari)

Demikian. Semoga bermanfaat.

Drag drop beberapa tujuan - mencoba efisiensi javascript

Mencoba mengefisienkan drag drop beberapa tujuan. 

Saya menggunakan array.

seperti ini :

var arbox = [];

for(var i=0;i<=5;i++){

arbox.push([arDrop[i], xydrop[i][0], xydrop[i][1], [] ]);

}

jadi si arDrop itu adalah tujuannya. 

xydrop adalah nilai x dan y si arDrop

dan [] terakhir di isi dengan btn yang masuk. 

kemudian ketika memasukkan btn ke drop saya gunakan ini :

if(el.ff){

arbox[el.j][3].push(el);

if(arbox[el.j][3].length==2){

var btnBack = arbox[el.j][3][0];

arbox[el.j][3].splice(0, 1);

btnBack.style.left = ""+ btnBack.x0 + "px";

btnBack.style.top = ""+ btnBack.y0 + "px";

btnBack.j = -1;

}

arbox[el.j][3][0].style.left = ""+arbox[el.j][1] + "px";

arbox[el.j][3][0].style.top = ""+arbox[el.j][2] + "px";

CekDrop();

}

jadi, ada kemungkinan 2 buah btn dalam 1 buah drop. sehingga perlu di geser yang pertama ke posisi x0 y0 nya dan baru memasukkan btn aktif ke drop.

saya gunakan splice, ambil di posisi array pertama setelah push array. Jadi si array isinya tetap satu btn.