כיצד ליצור הנפשות אינטרנט מקודדות עם Mo.JS

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

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

---

---

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

הזן Mo.js

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

לפני שנמשיך הלאה, בואו נסתכל על מה שאנחנו הולכים ליצור היום:

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

הגדר עט חדש ותקבל את פניך במסך זה:

---

---

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

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

---

---

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

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

צורות בסיסיות עם Mo.js

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

body{
background: rgba(11,11,11,1);
}

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

const redCirc = new mojs.Shape({
isShowStart:true
});

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

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

מעגל זה הוא ברירת המחדל צוּרָה עבור mo.js. אנו יכולים לשנות צורה זו בקלות על ידי הוספת שורה לקוד שלנו:

const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});

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

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

יסודות התנועה

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

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});

כפי שאתה יכול לראות, הקצנו גם א רוֹחַב ערך לשבץ, ו- רַדִיוּס עבור המעגל. הדברים כבר מתחילים להיראות קצת אחרת. אם הצורה שלך לא מתעדכנת, ודא שלא פספסת פסיקים או מרכאות בודדות מסביב 'נֶטוֹ' אוֹ 'אף אחד' , וודא שלחצת לשמור בתחילת הדף.

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

radius: {15:30},
opacity: {1:0},
duration:1000

על ידי שינוי ה רַדִיוּס רכוש, והוספת אֲטִימוּת ו מֶשֶׁך נכסים, נתנו את ההוראות לצורה לבצע לאורך זמן. אלו הם דֶלתָא אובייקטים, החזקת מידע התחלה וסיום עבור נכסים אלה.

תבחין ששום דבר עדיין לא קורה. הסיבה לכך היא שלא הוספנו את .לְשַׂחֵק() פונקציה לומר לו לבצע את ההוראות שלנו. הוסף אותו בין סוגרי הקצה והפסיק, וכדאי שתראה את המעגל שלך מתעורר לחיים.

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

הזמנה והקלה עם Mo.js

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

אנחנו יכולים לעשות זאת עם .לאחר מכן() פוּנקצִיָה. במקום שהרדיוס או האטימות שלנו ישתנו, בואו לגרום לצורה שלנו להישאר היכן שהיא מתחילה, לפני שנשתנה לאחר פרק זמן מוגדר.

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

כעת, הצורה שלנו תופיע עם הערכים שהקצנו לה, המתן 1000 אלפיות השנייה, לפני שנבצע כל מה שהכנסנו .לאחר מכן() פוּנקצִיָה. נוסיף כמה הוראות בין הסוגריים:

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

קוד זה מציג חלק חשוב נוסף באנימציה. היכן שהנחנו את סוּלָם כדי לשנות מ -1 ל -2, הקצנו גם הקלה המבוססת על גל סינוס sin.in . ל- Mo.js מגוון עקומות הקלה מובנות, עם אפשרות למשתמשים מתקדמים להוסיף משלהם. במקרה זה, הסולם לאורך זמן קורה על פי גל סינוס המתעקל כלפי מעלה.

לקבלת הצגה חזותית של עקומות שונות, בדוק easings.net . שלב את זה עם שבץ רוחב משתנה ל 0 במשך משך הזמן שנקבע לנו, ויש לך אפקט נעלם הרבה יותר דינמי.

צורות הן הבסיס לכל דבר ב- Mo.js, אך הן רק ההתחלה של הסיפור. בוא נסתכל על פרצים .

מתפרץ עם פוטנציאל ב- Mo.js

ל הִתפָּרְצוּת ב- Mo.js הוא אוסף של צורות הבוקעות מנקודה מרכזית. אנו הולכים להפוך אותם לבסיס האנימציה המוגמרת שלנו. אתה יכול לקרוא לפרץ ברירת מחדל באותו אופן שבו אתה עושה צורה. בואו נעלה כמה ניצוצות:

const sparks = new mojs.Burst({
}).play();

אתה יכול לראות, רק על ידי הוספת ריק הִתפָּרְצוּת אובייקט ואומרים לו לשחק, אנו מקבלים את אפקט פרץ ברירת המחדל. אנו יכולים להשפיע על גודל וסיבוב הפרץ על ידי הנפשת שלו רַדִיוּס ו זָוִית נכסים:

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();

כבר הוספנו רדיוס וספין מותאם אישית לפרץ שלנו:

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

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();

תבחין כי מאפייני הילד זהים למאפייני הצורה שכבר עבדנו איתם. הפעם בחרנו בצלב כצורה. כל 50 הצורות הללו מחזיקות כעת באותן תכונות. זה מתחיל להיראות די טוב! זה הדבר הראשון שהמשתמש יראה כאשר ילחץ על העכבר.

