เมื่อเร็ว ๆ นี้เมื่อฉันใช้แอพ OFO Little Yellow Car ฉันพบว่าการกวาดก่อนหน้านี้ก่อนหน้านี้กลายเป็นชายสีเหลืองตัวเล็ก ๆ ที่มีดวงตาและรู้สึกว่าน่าสนใจมาก
Ofo Eye Effect การวิเคราะห์ผลไม่ยากที่จะมองเห็นจากผลกระทบที่เกิดขึ้นกับเหตุการณ์ไจโรสโคป
ลองมาดูแนวคิดบางอย่างของเหตุการณ์ Gyroscope ใน HTML5
เหตุการณ์ Gyroscope คือ deviceorientation
ซึ่งส่วนใหญ่จะได้รับ alpha
beta
gamma
ในเหตุการณ์
เมื่ออุปกรณ์มือถือถูกวางในแนวนอนมุมของการหมุนรอบแกน z คือ 0 องศาถึง 360 องศา
เบต้าเมื่ออุปกรณ์มือถือถูกวางในแนวนอนมุมของการหมุนรอบแกน x ค่าคือ -180 องศาถึง 180 องศา
แกมม่าเมื่อการดำเนินการถูกวางในแนวนอนมุมของการหมุนรอบแกน z คือค่า -90 องศาถึง 90 องศา
ที่นี่คุณจะต้องใช้เบต้าและแกมม่าเท่านั้น
เปิดเครื่องซิป APK และรับวัสดุตา:
การใช้รหัส<! = ไม่> <title> เอกสาร </title> <style> #box {บวก: เกี่ยวข้อง: 300px; ปก; ด้านบน: 90px; แก้ว {ภาพพื้นหลัง: URL (images/glass.png); = กล่อง> <div id = face> </div> <div id = eyeleft> </div> <div id = eyeright> </div> <div id = glass> </div> <div id = log> < /div> </div> <script> 'ใช้อย่างเข้มงวด';/** ผู้แต่ง: วัง leping* วันที่: 2017.7.17*/var eyeleftposition = {start: [70, 78], สิ้นสุด: [100, 110]} ; : (eyeleftposition.end [1] -emeleftposition [1]) / 2 + eyeleftposition [1]}; [0], Y: (eyerightposition.end [1] -eyerightPosition.start [1]) / 2 + eyerightposition.start [1]}; ; style.left = eyeleftcenterposition.x + gamma / 90 * r + 'px'; / 180 * r + 'px'; eyeright.style.transform = eyeleft.transform = eyeright.webkittransform = eyelele ft.style.webkittransform = 'rotate (' + beta + 'deg)'; document.querySelector ('body')
เอฟเฟกต์สูงสุด
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้