מגע מדויק לתנועות מדויקות

שינוי נכנס לתוקף בהטמעה של TouchEvents של Chrome, נכון לגרסה M37 (יציב ב-08/2014), שמשנה את הקואורדינציה בדוחות כמספרים צפים במקום במספרים שלמים.

לפני אחרי
clientX: 167
clientY: 196
pageX:   167
pageY:   196
radiusX: 26
radiusY: 26
screenX: 167
screenY: 277
clientX: 167.33299255371094
client385X7094
client383700744628906
pageX: 167.33299255371094
pageY: 195.66700744628906 pageY: 195.66700744628906


המשמעות של השינוי הזה היא שתגובה לתנועות של המשתמשים תהיה חלקה יותר, כי כך המיקום של האצבעות גבוה יותר.

בעזרת ההדגמה של ריק באיירס תוכלו לראות עד כמה השינוי הזה יכול לעשות אם לוקחים את התנועה בחזרה לאט.

הבדלים באירועי מגע.

הפעולה הזו תשפיע רק על מסכים עם צפיפות פיקסלים שגדולה מ-1. כדי להבין למה, נציג דוגמה.

נניח שיש לכם רשת של פיקסלים ב-CSS בגודל 3x3, ודחיסות המסך היא 3. כלומר, יש לנו רשת של פיקסלים פיזיים מסוג 9x9, והתנועות של המשתמשים מופיעות מהפינה השמאלית העליונה לפינה הימנית התחתונה.

רשת הפיקסלים והפיקסלים של המסך ב-CSS.

במקור, עגלנו את מיקום המגעים לפיקסל ה-CSS הקרוב ביותר. כלומר, בתנועה הזו תצטרכו לבצע את השלבים הבאים.

דיוק פיקסלים ב-CSS במהלך התנועה.

אנחנו מפספסים את כל שלבי הביניים שהפיקסלים הפיזיים עשויים להופיע כאשר המשתמש מזיז את האצבע.

עכשיו, לאחר שעברנו ל'ציפה', התנועה שלנו יכולה להיראות כך.

רמת הדיוק של הציפה במהלך התנועה.

ברוב המקרים לא תצטרכו לשנות את הקוד, אבל האנימציות או התנועות שתבצעו כתוצאה מ-TouchEvents יהיו חלקות יותר, במיוחד לתנועות איטיות.

אנחנו מתכננים להוסיף את השיפור הזה גם ל-Safari לנייד: https://bugs.webkit.org/show_bug.cgi?id=133180.