Нөлдік блоктағы кез келген элементтің параметрлерінде анимация қосу мүмкіндігі бар. Анимацияның екі түрі бар: негізгі және күрделірек - қадамдық. Бұл мақалада біз негізгі анимацияның функциялары мен мүмкіндіктерін қарастырамыз.
Негізгі мүмкіндіктерге шолу мақаласы
Контейнерлермен жұмыс істеу және «резеңке» элементтерді жасау туралы мақала
Жұмысты жылдамдату үшін барлық комбинациялардың тізімі
Күрделі қадамдық анимация туралы мақала: негізгі принциптер, параметрлер және мысалдар
Күрделі триггер анимациясының анықтамасы: орнату және мысалдар
Орналасуды Figma-дан Нөлдік блокқа автоматты түрде импорттау әдісі
Біз дизайнның негізгі құрылымын анықтаймыз және макетпен жұмысты тездетеміз
Негізгі анимация бөлімінде бірнеше опциялар бар:
- Анимация - бұл элементтің сыртқы түрін жандандырудың әртүрлі нұсқалары;
- Параллакс — элементтің параллакс әсеріне арналған параметрлер;
- Бекіту - бұл бекіту әсерінің параметрлері
Анимация
Өшіру анимациясының бірнеше опциялары бар - қарапайым көрініс (Fade In), оңға, солға, жоғарғы және төменгі көрініс (Fade In Right, Fade In Left, Fade In Up , Fade In Down ) және үлкейген көрініс (үлкейту).
Әрбір уылдырық анимациясының параметрлерінде Ұзақтық, Кідірту және Триггерді ауыстыру үшін жалпы опциялар бар.
Ұзақтық – секундтармен берілген анимация уақыты. Ол элемент қанша уақыт пайда болатынын орнатуға мүмкіндік береді;
Кідіріс – анимацияның басталуына дейінгі секундтарда кідіріс;
Триггердің ығысуы – анимация ойнатылатын Терезе контейнерінің төменгі жиегінен пикселдермен ығысу.
Жоғарыдан, төменнен, оң жақтан немесе сол жақтағы көрінісі бар анимацияларды пайдаланған кезде қосымша Дистанция параметрі пайда болады - бұл блоктың қалаған жиектен пайда болғанша жүретін қашықтығы.
Көріністі үлкейтумен (Ұлғайту) пайдаланған кезде Масштаб параметрі бар - егер ол 100% -дан аз болса, онда нысан бастапқы өлшеміне дейін үлкейтіледі, егер көп болса, ол кішірейеді.
Ұзақтық – секундтармен берілген анимация уақыты. Ол элемент қанша уақыт пайда болатынын орнатуға мүмкіндік береді;
Кідіріс – анимацияның басталуына дейінгі секундтарда кідіріс;
Триггердің ығысуы – анимация ойнатылатын Терезе контейнерінің төменгі жиегінен пикселдермен ығысу.
Жоғарыдан, төменнен, оң жақтан немесе сол жақтағы көрінісі бар анимацияларды пайдаланған кезде қосымша Дистанция параметрі пайда болады - бұл блоктың қалаған жиектен пайда болғанша жүретін қашықтығы.
Көріністі үлкейтумен (Ұлғайту) пайдаланған кезде Масштаб параметрі бар - егер ол 100% -дан аз болса, онда нысан бастапқы өлшеміне дейін үлкейтіледі, егер көп болса, ол кішірейеді.
Параллакс
Параллакс анимациясының екі параметрі бар - параллакс айналдыру және тінтуірдің қозғалысы кезінде болуы мүмкін.
Айналдырудағы параллакс
Тінтуірдің қозғалысындағы параллакс
Айналдыру параллакс параметрлерінде параллакс жылдамдығы параметрі (Жылдам) бар. Егер жылдамдық 100%-дан аз болса, онда элемент бетті айналдыруға қарағанда баяу қозғалады, егер жылдамдық 100%-дан жоғары болса, онда ол жылдамырақ қозғалады.
Тінтуірдің қозғалысы бойынша параллакс параметрлерінде X және Y осі бойынша қашықтыққа арналған параметрлер бар, олар параллакс кезінде элементтің максималды ауытқуын белгілейді.
Тінтуірдің қозғалысы бойынша параллакс параметрлерінде X және Y осі бойынша қашықтыққа арналған параметрлер бар, олар параллакс кезінде элементтің максималды ауытқуын белгілейді.
Бекіту
Мұздату анимациясында нысанның мұздату аймағын орнату мүмкіндігі бар. Бұл бекіту эффектісі басталатын экранның ауданы (жоғарғы, орталық, төменгі). Үш аймақты таңдау мүмкіндігі бар - үстіңгі жиек (Терезенің жоғарғы жағында), экранның ортасы (Терезенің ортасында) және төменгі жиегі (Терезенің төменгі жағында).
Trigger Offset параметрі таңдалған Терезенің үстіңгі / Терезенің орталығы / Терезенің төменгі жағына қатысты нысанды бекітудің бастапқы нүктесі болып табылады.
Қашықтық - бұл нысан қату режимінде жүруі керек пиксельдегі қашықтық.
Trigger Offset параметрі таңдалған Терезенің үстіңгі / Терезенің орталығы / Терезенің төменгі жағына қатысты нысанды бекітудің бастапқы нүктесі болып табылады.
Қашықтық - бұл нысан қату режимінде жүруі керек пиксельдегі қашықтық.
Бекіту анимациясына қатысты біз « Тильдадағы анимация: бекіту эффектісі » мақаласын оқуды ұсынамыз, мұнда бұл әсерді жасау нақты мысал арқылы талқыланады.
