CSS אַנאַמיישאַנז

Css פּרעזענטירונג

מקור: אָנליין פּראָגראַם

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

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

וואָס זענען אַנאַמיישאַנז?

די וועלט פון אַנאַמיישאַנז

מקור: אַלע גיימערז

מיר וועלן צו אַרייַן די טוטאָריאַל, אָבער פֿאַר דעם עס איז נייטיק צו אַרייַן די וועלט פון אַנאַמיישאַנז אָדער וואָס איז זארגן אין גראַפיק פּלאַן, די וועלט פון אַנאַמיישאַנז. ינטעראַקטיווע פּלאַן. 

אַנאַמיישאַנז זענען אויך טייל פון די אַודיאָ וויסואַל וועלט, אין פאַקט זיי וואָלט זיין גאָרנישט אויב אָדער ווייַל אין זיי, אַ אַודיאָ און אַ מאָווינג בילד זענען באַקענענ. פֿאַר דעם סיבה, ווען מיר רעדן פון "אַנימיישאַן", מיר אָפּשיקן צו וואָס איז פאָלקס באקאנט ווי "קאַרטאָאָנס."

ווי סאַמערייזד אויבן, אַנאַמיישאַן ערייזאַז פון די פיייקייַט צו געבן באַוועגונג צו עפּעס, אין דעם פאַל קאַרטאָאָנס. אבע ר װ י װער ן ד י אל ע באװעגונ ג דערגרײכ ט , נו , א ן א םפל , שטײע ן ז ײ אויפ ן פו ן װא ס מי ר רופן . סיקוואַנסיז פון דראַווינגס אָדער פאָוטאַגראַפס א ז מי ט זײ ן באפוילן , אײנע ם נאכ ן צװײטן , באשטעל ן ז ײ זי ך פא ר אונדזער ע אויג ן א גלױוילע ר באװעגונג , װא ס לײענ ט זי ך או ן ארײ ן אי ן ד י שפיל ן פו ן װיזועל ע אילוזיע .

אַמאָל די ערשטע אַנאַמיישאַנז זענען דיזיינד אויף ביץ פון פּאַפּיר, אין יעדער פון זיי, די אַנימאַטעד כאַראַקטער איז געווען ציען מיט טריט, און אַמאָל דער סוף פון די בלאַט איז ריטשט, עס איז דורכגעגאנגען איינער דורך איינער געשווינד צו דערגרייכן די ווירקונג פון באַוועגונג אין די צייכענונג.

טייפּס פון אַנאַמיישאַן

עס זענען פאַרשידענע טייפּס פון אַנאַמיישאַן:

קאַרטון אָדער טראַדיציאָנעל אַנאַמיישאַן

דעם סטיל באשטייט פון געבן באַוועגונג צו די פּראָוטאַגאַנאַסט ראַם דורך ראַם. אין די אָנהייב, ווען עס זענען נישט גענוג אַודיאָ-וויסואַל מידיאַ, זיי זענען געטאן דורך די צייכענונג און געמעל פון יעדער ראַם (אַרייַנגערעכנט די הינטערגרונט, בינע אָדער הינטערגרונט פון די אַנאַמיישאַן), צו שפּעטער זיין פילמד אויף וואָס מיר וויסן ווי אַ פילם טאַשמע.

האַלטן מאָטיאָן

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

פּיקסעלאַטיאָן

פּיקסעלאַטיאָן איז אַ טעכניק וואָס קומט פון סטאָפּ מאָטיאָן און באשטייט פון ארבעטן מיט אַבדזשעקץ וואָס זענען נישט דאַלז און ניט מאָדעלס, אָבער פּראָסט אַבדזשעקץ אָדער מענטשן. אַבדזשעקץ זענען פאָוטאַגראַפט קייפל מאל און יבעררוק אַ ביסל מיט יעדער ראַם.

ראָטאָסקאָפּי

עס באשטייט פון די דירעקטע צייכענונג פון אן אנדער צייכענונג, אַזאַ ווי די טרייסינג פון אַ צייכענונג אויף אן אנדער צייכענונג אָדער פון אַ פאַקטיש מענטש. עס איז גערעכנט ווי אַ פּריקערסער פון מאָקאַפּ, דאָס איז, באַוועגונג כאַפּן וואָס איז געניצט צו ריקריייט דיגיטאַל אותיות אין דער וועלט פון סינעמאַ.

אַנאַמיישאַן דורך קוטאָוטס אָדער שנייַדן אַנאַמיישאַן

עס איז אַ טעכניק וואָס באשטייט פון קאַטינג פיגיערז, די פיגיערז קענען זיין רעפּריזענטיד אויף פּאַפּיר אָדער אין פאָוטאַגראַפס. דער גוף פון די אותיות איז געבויט באזירט אויף קאַטאַוץ און באַוועגונג און אַנאַמיישאַן קומען פון אַ פאַרבייַט פון די קאַטאַוץ.

3 ד אַנאַמיישאַן

3D אַנאַמיישאַן ערידזשאַנייץ פון אַ רעדאַקטאָר פּראָגראַם, וואָס אַלאַוז סימיאַליישאַן און אַנאַמיישאַנז. אין די צוויי וועריאַנץ, גוט לייטינג, אַפּאַראַט מווומאַנץ און ספּעציעל יפעקץ קומען אין קאָנטאַקט.

דערווייַל עס זענען אויך אנדערע טעקניקס אַזאַ ווי: די געמעל אויף גלאז, די אַנאַמיישאַן פון זאַמד, די פאַרשטעלן פון גודזשאַס און די געמעל אויף סעללולאָיד. 

וואָס איז CSS?

Css צובינד פון אַ פּראָגראַם

מקור: וועב דיזיין ראָסאַריאָ סעסיע סטודיאָ

איצט אַז איר וויסן אַ ביסל מער וועגן דער וועלט פון אַנאַמיישאַנז, עס איז צייט פֿאַר אונדז צו באַקענען איר מיט די וועלט פון CSS אַקראַנימז.

אַקראָנים קסס, אָפּשיקן צו "קאַסקאַדינג סטיל שיץ". עס איז געמאכט פון אַ שפּראַך וואָס איז געניצט אין די פּלאַן סעקטאָר און אין די פּרעזענטירונג פון וועב זייַטלעך, אפילו בעסער, זיי זענען אַ סעריע פון ​​מכשירים און קאַמאַנדז וואָס זענען אין באַשולדיקונג צו פאָרשטעלן אַ וועב בלאַט ווי מיר זען עס פֿאַר די ערשטער מאָל אַמאָל עס איז שוין באשאפן. אַרבעט צוזאַמען מיט די געצייַג HTML (אָרגאַניזירט פון די באַזע אינהאַלט פון די בלעטער).

זיין נאָמען איז באשלאסן דורך די נומער פון שיץ עס כּולל און איינער פון זיי ינכעראַטי פּראָפּערטיעס אָדער קעראַקטעריסטיקס פון אנדערע. דאָס איז, איר קענען אַרבעטן מיט אַ פּשוט בלאָג מוסטער, אָבער ווען איר ווילן צו קאַסטאַמייז די אויסזען פון אַ פּלאַץ, איר דאַרפֿן צו ינסטרומענט CSS וואָס צוזאַמען מיט אַ גוט CMS וועט העלפֿן איר פֿאַרבעסערן די דערגרייכן פון דיין אינהאַלט.

וואָס איז CSS פֿאַר?

מיט CSS, איר קענען אָרגאַניזירן דיין בלאַט, דאָס איז, איר קענען זאָגן דיין וועב בלאַט ווי איר ווילן צו געפֿינען אַלע די אינפֿאָרמאַציע אַזוי אַז די צוקוקער איז גרינג צו שעפּן און נוציק אין דער זעלביקער צייט. דאָ אַרייַן אַלע די קאַמאַנדז פון עטלעכע עלעמענטן וואָס זענען טייל פון די נוסח אָדער פּלאַן פון די וועב בלאַט, למשל, די פאַנץ, פארבן, סיזעס עטק. 

