כיצד לבצע אנימציה

א מד מד הוא כלי המציין ויזואלית ערך בטווח נתון. במחשבים, א “מחוון שטח דיסק” משתמש מד מד כדי להראות כמה שטח דיסק משמש מכלל זמין. מדדים יש אזורים או אזורים על פני טווח שלה, כל אחד מובחן על ידי צבע משלה. בפיתוח הקדמי, אנחנו יכולים להשתמש תג HTML5 להצגת נתונים בטווח מסוים.

פוסט זה, אנחנו נעשה מד מד SVG של צורה חצי עגול, ואת הנפשת אותו. תסתכל על תצוגה מקדימה GIF זה מראה איך הגירסה הסופית תעבוד ב - FirefoxYou

המונה טווח הוא 0-100, והוא מציג שלושה אזורים שווים בצהוב, כחול ואדום. ניתן לשנות את הטווח ואת מספר האזורים בהתאם לצרכים שלך.

למטרות הסבר, ניתן לבצע חישובים ידניים, ולהשתמש בתכונות / תכונות SVG בתוך השלבים הבאים.

הדגמה הסופית שלי, לעומת זאת, משתמשת ב- CSS ו- JavaScript לחישוב והכנסת מאפייני SVG כדי להפוך אותו לגמיש יותר.

1. צייר מעגל

בואו לצייר עיגול פשוט ב- SVG. HTML5 זה חדש תג מאפשר לנו להוסיף SVG הנכון לתוך קוד ה- HTML. בתוך ה תג, אנו מוסיפים את צורת SVG כך:

ב CSS, בואו להוסיף רוחב ו גובה המאפיינים לעטיפה, שניהם גדולים או שווים לקוטר המעגל (זה 300px בדוגמה שלנו). אנחנו גם צריכים להגדיר את רוחב וגובה של #מטר אלמנט 100%.

 #wrapper width: 400px; גובה: 400px;  # מטר רוחב: 100%; גובה: 100%; 

2. הוסף מתאר למעגל ולהסיר מילוי

בעזרתו של שבץ ו רוחב שבץ תכונות SVG אנו מוסיפים מתאר למעגל, ועל ידי שימוש למלא 49 "none" אנו מסירים את המילוי של המעגל גם כן.

3. לכסות רק חצי של המעגל

ה שבץ מאפיין SVG יוצר קווי מתאר מקווקווים, ולוקח שני ערכים, אורך מקף ו אורך הפער.

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

כאשר הוא יותר, הוא יומר להיקף הנותר על ידי הדפדפן, ולכן נשתמש בערך ההיקף המלא של אורך הפער. כך נוכל להימנע מחישוב ההיקף הנותר.

בואו נראה את החישובים:

$\mathrm{היקף}=2ד\; ??\; Â\; ??\; ד¢??\; ??\pi \times \mathrm{ייצור}$

איפה ייצור הוא הרדיוס. ברדיוס של 150, ההיקף הוא:

$\begin{array}{}\mathrm{היקף}=2ד\; ??\; Â\; ??\; ד¢??\; ??\pi \times \mathrm{150}\\ \mathrm{היקף}=942.48\end{array}$

אם נחלק אותו ב -2, נקבל 471.24 עבור חצי-היקף, אז הערך של שבץ נכס עבור מעגל חצי מעגל במעגל 150 רדיוס הוא 471, 943. זה חצי מעגל ישמש לציון אזור נמוך טווח של מטר.

כפי שאתה רואה, זה הפוך, אז בואו להפוך את SVG על ידי הוספת שינוי צורה מאפיין CSS עם הערך של rotateX (180deg) אל ה אלמנט HTML.

 #meter transform: rotateX (180deg); 

4. הוסף את האזורים האחרים

ה אזור ביניים (כחול) יש לכסות את החלק of של חצי מעגל, ו ⅔ של 471 הוא 314. אז, בואו להוסיף עוד מעגל SVG שלנו באמצעות שבץ רכוש שוב, אבל עכשיו עם הערך של 314, 943.

  < /circle>  

ה אזור סופי (אדום) יש לכסות את החלק האחרון of של חצי מעגל, ו ⅓ של 471 הוא 157, ולכן נוסיף ערך זה שבץ רכושו של המעגל השלישי.

5. הוסף את מתאר מטר

בואו להוסיף מתאר אפור למטר כדי לגרום לזה להיראות טוב יותר. ה אורך מקף של המעגל המתאר צריך להיות שווה למחצה היקף. אנחנו מניחים אותו לפני כל המעגלים האחרים בקוד, כך שזה יהיה שניתנו לראשונה על ידי הדפדפן, ולכן יהיה המוצגים מתחת למעגלים באזור על המסך.

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

     < /circle>      

מסתיים קווי מתאר

כפי מתאר אינו מכסה את הקצוות של חצי מעגל, אנחנו גם להוסיף 2 שורות של 2px על הקצוות על ידי הוספת מעגל נוסף עם אורך מקף של 2px ו- a אורך הפער של היקף חצי מינוס 2px. לכן הערך של שבץ המאפיין של המעגל הזה הוא 2, 469.

מסכה

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

המאפיינים שלה יהיו זהים לאלה של מעגל מיתאר, צבע שבץ שלה יהיה גם אפור. המסיכה תהיה מאוחר יותר עם גודל Javascript לחשוף את האזורים מתחתיו בתגובה מחוון קלט.

הקוד המשולב עד כה הוא כמו להלן.