כבר אם כי אנו יכולים לראות כי השבץ האדום של ראשונינו redCirc הצורה נשארת יותר מדי זמן. נסה לשנות את משך הזמן כך ששני האנימציות יתאימו זה לזה. זה אמור להיראות בערך כך:

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

האירוע המרכזי

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

document.addEventListener( 'click', function(e) {
});

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

document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});

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

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

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

לצורה ולפרץ שלנו יש .לְשַׂחֵק() בסוף גושי הקוד המתאימים להם. אנחנו לא צריכים את זה יותר כמו .שידור חוזר() נקרא במנהל האירועים. אתה יכול להסיר .play () משני גושי הקוד. מאותה סיבה, אתה יכול להסיר isShowStart: נכון גם מכיוון שאנחנו כבר לא צריכים את זה כדי להראות בהתחלה.

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

left: 0,
top: 0,

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

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

נהיה פסיכדלי

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

const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});

הכל כאן צריך להיות מוכר למדי, אם כי יש כמה נקודות חדשות. תבחין כי במקום להגדיר את הצורה כמשולש, קראנו לה א מְצוּלָע לפני הקצאת מספר נקודות יש לו כ -3.

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

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

די פסיכדלי! נוסיף עוד פרץ כדי לעקוב אחריו.

רוקדים מחומשים

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

const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});

השינוי העיקרי כאן הוא שהוספנו א לְעַכֵּב של 500ms, כך שהפרץ לא יתחיל רק לאחר המשולשים. על ידי שינוי כמה ערכים, הרעיון כאן היה לגרום להתפרצות להסתובב בכיוון ההפוך למשולשים. במקרה מאושר, עד להופעת המחומשים, ההשפעה הסטרוסקופית של המשולשים גורמת לו להיראות כאילו הם מסתובבים יחדיו.

קצת אקראיות

נוסיף אפקט העושה שימוש בערכים אקראיים. צור פרץ עם המאפיינים הבאים:

const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});

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

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

להלן ההשפעה בפני עצמה:

מכיוון שאנו משתמשים כאן בערכים אקראיים, עלינו להוסיף שיטה נוספת למטפל האירועים שלנו עבור האובייקט:

redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();

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

אתה יכול להשתמש בערכים אקראיים כמעט לכל רכיב של אובייקטים mo.js, והם דרך פשוטה ליצור אנימציות ייחודיות.

כיצד לחבר בקר ps2 למחשב

אקראיות היא לא הדרך היחידה להוסיף תנועות דינמיות לאנימציות. בואו נסתכל על ה לְהִתְנוֹדֵד פוּנקצִיָה.

קווים מדהימים

כדי להשוויץ כיצד לְהִתְנוֹדֵד פונקציה עובדת, אנחנו הולכים לעשות משהו קצת כמו גלגל קתרין. צור פרץ חדש עם הפרמטרים הבאים:

const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});

הכל כאן מוכר עד עכשיו, פרץ יוצר 50 ילדים שהם קווים אדומים או כתומים. ההבדל כאן הוא שאנחנו עוברים את לְעַכֵּב נכס א להתנודד (10) פוּנקצִיָה. זה מוסיף 10ms של עיכוב בין פליטת כל ילד, ונותן לו את האפקט המסתובב שאנו מחפשים.

פונקציית ההתרחקות אינה משתמשת בערכים אקראיים כלשהם, כך שלא תצטרך א לִיצוֹר לתפקד במעבד האירועים הפעם. בואו לראות את כל מה שיש לנו עד כה בפעולה:

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

ריבועים חכמים

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

const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});

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

זו לא הייתה התוצאה המיועדת של אובייקט זה כאשר הוא נוצר בשלבי הבדיקה של כתיבת הדרכה זו. ברגע שהקוד רץ, התברר שנקלעתי למשהו הרבה יותר יפה ממה שיכולתי לעשות בכוונה!

עם הוספת אובייקט אחרון זה, סיימנו. בואו נראה את כל העניין בפעולה.

Mo.js: כלי רב עוצמה לאנימציות אינטרנט

מבוא פשוט זה ל- mo.js מכסה את הכלים הבסיסיים הדרושים ליצירת אנימציות יפות. אופן השימוש בכלים אלה יכול ליצור כמעט כל דבר, ולמשימות רבות ספריות אינטרנט מהוות חלופה פשוטה לשימוש פוטושופ , After Effects או תוכנות יקרות אחרות.

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל האם כדאי לשדרג ל- Windows 11?

Windows עוצב מחדש. אבל האם זה מספיק כדי לשכנע אותך לעבור מ- Windows 10 ל- Windows 11?

קרא הבא נושאים קשורים

• תִכנוּת
• JavaScript

על הסופר איאן באקלי(פורסמו 216 מאמרים)

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

עוד מאת איאן באקלי

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה