Нөлдік блоктағы кез келген элементтің параметрлерінде анимация қосу опциясы бар. Анимацияның екі түрі бар: негізгі және күрделірек — сатылы анимация. Бұл мақалада негізгі анимацияның ерекшеліктері мен функцияларын қарастыратын боламыз.
Негізгі мүмкіндіктер бойынша шолу мақаласы
Контейнерлермен жұмыс істеу және «резеңке» элементтерді жасау туралы мақала
Жұмысты жылдамдатуға арналған барлық комбинациялардың тізімі
Кешенді қадамдық анимация мақаласы: Негізгі принциптер, параметрлер және мысалдар
Күрделі іске қосу анимациясы анықтамасы: баптау және мысалдар
Орналасуды Figma-дан Нөлдік блокқа автоматты түрде импорттау әдісі
Жобаның негізгі құрылымын анықтау және макетті жылдамдату
Негізгі анимация бөлімінің бірнеше параметрлері бар:
- Анимация - элементтің сыртқы келбетін анимациялаудың әр түрлі нұсқалары;
- Parallax — элементтің параллакс эффектісінің параметрлері;
- Түзету - түзету әсерінің параметрлері
Анимация
Анимациядағы сөнудің бірнеше нұсқалары бар, мысалы, Fade In, Fade In Right, Fade In Left, Fade In Up, Fade In Down, және Zoom In.
Сыртқы көрініс анимациясының әр түрінің параметрлерінде Ұзақтық, кідіріс және Триггер офсетінің жалпы параметрлері бар.
Ұзақтығы - секундтағы анимация уақыты. Ол элементтің пайда болуына қанша уақыт кететінін белгілеуге мүмкіндік береді;
Кідіріс — анимация басталғанға дейін секундпен кешігу;
Trigger Offset — анимация ойнай бастайтын Терезе контейнерінің төменгі жиегінен пиксель шегінісі.
Жоғарғы, төменгі, оң немесе сол анимацияларды пайдаланғанда қосымша Қашықтық параметрі пайда болады — бұл блок қалаған жиектен пайда болған кезде өтетін қашықтық.
Zoom In қолданғанда Масштаб параметрі бар — егер ол 100%-дан кем болса, онда нысан өзінің бастапқы өлшеміне дейін үлкейеді, егер ол үлкен болса, онда ол азаяды.
Ұзақтығы - секундтағы анимация уақыты. Ол элементтің пайда болуына қанша уақыт кететінін белгілеуге мүмкіндік береді;
Кідіріс — анимация басталғанға дейін секундпен кешігу;
Trigger Offset — анимация ойнай бастайтын Терезе контейнерінің төменгі жиегінен пиксель шегінісі.
Жоғарғы, төменгі, оң немесе сол анимацияларды пайдаланғанда қосымша Қашықтық параметрі пайда болады — бұл блок қалаған жиектен пайда болған кезде өтетін қашықтық.
Zoom In қолданғанда Масштаб параметрі бар — егер ол 100%-дан кем болса, онда нысан өзінің бастапқы өлшеміне дейін үлкейеді, егер ол үлкен болса, онда ол азаяды.
Параллакс
Parallax анимациясының екі параметрі бар: параллакс айналдыру арқылы және тінтуірдің қозғалысы арқылы болуы мүмкін.
Параллакс айналдыру
Тінтуір қозғалысының параллаксы
Scroll parallax параметрлерінде Parallax Speed параметрі бар. Егер жылдамдық 100%-дан кем болса, онда элемент беттің айналдыруына қарағанда баяу қозғалады, егер жылдамдық 100%-дан артық болса, онда жылдамырақ жүреді.
Тінтуір қозғалысына негізделген параллакс параметрлерінде X және Y осьтері бойымен қашықтық параметрлері болады, олар параллакс кезінде элементтің максималды ауытқуын орнатады.
Тінтуір қозғалысына негізделген параллакс параметрлерінде X және Y осьтері бойымен қашықтық параметрлері болады, олар параллакс кезінде элементтің максималды ауытқуын орнатады.
Бекіту
Коммитет анимациясының объектінің міндеттеме аймағын реттеуге таңдауы болады. Бұл фиксация әсері басталатын экранның ауданы (жоғарғы, ортасы, төменгі жағы). Таңдауға болатын үш аймақ бар: Терезе үстінде, Терезе ортасында және Терезенің төменгі жағында.
Trigger offset параметрі таңдалған Window Top / Window Center / Window Bottom мәніне қатысты нысанды бекітудің бастапқы нүктесі болып табылады.
Арақашықтық - объектінің коммюнике режимінде жүруі тиіс пиксельдердегі арақашықтық.
Trigger offset параметрі таңдалған Window Top / Window Center / Window Bottom мәніне қатысты нысанды бекітудің бастапқы нүктесі болып табылады.
Арақашықтық - объектінің коммюнике режимінде жүруі тиіс пиксельдердегі арақашықтық.
Ал анимация жасауға келсек, «Тильдадағы анимация: жасампаз әсер» деген мақаланы оқуды ұсынамыз, онда осы эффектінің жасалуы нақты мысалдың көмегімен талданады.