נאָרמאַללי, אַזוי אַז איר בעסער פֿאַרשטיין וואָס די געצייַג איז וועגן, דיגיטאַל פֿאַרקויף ספּעשאַלאַסץ זענען דער ערשטער צו פֿאַרשטיין וועגן דעם ווייַל זיי זענען די וואָס שעפּן זיי.

אַנימירן אין CSS

נו, איצט אַז איר וויסן אַ ביסל וועגן די וועלט פון אַנאַמיישאַנז און CSS. איצט איז די צייט צו אָנהייבן דעם טוטאָריאַל.

CSS אַנאַמיישאַנז לאָזן איר צו ופלעבן די יבערגאַנג צווישן איין CSS סטיל און אנדערן. די אַנאַמיישאַנז צונויפשטעלנ זיך פון צוויי קאַמפּאָונאַנץ: אַ סטיל וואָס באשרייבט CSS אַנאַמיישאַן און אַ סכום פון ראָמען וואָס אָנווייַזן זייַן ערשט און לעצט שטאַט, ווי געזונט ווי מעגלעך ינטערמידייט פונקטן אין עס.

יעדער פון די אַנאַמיישאַנז האט אַ סעריע פון ​​אַדוואַנטידזשיז:

  • די נוצן איז זייער גרינג פֿאַר פּשוט אַנאַמיישאַנז, איר קענען טאָן דאָס אפילו אָן וויסן פון דזשאַוואַסקריפּט.
  • אַנאַמיישאַן דיספּלייז ריכטיק, אפילו אויף נידעריק-מאַכט קאָמפּיוטערס.
  • זיין קאַנטראָולד דורך אַ בלעטערער, ​​עס אַלאַוז אָפּטימיזינג זייַן פאָרשטעלונג און עפעקטיווקייַט, אַזוי רידוסינג די אָפטקייַט און עקסאַקיוטינג די טאַבס אין אַזאַ אַ וועג אַז זיי זענען נישט קענטיק.

אַנאַמיישאַן סעטטינגס

צו אָנהייבן אַן אַנאַמיישאַן, ערשטער פון אַלע, מיר האָבן צו קאַנפיגיער עס. צו טאָן דאָס, מיר וועלן גיין צו די פאַרמאָג אַנאַמיישאַן און צו זייַן אונטער - פּראָפּערטיעס. דעם געצייַג וועט לאָזן אונדז צו קאַנפיגיער ביידע די ריטם און די געדויער פון די אַנאַמיישאַן און נישט אפילו די סיקוואַנס.

די סאַב-פּראָפּערטיעס זענען:

אַנאַמיישאַן - פאַרהאַלטן

פאַרהאַלטן צייט צווישן דעם מאָמענט די עלעמענט איז לאָודיד און די אָנהייב פון די אַנאַמיישאַן סיקוואַנס.

אַנאַמיישאַן - ריכטונג

ינדיקייץ צי די אַנאַמיישאַן זאָל גיין צוריק צו די אָנהייב ראַם אין די סוף פון די סיקוואַנס אָדער צי עס זאָל אָנהייבן פֿון די אָנהייב ווען עס ריטשאַז די סוף.

אַנאַמיישאַן - געדויער

ינדיקייץ די צייט וואָס די אַנאַמיישאַן נעמט צו פאַרענדיקן זיין ציקל (די געדויער)

אַנאַמיישאַן - יטעראַטיאָן - ציילן

די נומער פון מאל עס איז ריפּיטיד. מיר קענען אָנווייַזן ינפאַנאַט צו איבערחזרן די אַנאַמיישאַן ינדעפאַנאַטלי.

אַנאַמיישאַן - נאָמען

עס איז געניצט צו ספּעציפיצירן די נאָמען וואָס באשרייבט יעדער פון די ראָמען פון די אַנאַמיישאַן.

אַנאַמיישאַן - שפּיל - שטאַט

