Cubic-Bezier в CSS3 Transition

Cubic-Bezier в CSS3 Transition

Эта статья является частью серии уроков HTML5/CSS3 направленных на более углублённое изучение свойств и возможностей.

CSS3 Transition является отличным инструментом. Он позволяет применять эффекты плавного перехода и изменений правил css. Если вы уже знакомы с синтаксисом css3 transition, вы должны знать что один из параметров, это время или скорость перехода.

Есть четыре предопределенных функций времени которые мы можем использовать, ease, ease-in, ease-out, linear.
Но мало кто знает, что эти функции основаны на Bezier curve (кривых Безье).

Bezier curve

Кривая Безье является широко используемой моделью кривой в компьютерной графике. Если вы работали с векторными графическими редакторами, как Adobe Illustrator или Inkscape, вы должны знать эту модель кривой , по инструменту Pen Tool. Эта кривая формируется с четырьмя точками, как показано на следующем рисунке:

Cubic-Bezier

Таким же образом в css3 transition, функция cubic-bezier имеет следующий синтаксис:

cubic-bezier(P0,P1,P2,P3);  

Стоит отметить, что каждая точка в этой cubic-bezier может принимать значения только от 0 до 1.
Давайте вернемся к функции времени в CSS3 transition о которой мы уже упоминали ранее, и посмотри, как она на самом деле формируется в кривой сubic-bezier.



ease это функция времени по умолчанию в css3 transition, скорость будет постоянной от начала до конца, а в формате cubic-bezier она будет выглядеть так:

cubic-bezier(0.25,0.1,0.25,1);    

linear при использовании линейной функции времени, скорость будет устойчивой от начала и до конца, если перевести в формат cubic-bezier будет вот так:

cubic-bezier(0,0,1,1)  

ease-in используя эту функцию, анимация будет проходить медленно а затем получит ускорение, затем будет устойчивой до конца. В cubic-bezier формате может быть переведена как:

cubic-bezier(0.42, 0.0, 1.0, 1.0)   

ease-out это функция противоположность ease-in . Переводится в формат cubic-bezier как:

cubic-bezier(0.0, 0.0, 0.58, 1.0)  

ease-in-out это функция сочетает в себе ease-in и ease-out. Анимация начинается медленно, ускоряется в середине затем заканчивается медленно. В cubic-bezier это может быть переведено следующим образом:

cubic-bezier(0.42, 0.0, 0.58, 1.0)   

Создание собственных скоростей

Используя функцию cubic-bezier, мы можем создавать собственные скорости, но одно из главных ограничений является то, что всё не совсем интуитивно понятно и мы не можем сразу увидеть результат. Но есть один инструмент который очень облегчает создание собственных скоростей .

В примере показано как можно использовать функцию cubic-bezier, для того что бы задать скорость ракеты.

comments powered by Disqus
Subscribe to RSS Feed Следить в Twitter