การเคลื่อนที่แบบผ่อนคลาย ซึ่งมีชื่อทางวิทยาศาสตร์ว่า Tween เป็นตัวย่อของการเคลื่อนที่แบบบัฟเฟอร์ หากคุณต้องการให้เนื้อหาของหน้าสลับได้อย่างสะดวกสบาย ให้ใช้เอฟเฟกต์จางหาย หากคุณต้องการให้องค์ประกอบของหน้าเคลื่อนไหวอย่างเป็นธรรมชาติ ให้ใช้เอฟเฟกต์การค่อยๆ เปลี่ยน การผสมทั้งสองสิ่งนี้จะสามารถสร้างเอฟเฟกต์พิเศษได้หลากหลาย ขอขอบคุณนักพัฒนา Flash ที่ทำการวิจัยเบื้องต้นให้เรามากมาย เราจึงนำมันออกมาและติดตั้งในเมนูและอัลบั้มรูปภาพต่างๆ เริ่มจากสิ่งที่ง่ายที่สุดกันก่อน ความเร่งและการชะลอตัว
เนื่องจากเป็นการผ่อนปรนจึงต้องเกี่ยวข้องกับแนวคิดต่อไปนี้ ระยะทาง เวลา และความเร็ว เราจินตนาการได้ว่ามีเส้นตรง L และจุด A และ B เป็นจุดเริ่มต้นและจุดสิ้นสุดของ L มีจุด C เคลื่อนที่บนเส้นตรง L จากจุด A ไปยังจุด B โดยทั่วไปไม่ทราบเวลาที่ต้องใช้ แต่ต้องกำหนดความเร็ว ดูภาพด้านล่าง เราต้องการให้สี่เหลี่ยมสีเขียวเคลื่อนตัวไปตามแสงและแถบเลื่อนที่แน่นหนา มุมซ้ายบนของแถบเลื่อนเทียบเท่ากับจุด A มุมขวาบนเทียบเท่ากับจุด B มุมซ้ายบนของสี่เหลี่ยมจัตุรัสเทียบเท่ากับจุด C และระยะการเคลื่อนที่คือความแตกต่างระหว่างความกว้างของทั้งสอง . เนื่องจากวัตถุที่เราเคลื่อนที่มีความกว้าง กล่าวคือ จุด C ไม่สามารถตรงกับจุด B ได้ แต่จำเป็นต้องมีจุดหมายปลายทางที่แม่นยำ (เพื่อความสะดวกขอเรียกว่าจุด D) และเราต้องคำนวณให้ได้ เพราะในระหว่างการเคลื่อนที่ด้วยความเร่ง จุด C อาจเกินจุด D เมื่อใดก็ได้ เมื่อเกินจุดนั้น เราต้องยุติการเคลื่อนไหวและดึงจุด C กลับไปที่จุด D
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<หัว>
<TITLE> เอกสารใหม่ </TITLE>
<META NAME="เครื่องกำเนิดไฟฟ้า" CONTENT="แก้ไขพลัส">
<META NAME="ผู้เขียน" เนื้อหา="">
<META NAME="คำหลัก" เนื้อหา="">
<META NAME="คำอธิบาย" เนื้อหา="">
</HEAD>
<ร่างกาย>
<STYLE type=text/css>#แท็กซี่เวย์ {
พื้นหลัง: #e8e8ff; กว้าง: 800px; ความสูง: 100px
-
#เคลื่อนไหว {
พื้นหลัง: #a9ea00; กว้าง: 100px;
-
</สไตล์>
<DIV id=แท็กซี่เวย์>
<DIV id=move onclick=move(นี้)></DIV></DIV>
<P class=notice display="text-align:center">คลิกเพื่อย้ายสี่เหลี่ยมสีเขียว</P>
<ประเภทสคริปต์=ข้อความ/จาวาสคริปต์>
var getCoords = ฟังก์ชั่น(el){
กล่อง var = el.getBoundingClientRect(),
doc = el.ownerDocument,
ร่างกาย = doc.body,
html = doc.documentElement,
clientTop = html.clientTop ||. body.clientTop ||.
ลูกค้าซ้าย = html.clientLeft ||. body.clientLeft || 0,
ด้านบน = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
ซ้าย = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - ลูกค้าซ้าย
กลับ { 'บน': บนสุด 'ซ้าย': ซ้าย };
-
var getStyle = ฟังก์ชั่น (el, สไตล์) {
ถ้า(!+"v1"){
style = style.replace(/-(w)/g, ฟังก์ชั่น (ทั้งหมด, ตัวอักษร) {
กลับจดหมายtoUpperCase();
-
ค่า var = el.currentStyle[สไตล์];
(value == "อัตโนมัติ")&&(value = "0px" );
ค่าส่งคืน;
}อื่น{
กลับ document.defaultView.getComputedStyle (el, null).getPropertyValue (สไตล์)
-
-
//ฟังก์ชันเสริม 3 ซึ่งเทียบเท่ากับ $() ไม่ได้ใช้สัญลักษณ์ $ ในการตั้งชื่อ เนื่องจากบล็อกพาร์คใช้ JQuery ซึ่งจะทำให้การตั้งชื่อขัดแย้งกัน
//วิธีการสืบค้นองค์ประกอบรุ่นใหม่ของฉันมีความสามารถในการแคช
แคช var = []
var _ = ฟังก์ชั่น (id) {
กลับแคช[id] ||. (แคช[id] = document.getElementById(id));
-
var ย้าย = ฟังก์ชั่น (el) {
el.style.position = "สัมบูรณ์";
var start = getCoords(el).left,
ระยะทาง = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")),
สิ้นสุด = เริ่มต้น + ระยะทาง
ความเร็ว = 10 // ความเร็วของการเคลื่อนไหวครั้งแรกในหน่วย px/ms คูณโดยนัยด้วย 1ms
เดลต้า = 1.5,
เปลี่ยน = จริง;
el.onclick = ฟังก์ชั่น(){
ถ้า(เปลี่ยน){
el.innerHTML = "การเร่งความเร็ว";
(การทำงาน(){
setTimeout(ฟังก์ชัน(){
el.style.left = getCoords(el).left + ความเร็ว + "px";//Move
ความเร็ว *= เดลต้า; // ระยะการเคลื่อนที่ถัดไป
if(getCoords(el).left >= สิ้นสุด){
el.style.left = สิ้นสุด + "px";
เปลี่ยน=เท็จ;
เดลต้า = 0.85,
ความเร็ว = 100;
}อื่น{
setTimeout(arguments.callee,25);//คงเป็นเวลา 25 มิลลิวินาทีทุกครั้งที่คุณเคลื่อนไหว
-
},25)
-
}อื่น{
el.innerHTML = "ช้าลง";
(การทำงาน(){
setTimeout(ฟังก์ชัน(){
el.style.left = getCoords(el).left - ความเร็ว + "px";//Move
ความเร็ว = Math.ceil (ความเร็ว * เดลต้า); // ระยะการเคลื่อนที่ถัดไป
ถ้า(getCoords(el).left <= เริ่มต้น ){
el.style.left = เริ่มต้น + "px";
เปลี่ยน = จริง;
เดลต้า = 1.5,
ความเร็ว = 10;
}อื่น{
setTimeout(อาร์กิวเมนต์.callee,25);
-
},25)
-
-
-
-
window.onload = ฟังก์ชั่น () {
ย้าย(_("ย้าย"))
-
</สคริปต์>
</BODY></HTML>
เพื่อให้ได้พิกัดและขนาดบนเพจ getCoords() และ getStyle() จะกลับมามีบทบาทอีกครั้ง ขอโทษที ฉันไม่อยากอวดหน้าที่ของตัวเองจริงๆ ยิ่งไปกว่านั้น getStyle() ถูกตัดออกไปเยอะมาก และพลังของมันก็ไม่ได้ทรงพลังเหมือนเมื่อก่อน
//ฟังก์ชันเสริม 1
var getCoords = ฟังก์ชั่น(el){
กล่อง var = el.getBoundingClientRect()
doc = el.ownerDocument,
ร่างกาย = doc.body,
html = doc.documentElement,
clientTop = html.clientTop ||. body.clientTop ||.
ลูกค้าซ้าย = html.clientLeft ||. body.clientLeft || 0,
ด้านบน = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
ซ้าย = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - ลูกค้าซ้าย
กลับ { 'บน': บนสุด 'ซ้าย': ซ้าย };
-
//ฟังก์ชันเสริม 2
var getStyle = ฟังก์ชั่น (el, สไตล์) {
ถ้า(!+"v1"){
style = style.replace(/-(w)/g, ฟังก์ชั่น (ทั้งหมด, ตัวอักษร) {
กลับจดหมายtoUpperCase();
-
ค่า var = el.currentStyle[สไตล์];
(value == "อัตโนมัติ")&&(value = "0px" );
ค่าส่งคืน;
}อื่น{
กลับ document.defaultView.getComputedStyle (el, null).getPropertyValue (สไตล์)
-
-