Easing motion yang nama ilmiahnya Tween merupakan singkatan dari buffer motion. Jika Anda ingin konten halaman berpindah dengan nyaman, gunakan efek fade. Jika Anda ingin elemen halaman bergerak secara alami, gunakan efek pelonggaran. Mencampur keduanya dapat menghasilkan berbagai efek khusus. Terima kasih kepada pengembang Flash yang melakukan begitu banyak penelitian awal untuk kami, kami baru saja mengeluarkannya dan memasangnya di berbagai menu dan album foto. Mari kita mulai dengan hal yang paling sederhana, akselerasi dan deselerasi.
Karena bersifat pelonggaran, maka harus melibatkan konsep-konsep berikut: jarak, waktu dan kecepatan. Bayangkan ada garis lurus L, dan titik A dan B merupakan titik awal dan akhir L. Ada titik C yang bergerak pada garis lurus L, dari titik A ke titik B. Waktu yang dibutuhkan biasanya tidak diketahui, namun kecepatannya harus ditentukan. Lihatlah gambar di bawah ini, kita ingin kotak hijau bergerak pada strip geser yang ringan dan rapat. Sudut kiri atas lajur geser sama dengan titik A, sudut kanan atas sama dengan titik B, sudut kiri atas bujur sangkar sama dengan titik C, dan jarak geraknya adalah selisih lebar keduanya. . Karena benda yang kita gerakkan mempunyai lebar, maka titik C tidak akan pernah bisa berimpit dengan titik B. Namun tujuan yang akurat (untuk memudahkan, sebut saja titik D) diperlukan, dan kita harus menghitungnya. Karena pada saat gerak dipercepat, titik C sewaktu-waktu dapat melampaui titik D. Jika titik tersebut melampauinya, kita harus menghentikan gerakan tersebut dan menarik titik C kembali ke titik D.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transisi//EN">
<HTML>
<KEPALA>
<TITLE> Dokumen Baru </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Penulis" CONTENT="">
<META NAME="Kata Kunci" CONTENT="">
<META NAME="Deskripsi" KONTEN="">
</KEPALA>
<TUBUH>
<Jenis GAYA=teks/css>#jalur taksi {
LATAR BELAKANG: #e8e8ff; LEBAR: 800 piksel; TINGGI: 100 piksel
}
#bergerak {
LATAR BELAKANG: #a9ea00; LEBAR: 100 piksel; TINGGI: 100 piksel
}
</GAYA>
<ID DIV=jalur taksi>
<DIV id=move onclick=move(ini)></DIV></DIV>
<P class=notice display="text-align:center">Klik untuk memindahkan kotak hijau</P>
<Jenis SKRIP=teks/javascript>
var getCoords = fungsi(el){
var kotak = el.getBoundingClientRect(),
doc = el.pemilikDokumen,
badan = dok.badan,
html = doc.documentElement,
klienTop = html.klienTop ||.tubuh.klienTop || 0,
clientLeft = html.clientLeft ||.tubuh.clientLeft || 0,
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
kiri = kotak.kiri + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'atas': atas, 'kiri': kiri };
};
var getStyle = fungsi(el, gaya){
jika(!+"v1"){
style = style.replace(/-(w)/g, function(semua, huruf){
return letter.toUpperCase();
});
var nilai = el.currentStyle[gaya];
(nilai == "otomatis")&&(nilai = "0px" );
nilai kembalian;
}kalau tidak{
kembalikan dokumen.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}
//Fungsi bantu 3, setara dengan $(), tidak menggunakan simbol $ untuk menamainya karena taman blog menggunakan JQuery, yang akan menyebabkan konflik penamaan.
//Metode kueri elemen generasi baru saya memiliki kemampuan cache
var cache = []
var _ = fungsi(id){
kembalikan cache[id] || (cache[id] = dokumen.getElementById(id));
}
var pindah = fungsi(el){
el.style.position = "mutlak";
var mulai = getCoords(el).kiri,
jarak = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")),
akhir = mulai + jarak,
speed = 10, //Kecepatan gerakan pertama, dalam px/ms, secara implisit dikalikan dengan 1ms
delta = 1,5,
ubah = benar;
el.onclick = fungsi(){
jika(ubah){
el.innerHTML = "Percepatan";
(fungsi(){
setTimeout(fungsi(){
el.style.left = getCoords(el).left + kecepatan + "px";//Pindah
kecepatan *= delta; //Jarak pergerakan selanjutnya
if(getCoords(el).kiri >= akhir){
el.style.left = akhir + "px";
ubah = salah;
delta = 0,85,
kecepatan = 100;
}kalau tidak{
setTimeout(arguments.callee,25);//Tetap selama 25 milidetik setiap kali Anda bergerak
}
},25)
})()
}kalau tidak{
el.innerHTML = "Pelan-pelan";
(fungsi(){
setTimeout(fungsi(){
el.style.left = getCoords(el).left - kecepatan + "px";//Pindah
kecepatan = Math.ceil(kecepatan * delta); //Jarak perpindahan berikutnya
if(getCoords(el).kiri <= mulai ){
el.style.left = mulai + "px";
ubah = benar;
delta = 1,5,
kecepatan = 10;
}kalau tidak{
setTimeout(argumen.callee,25);
}
},25)
})()
}
}
}
jendela.onload = fungsi(){
pindah(_("pindah"))
}
</SKRIP>
</BODI></HTML>
Untuk mendapatkan koordinat dan ukurannya di halaman, getCoords() dan getStyle() ikut bermain lagi. Maaf, saya benar-benar tidak ingin memamerkan fungsi saya. Terlebih lagi, getStyle() telah banyak terpotong, dan kekuatannya tidak sekuat sebelumnya.
//Fungsi bantu 1
var getCoords = fungsi(el){
kotak var = el.getBoundingClientRect(),
doc = el.pemilikDokumen,
badan = dok.badan,
html = doc.documentElement,
klienTop = html.klienTop ||.tubuh.klienTop || 0,
clientLeft = html.clientLeft ||.tubuh.clientLeft || 0,
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
kiri = kotak.kiri + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'atas': atas, 'kiri': kiri };
};
//Fungsi bantu 2
var getStyle = fungsi(el, gaya){
jika(!+"v1"){
style = style.replace(/-(w)/g, function(semua, huruf){
return letter.toUpperCase();
});
var nilai = el.currentStyle[gaya];
(nilai == "otomatis")&&(nilai = "0px" );
nilai kembalian;
}kalau tidak{
kembalikan dokumen.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}