קסס אַנימאַטיאָן ביישפילן

css-animations

מקור: פּיסי וועלט

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

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

קסס

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

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

אַלגעמיינע טשאַראַקטעריסטיקס

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

אַנאַמיישאַן ביישפילן

דאָדעקאַהעדראָן

דאָדעקאַהעדראָן

מקור: וועב פּלאַן

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

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

אַנימאַטעד גאָבלין

אַנימאַטעד גאָבלין

מקור: וועב דיזיין

די אַנאַמיישאַן איז טייטאַלד אַנימאַטעד גאָבלין און איז באשאפן דורך די דיזיינער Avaz Bokiev, אָן אַ צווייפל עס איז אַ קליין סיקוואַנס ווו איינער פון די שטערן פּראָוטאַגאַנאַס פון די ווידעא שפּיל טקופע, Mario Bros.

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

פאָוטאַגראַפיק אַפּאַראַט

פאָטאָ אַפּאַראַט

מקור: וועב דיזיין

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

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

וואַסערפאַל זונ סיסטעם

זונ סיסטעם

מקור: וועב דיזיין

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

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

שטערן מלחמות אַנאַמיישאַן

שטערן מלחמות אַנאַמיישאַן

מקור: וועב דיזיין

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

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

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

אַפּפּליקאַטיאָנס צו שאַפֿן אַנאַמיישאַנז

Adobe Spark

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

Animation Desk

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

סינפיג סטודיאָ

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

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

פּרעמיערע פּראָ

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

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

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

סאָף

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

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


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

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

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

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

*

*

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