التعليق: وظيفة الهز على الهاتف المحمول جيدة. كيفية تنفيذها
في مؤتمر مطور BAIDU ، قدمت ميزة مهمة أخرى من HTML5 ، والتي هي Deviceorientation ، التي تغلف مستشعر الاتجاه الأساسي ومستشعر الحركة في عبوة عالية المستوى وتوفر الدعم لأحداث DOM. تتضمن هذه الميزة حدثين:
1. DeviceorIcation: يحمل الحدث بيانات مستشعر الاتجاه ، ويمكنه الحصول على بيانات الاتجاه في الحالة الثابتة للهاتف المحمول ، مثل الزاوية والاتجاه والتوجه ، إلخ. من الهاتف المحمول.
2. DeviceMotion: الأحداث تغلف بيانات مستشعر الحركة ، ويمكنها الحصول على بيانات مثل تسارع الحركة في حالة الحركة للهاتف المحمول.
باستخدامه ، يمكننا بسهولة تحقيق وظائف مثيرة للاهتمام مثل استشعار الجاذبية والبوصلة ، والتي ستكون مفيدة للغاية على الهواتف المحمولة. على سبيل المثال ، يتم تحقيق مثال كرة استشعار الجاذبية في الإصدار التجريبي للأوبرا H5 من خلال مراقبة حدث Deviceorilection من واجهة برمجة تطبيقات Deviceorientation.
استخدم HTML5 لتحقيق وظيفة هز هاتفكفي الواقع ، يمكن أن يساعدنا أيضًا في تحقيق وظيفة شائعة وعصرية للغاية في تطبيق الهاتف المحمول على صفحة الويب: هز الهاتف المحمول.
رأيت أولاً هذه الوظيفة في PhotoShake ، وبعد ذلك ، أضافت العديد من التطبيقات ، بما في ذلك WeChat ، هذه الوظيفة.
استخدم HTML5 لتحقيق وظيفة هز هاتفكإذا كنت قد قمت بتطوير Android أو iOS ، فقد تكون على دراية بهذه الميزات. ولكن أدناه ، سنقوم بتنفيذ هذه الوظيفة لأول مرة على الويب.
لنبدأ بسرعة!
يقوم DeviceMotionevent بإرجاع المعلومات ذات الصلة بالجهاز حول التسارع والدوران. سوف تحتوي بيانات التسارع على ثلاثة محاور: x و y و z (معروضة بشكل تخطيطي في الشكل أدناه ، يخترق المحور السيني شاشة الهاتف المحمول أو لوحة مفاتيح الكمبيوتر المحمول أفقياً ، يدير المحور ص شاشة الهاتف المحمول أو لوحة مفاتيح الكمبيوتر المحمول عموديًا ، ويكون المحور z عموديًا على شاشة الهاتف المحمول أو المفاتيح المحمولة). نظرًا لأن بعض الأجهزة قد لا تحتوي على أجهزة لاستبعاد تأثير الجاذبية ، فإن الحدث يعيد خصائصين ، تسريع الجاذبية والتسارع ، والتي تستبعد تأثير الجاذبية.
استخدم HTML5 لتحقيق وظيفة هز هاتفك
دعونا نراقب أحداث استشعار الحركة أولاً.
[JavaScript]
if (window.devicemotionevent) {
window.addeventListener ('devicemotion' ، deviceMotionHandler ، false) ؛
}
[/javaScript]
ثم الحصول على تسارع يحتوي على الجاذبية.
[JavaScript]
وظيفة deviceMotionHandler (eventData) {
var receleration = eventData.AccelerationIncludeGravity ؛
}
[/javaScript] </p> <p>
فيما يلي حول كيفية حساب مبدأ المستخدمين الذين يهزون هواتفهم. النقاط الرئيسية التي يجب مراعاتها هي على النحو التالي:
1. معظم المستخدمين يهزون هواتفهم في اتجاه واحد لتهتز ؛
2. سوف تتغير بيانات التسارع في ثلاثة اتجاهات بالتأكيد عند الهز ؛
3. لا يمكننا إساءة تقدير سلوك الحركة العادية للهواتف المحمولة. فكر في الأمر ، إذا تم وضع هاتفك المحمول في جيبك ، فسيحتوي أيضًا على تغييرات بيانات التسارع عند المشي.
باختصار ، يجب علينا حساب التسارع في ثلاثة اتجاهات ، وقياسها على فترات ، ودراسة معدل التغير على مدى فترة زمنية محددة ، ونحتاج إلى تحديد عتبة لها لتشغيل الإجراء.
نحتاج إلى تحديد العديد من المتغيرات لتسجيل بيانات محاور X و Y و Z التاريخية ووقت آخر مشغل. رمز تنفيذ الطريقة الأساسية كما يلي:
var Shake_threshold = xxx ؛
var last_update = 0 ؛
var x ، y ، z ، last_x ، last_y ، last_z ؛
وظيفة deviceMotionHandler (eventData) {
var receleration = eventData.AccelerationIncludeGravity ؛
var curtime = newDate (). getTime () ؛
if ((curtime - lastupdate) & gt ؛ 100) {
var difftime = curtime -last_update ؛
last_update = curtime ؛
x = التسارع. x ؛
y = التسارع.
z = التسارع.
var speed = math.abs (x + y + z - last_x - last_y - last_z) / difftime * 10000 ؛
if (Speed & gt ؛ Shake_threshold) {
تنبيه ("Shaked!") ؛
}
last_x = x ؛
last_y = y ؛
last_z = z ؛
}
}
من هذا ، لقد أكملنا وظيفة هز الهاتف. أليس الأمر بسيطًا جدًا؟