אם אנחנו רוצים לחשוף אזור תחת המסכה, אנחנו צריכים להקטין את גודל המסכה אורך מקף. לדוגמה, כאשר הערך של שבץ המאפיין של מעגל המסכה הוא 157, 943, את קשתות יעמוד במצב הבא:

אז, כל מה שאנחנו צריכים לעשות עכשיו הוא להתאים את שבץ של המסכה באמצעות JavaScript עבור אנימציה. אבל לפני שאנחנו עושים את זה, כפי שהזכרתי קודם, עבור הדגמה הסופית שלי השתמשתי ב- CSS ו- JavaScript כדי לחשב ולהוסיף את רוב המאפיינים SVG.

בהמשך תוכל למצוא את קוד HTML, CSS ו- JavaScript המוביל לאותה תוצאה כמפורט למעלה.

HTML

הוספתי תמונה מחט (gauge-needle.svg), מחוון טווח (קלט # המחוון) אל קלט המשתמש ותווית (תווית # lbl) כדי להציג את ערך המחוון בטווח של 0-100.

    0 
 

CSS

קוד CSS להלן מוסיף כללי סגנון ל- SVG, שכן צורות SVG יכולות להיות מנוסחות באותה צורה כמו רכיבי HTML. אם אתה רוצה לקרוא עוד על איך סגנון SVG עם CSS, תסתכל על הפוסט הזה. לסגנון המחוון, בדוק את הפוסט הזה.

 #wrapper מיקום: יחסית; margin: auto;  # מטר רוחב: 100%; גובה: 100%; transformat: rotatex (180deg);  .circle מלא: none; . outline, #mask stroke: # F1F1F1; stroke-width: 65;  .range stroke-width: 60;  #slider, #lbl position: מוחלט;  #slider הסמן: מצביע; משמאל: 0; margin: auto; .. you top: 58%; רוחב: 94%;  #lbl צבע רקע: # 4B4C51; border-radius: 2px; צבע לבן; font-family: 'שליח חדש'; font-size: 15pt; מודגש; ריפוד: 4px 4px 2px 4px; right: -48px; top: 57%;  #meter_needle גובה: 40%; משמאל: 0; margin: auto; תפקיד מוחלט .. you top: 10%; מוצא-מוצא: מרכז תחתון; / * תיקון כיוון * / המרה: לסובב (270deg); 

JavaScript

ב- JavaScript, תחילה אנו מחשבים את הממדים של העטיפה ואת כל הקשתות, ולאחר מכן אנו מוסיפים את המתאים שבץ ערכים למעגלים. לאחר מכן, אנו יחייבו אירוע מותאם אישית על המחוון טווח כדי לבצע את האנימציה.

 / * הגדר רדיוס לכל המעגלים * / var r = 250; מעגלים var = document.querySelectorAll ('מעגל'); var total_circles = circles.length; (var i = 0; i < total_circles; i++)  circles[i].setAttribute('r', r);  /* Set meter's wrapper dimension */ var meter_dimension = (r * 2) + 100; var wrapper = document.querySelector("#wrapper"); wrapper.style.width = meter_dimension + "px"; wrapper.style.height = meter_dimension + "px"; /* Add strokes to circles */ var cf = 2 * Math.PI * r; var semi_cf = cf / 2; var semi_cf_1by3 = semi_cf / 3; var semi_cf_2by3 = semi_cf_1by3 * 2; document.querySelector("#outline_curves") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#low") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#avg") .setAttribute("stroke-dasharray", semi_cf_2by3 + "," + cf); document.querySelector("#high") .setAttribute("stroke-dasharray", semi_cf_1by3 + "," + cf); document.querySelector("#outline_ends") .setAttribute("stroke-dasharray", 2 + "," + (semi_cf - 2)); document.querySelector("#mask") .setAttribute("stroke-dasharray", semi_cf + "," + cf); /* Bind range slider event*/ var slider = document.querySelector("#slider"); var lbl = document.querySelector("#lbl"); var mask = document.querySelector("#mask"); var meter_needle = document.querySelector("#meter_needle"); function range_change_event()  var percent = slider.value; var meter_value = semi_cf - ((percent * semi_cf) / 100); mask.setAttribute("stroke-dasharray", meter_value + "," + cf); meter_needle.style.transform = "rotate(" + (270 + ((percent * 180) / 100)) + "deg)"; lbl.textContent = percent + "%";  slider.addEventListener("input", range_change_event); 

המנהג range_change_event () פונקציה

התנהגות המונה מבוצעת על ידי range_change_event () פונקציה מותאמת אישית, כי הוא אחראי על התאמת גודל המסיכה ואת האנימציה של המחט.

זה לוקח את הערך המחוון (קלט המשתמש) אשר בין 0-100, ממיר אותו אל חצי שווה היקף (מטר) של ערך בין 471-0 (471 הוא חצי למחצה לרדיוס 150), וקובע את זה מטר כמו אורך מקף של המסכה שבץ נכס.

ה range_change_event () פונקציה מותאמת אישית גם מסובב את המחט לאחר המרת קלט המשתמש (מגיע בטווח 0-100) במידה שווה שלה 0-180.

270 ° הוא הוסיף את המחט של סיבוב בקוד לעיל כי התמונה השתמשתי הוא מחט זקוף ואני צריך לסובב אותו תחילה 270 ° כדי להפוך אותו לשכב משמאל.

לבסוף, אני כבול range_change_event () פונקציה כדי המחוון טווח, כך מד מד יכול להיות מופעל עם זה.

בדוק את הדגמה או תסתכל על קוד המקור שלנו מאגר Github.