אַלאַוז איר צו פּויזע און נעמענ זיכ ווידער די אַנאַמיישאַן סיקוואַנס.

אַנאַמיישאַן - טיימינג- פֿונקציע

עס ינדיקייץ די ריטם פון די אַנאַמיישאַן, דאָס איז, ווי די אַנאַמיישאַן ראָמען זענען געוויזן, פֿאַר דעם, אַקסעלעריישאַן קורוועס זענען געגרינדעט.

אַנאַמיישאַן - פּלאָמבירן - מאָדע

ספּעציפיצירט וואָס וואַלועס די פּראָפּערטיעס וועט האָבן נאָך די אַנאַמיישאַן ענדס.

שטעלן די סיקוואַנס מיט ראָמען

אַמאָל מיר האָבן קאַנפיגיערד די צייט, די נאָמענקלאַטורע עטק. עס איז צייט צו פאָרשלאָגן אַ קוק אָדער פילן צו אונדזער אַנאַמיישאַן.

צו טאָן דאָס, מיר וועלן פאַרלייגן צוויי נייַע ראָמען און נוצן די הערשן @ keyframes. מיט דעם, יעדער ראַם באשרייבט ווי יעדער עלעמענט איז געפֿונען בעשאַס די אַנאַמיישאַן סיקוואַנס.

צו דערמאָנען די צייט און ריטם, די ראַם ניצט פּראָצענט און פון און צודאַנק צו דעם, מיר קענען אָנווייַזן ווען דער אָנהייב נעמט אָרט מיט 0% און דער סוף מיט 100%.

ראַם און טעקסט אַנאַמיישאַן

צו לייגן מער ראָמען און ופלעבן זיי מיט טעקסט, איר דאַרפֿן צו צולייגן אַ גרעסערע גרייס פון די כעדער שריפֿט אַזוי אַז די כעדער ינקריסיז ווען עס באוועגט פֿאַר אַ סכום פון צייט, און דערנאָך דיקריסאַז צו זיין אָריגינעל גרייס. פֿאַר דעם, מיר וועלן פאַרלייגן די פאלגענדע קאָד:

75% שריפֿט - גרייס: 300%; גרענעץ - לינקס: 25%; ברייט: 150%;

מיט דעם קאָד, מיר פֿאָרשלאָגן דעם בלעטערער אַז אין 75% פון די סיקוואַנס, די כעדער האט אַ לינקס גרענעץ פון 25% און אַ גרייס פון 200% מיט אַ ברייט פון 150%.

אַנאַמיישאַן איבערחזרן

צו מאַכן אַן אַנאַמיישאַן איבערחזרן, איר דאַרפֿן צו נוצן די פאלגענדע פאַרמאָג אַנאַמיישאַן - יטעראַטיאָן - ציילן און מיר מוזן אָנווייַזן ווי פילע מאל מיר וועלן עס זאָל זיין ריפּיטיד. מיר קענען אויך נוצן ינפאַנאַט אַזוי אַז עס איז שטענדיק ריפּיטיד.

סאָף

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

האסט שוין געוואגט?


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

זייט דער ערשטער צו באַמערקן

לאָזן דיין באַמערקונג

אייער בליצפּאָסט אַדרעס וועט נישט זייַן ארויס.

*

*

  1. פאַראַנטוואָרטלעך פֿאַר די דאַטן: Miguel Ángel Gatón
  2. ציל פון די דאַטן: קאָנטראָל ספּאַם, קאָמענטאַר פאַרוואַלטונג.
  3. לעגיטימאַטיאָן: דיין צושטימען
  4. קאָמוניקאַציע פון ​​די דאַטן: די דאַטן וועט נישט זיין קאַמיונאַקייטיד צו דריט פּאַרטיעס אַחוץ דורך לעגאַל פליכט.
  5. דאַטן סטאָרידזש: דאַטאַבייס כאָוסטיד דורך Occentus Networks (EU)
  6. רעכט: צו קיין צייט איר קענט באַגרענעצן, צוריקקריגן און ויסמעקן דיין אינפֿאָרמאַציע.