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

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

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

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

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

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

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

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

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

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

Сатылы анимация жасау Оқиғаны таңдаудан басталады, бұл анимация ойнай бастайтын шарт. Бес шарт бар:

• Экрандағы элемент — анимация экранда элемент пайда болғанда басталады;
• Экрандағы блок — экранда бүкіл ағымдағы блок пайда болғанда анимация басталады;
• Айналдыруда — анимация жылжыту кезінде басталып, жалғасады;
• Ховерде — элемент үстіне қалықтағанда анимация пайда болады;
• Басу — элементті басқанда анимация басталады.

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

• Іске қосу триггері - анимация неге байланады немесе іске қосылады. Таңдауға болатын үш аумақ бар: Терезе үстінде, Терезе ортасында және Терезенің төменгі жағында;
• Trigger Offset — таңдалған Window Top / Window Center / Window Bottom-ға қатысты объектінің анимация бастауының офсеті;
• Ілмек — анимацияны ілмектеу опциясы.

Тест параметрі мен Ойнату элементі / Барлығын ойнату түймешіктерін пайдаланып, блоктағы осы элементтің немесе барлық элементтердің анимациясын ойнатуыңызға болады.

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

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

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

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

Ұзақтығы —секундтағы анимация ұзындығы;
Жылжу - элементтің бастапқы орналасуына қатысты қозғалатын координаттары. Оларды мәндер бойынша да, элементті жылжыту арқылы да орнатуға болады;
шкала - бұл қадамның соңына қарай көбейетін немесе азайып бара жатқан элементтің пайыздық үлесі;
Мөлдірлік - қадам соңындағы элементтің мөлдірлік мәні;
Бұрылу — элементті қадамның соңына қарай градуспен бұру;
Жеңілдету — анимация әсерін таңдау: Сызықтық — анимацияның сызықтық орындалуы, easionIn, easeOut, easionOut — анимацияның басында, аяғында немесе басында және соңында бәсеңдеу, секірмелі Fin — анимацияның соңындағы элементтің кішігірім секірмелілігі;
Кідіріс - анимация орындалғанға дейінгі кідіріс.

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

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

Play Element және Play All түймешіктерден басқа, Tilda анимацияны алдын ала қарау режимінде бірден көру мүмкіндігіне ие.

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

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