CSS анимациялары

Css презентациясы

Булак: Онлайн программа

Сиз түзөтө, монтаждарды түзө аласыз, жада калса түзө турган көптөгөн программалар бар Animations, ар бир жолу интерактивдүү долбоорлордун ушул түрүн кошкон көптөгөн программалар бар. Бул постто биз сизди анимация дүйнөсү менен гана тааныштырбастан, жаңы досуңуз менен да тааныштырмакчыбыз.

Белгилүү болгондой, компьютер дүйнөсү учурда чогуу жашаган веб-баракчаларды же онлайн медианы өнүктүрүү үчүн буйруктарга жана пайдалуу куралдарга толгон. Биз менен болуңуз жана бул жаңы окуу куралында компьютер жана интерактивдүүлүк менен деңгээлиңизди жогорулатуунун дагы бир жолун табыңыз.

Анимациялар деген эмне?

Анимациялар дүйнөсү

Булак: Бардык оюнчулар

Биз сиздин окуу куралына толук киришиңизди каалайбыз, бирок бул үчүн анимациялар дүйнөсүнө же графикалык дизайнга тиешелүү болгон нерселер дүйнөсүнө кирүү керек. интерактивдүү дизайн. 

Анимациялар да аудиовизуалдык дүйнөнүн бир бөлүгү болуп саналат, эгер аларда аудио жана кыймылдуу сүрөт киргизилсе, алар эч нерсе болмок эмес. Ушул себептен улам, биз «анимация» дегенде эл арасында «мультфильмдер» деп аталган нерсени айтабыз.

Жогоруда айтылгандай, анимация бир нерсеге кыймыл берүү жөндөмүнөн келип чыгат, бул учурда мультфильмдер. Бирок бул кыймылдардын бардыгына кандайча жетишилген? чиймелердин же фотосүрөттөрдүн ырааттуулугу Алар биринин артынан бири иретке келтирилип, биздин көз алдыбызда ишенимдүү кыймылды жаратып, визуалдык иллюзия оюнуна киришет.

Мурда биринчи анимациялар кагаз барактарында иштелип чыккан, алардын ар биринде кыймылдуу каарман кадамдарды жасоо менен тартылып, барактын аягына жеткенде, кыймылдын эффектине жетүү үчүн бир-бирден тез өтүп кеткен. тартуу.

Анимация түрлөрү

Анимациянын ар кандай түрлөрү бар:

Мультфильм же салттуу анимация

Бул стиль башкы каарманга кадр-кадрга кыймыл берүүдөн турат. Башында аудиовизуалдык каражаттар жетишсиз болгондо, алар ар бир кадрды (анын ичинде фон, сахна же анимациянын фону) чийүү жана боёо аркылуу ишке ашырылып, кийинчерээк биз кино лента деп билебиз.

Кыймылды токтотуу

Stop Motion – мультфильмдерге эч кандай тиешеси жок анимация ыкмасы. Андан тышкары, анын негизги максаты – объекттердин кыймылын имитациялоо, алар чындыгында толугу менен статикалык болуп саналат жана ал эки фазага бөлүнөт: чопо же чопо кыймылы жана катуу объекттердин анимациясы.

Пикселдөө

Пикселдөө - бул Stop Motion программасынан чыккан жана куурчак да, моделдер да эмес, жалпы объекттер же адамдар менен иштөөдөн турган техника. Объекттер бир нече жолу сүрөткө тартылат жана ар бир кадр менен бир аз жылат.

Ротоскопия

Ал башка чиймени түз чийүүдөн турат, мисалы, башка чийме же чыныгы адамдын чиймесин түшүрүү. Ал мокаптын, башкача айтканда, кино дүйнөсүндө санариптик каармандарды кайра жаратуу үчүн колдонулган кыймылды тартуунун прекурсору болуп эсептелет.

Cutouts аркылуу анимация же Cut Out Animation

