Нөлдік блок: қадамдық анимация

Zero Block ішінде екі анимация режимі бар:

1) Негізгі анимация – қарапайым анимация. Бұл дайын, жиі қолданылатын эффектілер, мысалы, сөніп қалу (мөлдірлік арқылы, төменнен жоғары, оңнан солға және т.б.), параллакс, бұғаттау. Олар 90% жағдайда жеткілікті.

Негізгі анимация жөніндегі нұсқаулық →

2) сатылы анимация. Ол өз сценарийіңіз бойынша жарқын, шығармашылық идеяларды жүзеге асыруға мүмкіндік береді.

Қадамдық анимация мүмкіндіктерінің мысалдары бар бет https://tilda.cc/ru/lp/step-by-step-animation/

Қадамдық анимация кәсіби дизайнерлерге арналған редактор Нөлдік блокта қолжетімді. Оны блок кітапханасынан бетке қосыңыз (ең төменгі жағында, «Басқа» санатынан кейін). Немесе беттің төменгі жағындағы блоктарды жылдам қосу мәзіріндегі Нөлдік блок белгішесін басыңыз.

Өңдеу режиміне өту үшін блоктың жоғарғы сол жақ бұрышындағы «Блокты өңдеу» түймесін басыңыз.

Жаңа элементті қосыңыз, оны таңдаңыз, параметрлерді ашыңыз, «Адамдық анимация» бөліміне төмен жылжып, «Қосу» түймесін басыңыз.

Қадамдық анимация жасау элемент үшін барлық негізгі анимация параметрлерін қайта анықтайды.

Қадамдық анимацияны жасау Оқиғаны таңдаудан басталады - анимация ойнай бастаған кездегі шарт. Бес шарт бар:

• Экрандағы элемент – экранда элемент пайда болған кезде анимация басталады;
• Экрандағы блоктау – экранда барлық ағымдағы блок пайда болған кезде анимация басталады;
• On Scroll - анимация жылжу кезінде басталады және жалғасады;
• Hover On - элементтің үстіне апарған кезде анимация пайда болады;
• On Click - элементті басқан кезде анимация басталады.

Анимацияның басталуында іске қосу триггері, цикл және триггердің ығысуы қосымша опциялары бар.

• Триггерді іске қосу – анимация немен байланыстырылады немесе оның триггері не болады. Үш аймақты таңдау мүмкіндігі бар - жоғарғы жиек (Терезенің жоғарғы жағында), экранның ортасы (Терезенің ортасында) және төменгі жиегі (Терезенің төменгі жағында);
• Trigger Offset – объектінің анимациясының таңдалған Терезенің үстіңгі жағына / Терезенің орталығына / Терезенің төменгі жағына қатысты ығысуы;
• Цикл – анимация циклінің опциясы.

Сынақ опциясын және Элементті ойнату / Барлығын ойнату түймелерін пайдаланып, осы элементтің немесе блоктағы барлық элементтердің анимациясын ойнатуға болады.

Әдепкі бойынша орнатылған бірінші қадам Бастау болып табылады. Әрі қарай қадамдарды қосып, әр қадамда элементтің қасиеттерін өзгерту керек. Осылайша элемент өзгереді.

Қадам қосу үшін «Қадам қосу» түймесін басыңыз.

Сіз қадамдар арасында ауыса аласыз. Бұл жағдайда элементтің көк штрихы стандартты күйді, жасыл түс — қадамдық өңдеуді білдіреді.

Әрбір қадамда қасиеттер жиынтығы бар: Ұзақтық, Жылжыту, Масштаб, Мөлдірлік, Айналдыру, Жеңілдету және Кідірту.

Ұзақтығы – секундтарда анимация ұзақтығы;
Жылжыту - элемент бастапқы орынға қатысты жылжытылатын координаттар. Оларды мәндер бойынша да, элементті жылжыту арқылы да орнатуға болады;
Масштаб – осы қадамның соңына қарай элементтің пайыздық ұлғаюы немесе азаюы;
Мөлдірлік – қадам соңындағы элементтің мөлдірлік мәні;
Rotate - қадамның соңына қарай элементтің градуспен айналуы;
Easing – анимацияның орындалу әсерін таңдау: Linear – бұл анимацияның сызықтық орындалуы, easeIn, easeOut, easeInOut – бұл анимацияның басында, соңында немесе басында және соңында баяулау, bounceFin – шағын серпіліс. анимацияның соңындағы элементтің;
Кідіріс – анимация орындалғанға дейінгі кідіріс.

Қозғалыс кезінде сары шаршыны 550 пиксель оңға және екіге қысқартуға, содан кейін бастапқы орнына қалай оралуға болатынын көрейік.

Төменде түсініктемелері бар қадамдық нұсқаулық берілген:

Tilda-дағы «Ойнату элементі» және «Барлығын ойнату» түймелеріне қоса, алдын ала қарау режимінде анимацияны бірден көруге болады.

Ол үшін браузерде 2 қойындыны ашу ыңғайлы: Нөлдік блок редакторы ашылған бір бетте, ал екінші бетте - алдын ала қарау режимінде сол бет.

Бұл жағдайда Нөлдік блокта сақтау түймешігін басқанда, өзгертулер бет жаңартылғаннан кейін алдын ала қарау бетінде көрсетіледі.