CSS Cubic Bezier генераторы
Анимация қисығын жасау үшін екі тұтқаны тартыңыз, нүктенің қозғалысын қалыпты қозғалыспен салыстыра отырып бақылаңыз және cubic-bezier() мәнін көшіріп алыңыз.
cubic-bezier(0.25, 0.1, 0.25, 1)Қисық тікелей браузеріңізде салынады. Мұнда орнатқан ештеңе BroBroGo серверіне жүктелмейді.
Жиі қойылатын сұрақтар
Екі тұтқа мен төрт сан нені білдіреді?
Қисық төменгі сол жақтан (басы) жоғарғы оң жаққа (соңы) қарай жүреді, уақыт солдан оңға қарай, ал прогресс жоғары қарай жылжиды. Екі тұтқа — оны иетін басқару нүктелері — әрқайсысының X және Y мәндері бар, сондықтан олар бірге cubic-bezier(x1, y1, x2, y2) құрайды. X мәні 0 мен 1 аралығында қалады, ал Y мәні қозғалыстың асып кетуін немесе тоқтағанға дейін кері шегінуін жасау үшін жоғарғы шектен аса алады немесе төменгі шектен төмен түсе алады.
Бұл мәнді CSS-те қалай пайдаланамын?
cubic-bezier() мәнін көшіріп, оны уақыт функциясы қолданылатын кез келген жерге қойыңыз — transition-timing-function, animation-timing-function немесе қысқартылған жазбаға, мысалы: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). ease, ease-in, ease-out және ease-in-out кілт сөздері — бұл жай ғана бекітілген cubic-bezier қисықтары, сондықтан осы дайын үлгілердің бірін таңдау сізге кілт сөздің артындағы нақты мәнді көрсетеді.
Ол серпіліс немесе серпімді әсер жасай ала ма?
Тек өзі ғана істей алмайды. Бір ғана cubic-bezier алдын ала шегіну мен асып кетуді жасай алады — «back» дайын үлгілері дәл осыны жасау үшін бір тұтқаны шектен тыс тартады — бірақ ол тек бір бағытта қозғалып, содан кейін тоқтай алады. Серпіліс (bounce) немесе серпімді (elastic) әсерлер бағытты бірнеше рет өзгертеді, мұны бір ғана cubic-bezier арқылы өрнектеу мүмкін емес; олар үшін CSS keyframes немесе көптеген нүктелері бар linear() функциясы қажет.