Бул фигураларды кесүүдөн турган техника, бул фигуралар кагазда же сүрөттөрдө көрсөтүлүшү мүмкүн. Каармандардын денеси кесилгендердин негизинде курулган жана кыймыл жана анимация айтылган кесүүлөрдү алмаштыруудан пайда болот.

3D анимация

3D анимациясы симуляцияларды жана анимацияларды жүргүзүүгө мүмкүндүк берген редактор программасынан келип чыгат. Бул эки варианттын ичинде жакшы жарыктандыруу, камера кыймылдары жана атайын эффекттер байланышат.

Азыркы учурда дагы башка техникалар бар, мисалы: айнектеги сүрөт, кумдун анимациясы, гужалардын экраны жана целлулоидге тартылган сүрөт. 

CSS деген эмне?

Программанын Css интерфейси

Булак: Web Design Rosario Session Studio

Эми сиз анимациялар дүйнөсү жөнүндө бир аз көбүрөөк билгенден кийин, сизди CSS аббревиатурасынын дүйнөсү менен тааныштырууга убакыт келди.

арабалар CSS, "Стильдердин каскаддык баракчаларын" караңыз. Бул дизайн секторунда жана веб-баракчаларды көрсөтүүдө колдонулган тил менен түзүлгөн, андан да жакшысы, алар веб-баракчаны биринчи жолу көрүп тургандай, бир катар инструменттер жана буйруктар. ал буга чейин эле түзүлгөн. курал менен бирге иштейт HTML (беттердин негизги мазмунунан уюштурулган).

Анын аталышы анын курамындагы барактардын саны менен аныкталат жана алардын бири башкалардын касиеттерин же мүнөздөмөлөрүн мурастайт. Башкача айтканда, сиз жөнөкөй блог шаблоны менен иштей аласыз, бирок сиз сайттын сырткы көрүнүшүн ыңгайлаштырууну кааласаңыз, жакшы CMS менен бирге мазмунуңуздун жеткиликтүүлүгүн жогорулатууга жардам берген CSSти ишке ашырышыңыз керек болот.

CSS эмне үчүн?

CSS менен сиз өзүңүздүн баракчаңызды уюштура аласыз, башкача айтканда, көрүүчүнү башкаруу оңой жана ошол эле учурда пайдалуу болушу үчүн бардык маалыматты кантип табууну каалап жатканыңызды веб-баракчаңызга айта аласыз. Бул жерде веб-баракчанын стилинин же дизайнынын бир бөлүгү болгон кээ бир элементтердин бардык буйруктарын киргизиңиз, мисалы, шрифттер, түстөр, өлчөмдөр ж. 

Адатта, бул курал эмне жөнүндө экенин жакшыраак түшүнүшүңүз үчүн, санариптик маркетинг боюнча адистер бул жөнүндө биринчилерден болуп түшүнүшөт, анткени алар аларды иштетишет.

CSSте анимациялоо

Эми сиз анимациялар жана CSS дүйнөсү жөнүндө бир аз билесиз. Бул окуу куралын баштоого убакыт келди.

CSS анимациялары бир CSS стили менен башкасынын ортосундагы өтүүнү жандандырууга мүмкүндүк берет. Бул анимациялар эки компоненттен турат: а стили CSS анимациясын жана бир топтомун сүрөттөйт алкактар анын баштапкы жана акыркы абалын, ошондой эле андагы мүмкүн болгон аралык чекиттерди көрсөтөт.

Бул анимациялардын ар бири бир катар артыкчылыктарга ээ:

  • Аны колдонуу жөнөкөй анимациялар үчүн абдан оңой, сиз Javascriptти билбестен да жасай аласыз.
  • Анимация кубаты аз компьютерлерде да туура көрсөтүлөт.
  • Браузер тарабынан көзөмөлдөнүп, анын иштешин жана эффективдүүлүгүн оптималдаштырууга мүмкүндүк берет, ошону менен жыштыктарды азайтат жана өтмөктөрдү көрүнбөй тургандай кылып аткарат.

Анимация орнотуулары

Анимацияны баштоо үчүн, биринчиден, аны конфигурациялашыбыз керек. Бул үчүн биз менчикке барабыз жандуулук жана анын суб - касиеттерине. Бул курал бизге анимациянын ритмин да, узактыгын да конфигурациялоого мүмкүндүк берет, ал тургай анын ырааттуулугун да эмес.

Суб-касиеттер болуп төмөнкүлөр саналат:

анимация - кечигүү

Элемент жүктөлгөн учур менен анимация ырааттуулугунун башталышынын ортосундагы кечигүү убактысы.

анимация - багыт

Анимация ырааттуулуктун аягындагы башталгыч кадрга кайтып келиши керекпи же аягына жеткенде башынан башталышы керекпи же жокпу көрсөтөт.

анимация - узактыгы

Анимация циклин аяктоо үчүн канча убакыт талап кылынарын көрсөтөт (узактыгы)

анимация - кайталоо - эсептөө

Ал канча жолу кайталанат. көрсөтө алабыз чексиз анимацияны чексиз кайталоо.

анимация - аты

Ал анимациянын ар бир кадрын сүрөттөгөн аталышты көрсөтүү үчүн колдонулат.

анимация - ойноо - абал

Анимация ырааттуулугун тындырууга жана улантууга мүмкүнчүлүк берет.

анимация - убакыт функциясы

Ал анимациянын ритмин көрсөтөт, башкача айтканда, анимация рамкалары кандайча көрсөтүлөт, бул үчүн ылдамдануу ийри сызыктары орнотулат.

анимация - толтуруу - режими

Анимация аяктагандан кийин касиеттер кандай баалуулуктарга ээ болорун белгилейт.

Кадрлар менен ырааттуулукту орнотуңуз

Биз убакытты конфигурациялагандан кийин, номенклатура ж.б. Биздин анимацияга көрүнүштү же сезимди сунуштоого убакыт келди.

Бул үчүн, биз эки жаңы кадрды орнотуп, эрежени колдонобуз @keyframes. Муну менен, ар бир кадр анимация ырааттуулугу учурунда ар бир элемент кантип табылганын сүрөттөйт.

көрсөтүү үчүн убакыт жана ритм, кадр колдонот проценттик жана чейин жанаМунун аркасында биз качан башталышы 0% жана аягы 100% менен болоорун көрсөтө алабыз.

Кадр жана текст анимациясы

Көбүрөөк рамкаларды кошуу жана аларды текст менен жандантуу үчүн, баш аты белгиленген убакыттын ичинде жылган сайын чоңоюп, андан кийин баштапкы өлчөмүнө чейин кичирейгидей кылып, башкы шрифттин чоңураак өлчөмүн колдонушуңуз керек. Бул үчүн биз төмөнкү кодду түзөбүз:

75% шрифт - өлчөмү: 300%; чек - сол: 25%; туурасы: 150%;

Бул код менен биз браузерге ырааттуулуктун 75%да баштын сол чети 25% жана туурасы 200% менен 150% өлчөмүн сунуштайбыз.

Анимацияны кайталоо

Анимацияны кайталоо үчүн төмөнкү касиетти колдонуу керек анимация - кайталоо - эсептөө жана биз анын канча жолу кайталанышын каалайбыз деп белгилешибиз керек. Биз да колдоно алабыз чексиз ошондуктан ал дайыма кайталанып турат.

жыйынтыктоо

Көрүнүп тургандай, CSSте сиз анимацияланган долбоорлорду түзө аласыз жана биз сизге берген кадамдарды аткаруу менен ага кире аласыз. Эгер сиз өзүңүздүн сурооңузду жана маалыматыңызды улантсаңыз, биз үчүн көптөгөн варианттар бар экенин билесиз.

Сиз буга чейин батына алдыңызбы?


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

Комментарий биринчи болуп

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт.

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

bool(чын)