ผ่านข้อมูลออนไลน์และการรวบรวมของฉันเองฉันเขียนบทนำเกี่ยวกับฟังก์ชั่น HTML Shake และใช้เป็นข้อมูลสำรองทางเทคนิค
ประเด็นสำคัญของความรู้
1. DeviceMotionEvent
นี่คือเหตุการณ์การรับรู้แรงโน้มถ่วงที่สนับสนุนโดย HTML5 สำหรับเอกสารโปรดดู: http://w3c.github.io/deviceorientation/spec-source-orientation.html
การแนะนำเหตุการณ์:
อุปกรณ์ จัดหาข้อมูลทิศทางทางกายภาพของอุปกรณ์ซึ่งแสดงเป็นมุมการหมุนของชุดระบบพิกัดท้องถิ่น
DeviceMotion ให้ข้อมูลการเร่งความเร็วสำหรับอุปกรณ์ซึ่งแสดงเป็นพิกัด CARDI ที่กำหนดไว้ในระบบพิกัดบนอุปกรณ์ นอกจากนี้ยังให้อัตราการหมุนของอุปกรณ์ในระบบพิกัด หากเป็นไปได้เหตุการณ์ควรให้ข้อมูลการเร่งความเร็วที่ศูนย์กลางของแรงโน้มถ่วงของอุปกรณ์
CompassNeedScalibration ใช้เพื่อแจ้งเว็บไซต์เพื่อปรับเทียบเหตุการณ์ข้างต้นโดยใช้ข้อมูลเข็มทิศ
2. บทนำเกี่ยวกับเหตุการณ์
window.addeventListener ("deviceOrientation", ฟังก์ชั่น (เหตุการณ์) {// process event.alpha, event.beta และ event.gamma}, true);
{alpha: 90, beta: 0, gamma: 0};นี่คือพารามิเตอร์ที่ส่งคืนโดยเหตุการณ์อุปกรณ์ เพื่อให้ได้การชี้เข็มทิศคุณสามารถใช้ 360 องศาเพื่อลบอัลฟ่า ถ้ามันขนานกับพื้นผิวแนวนอนเข็มทิศชี้ไปที่ (360 - อัลฟ่า) หากผู้ใช้ถืออุปกรณ์หน้าจอจะอยู่ในระนาบแนวตั้งและด้านบนของหน้าจอชี้ขึ้น มูลค่าของเบต้าคือ 90 อัลฟ่าและแกมม่าไม่เกี่ยวข้อง อุปกรณ์พกพาของผู้ใช้หันหน้าไปทางมุมอัลฟ่าหน้าจออยู่ในหน้าจอแนวตั้งและด้านบนของหน้าจอชี้ไปทางขวาและข้อมูลทิศทางของมันมีดังนี้
{Alpha: 270- Alpha, Beta: 0, Gamma: 90};ลงทะเบียนตัวรับสัญญาณสำหรับเหตุการณ์ DeviceMotion:
การคัดลอกรหัสมีดังนี้: window.addeventListener ("devicemotion", ฟังก์ชั่น (เหตุการณ์) {// การประมวลผลเหตุการณ์การเร่งด่วน, event.accelerationincludegravity, // event.rotationrate และ event.interval}, จริง);
วางอุปกรณ์ไว้ด้านบนของยานพาหนะด้วยหน้าจอในระนาบแนวตั้งโดยหันหน้าขึ้นด้านบนและหันหน้าไปทางด้านหลังของยานพาหนะ ยานพาหนะเดินทางด้วยความเร็ว V และเลี้ยวไปทางขวาด้วยรัศมี r อุปกรณ์บันทึกสถานการณ์ที่การเร่งความเร็วและการเร่งความเร็วรวมอยู่ที่ตำแหน่ง X และอุปกรณ์ยังบันทึกค่าลบของ rotationrate.gamma:
{การเร่งความเร็ว: {x: v^2/r, y: 0, z: 0}, accelerationincludedGravity: {x: v^2/r, y: 0, z: 9.81}, rotationrate: {alpha: 0, beta: 0, gamma: -v/r*180/pi};การใช้งานฟังก์ชั่น
if (window.devicemotionevent) {window.addeventListener ('devicemotion', yaoyiyao, false); } var speed = 30; // speed var x = y = z = lastx = liny = lastz = 0; ฟังก์ชั่น yaoyiyao (eventData) {var acceleration = eventData.accelerationincludedGravity; x = acceleration.x; y = การเร่งความเร็ว z = acceleration.z; if (math.abs (x-lastx)> speed || math.abs (y-lasty)> ความเร็ว || math.abs (z-lastz)> ความเร็ว) {// การแจ้งเตือนรหัสทริกเกอร์สั่นสะเทือนแบบง่าย (1); } lastx = x; สุดท้าย = y; lastz = z; -ขั้นแรกให้ตรวจสอบว่าเบราว์เซอร์รองรับกิจกรรมนี้หรือไม่
Yaoyiyao ใช้เพื่อตรวจสอบว่าโทรศัพท์มือถือสั่นหรือไม่ โดยเฉพาะอย่างยิ่งคือการรับข้อมูลมือถือของโทรศัพท์มือถือและเก็บไว้ในตัวแปรภายนอก เมื่อเหตุการณ์การสั่นสะเทือนถูกกระตุ้นอีกครั้งในครั้งต่อไปให้ตรวจสอบว่าพิกัดการเขย่าครั้งสุดท้ายและพิกัดการเขย่าปัจจุบันอยู่ในช่วงของการระดมพลบ่อยครั้งหรือไม่: Math.Abs (X-Lastx)> ความเร็ว || math.abs (y-lasty)> ความเร็ว || math.abs (z-lastz)> ความเร็วความเร็ว>
โดยทั่วไปหากเป็นไปตามเงื่อนไขนี้โทรศัพท์จะอยู่ในสถานะสั่นและเพิ่มรหัสเขย่าที่คุณต้องการเรียกใช้ในคำสั่ง IF
ข้างต้นเป็นแนวคิดในการใช้ฟังก์ชั่นการเขย่า HTML5 และฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคน