Это 26-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления.
предисловие
Сегодня мы поговорим о кривой Белси в анимации CSS3, которую мы часто используем. Надеюсь, мы сможем это сделать. Она вас знает, и вы знакомы с ней! Исходный код этой статьи:Bezier
Половину вы поймете, прочитав ее, а вторую половину добьетесь, выполняя ее!
Кривая Безье на переднем конце
Анимация CSS3 в основном
- transition
- animation
переход имеетtransition-timing-function
анимацияanimation-timing-function
кtransition-timing-functionНапример
его встроенныйease,linear,ease-in,ease-out,ease-in-out,Это функция кривой Безье, которая используется для контроля скорости изменения атрибута.
также можно настроитьcubic-bizier(x1,y1,x2,y2)а как насчет этой штуки, кривой Безье третьего порядка,x1,y1а такжеx2,y2две контрольные точки.
Как показано на рисунке:x1, y1Соответствует точке P1,x2,y2Соответствует точке P2.
Ключевые моменты:
- Чем круче кривая, тем быстрее скорость, и наоборот, тем медленнее скорость!
- Положение контрольных точек влияет на форму кривой
Сказав это, вспомните, где наш интерфейс будет Безье.
svgcanvas/webgl-
css3анимация -
animation Web API
Не думайте, что JS не может управлять анимацией CSS3.
Это может звучать полые, но давайте посмотрим на кривые и фактическую анимацию:
Красные кривые замедления и замедления относительно круты на ранней стадии, а ускорение явно быстрее..
Bezier Motion - Демонстрационный адрес
Что такое кривая Безье
Кривые Безье, также известные как кривые Безье или кривые Безье, представляют собой математические кривые, используемые в приложениях для двумерной графики.
Как понять формулу? Здесь вы можете предположить
- Координаты P0 равны (0,0), а координаты конечной точки равны (1,1)
tувеличивается от 0 до 1
ПучокtЗначение и контрольная точках координатаВставьте формулу, чтобы получитьновое значение координаты x
ПучокtЗначение и контрольная точкау координатаВставьте формулу, чтобы получитьновое значение координаты Y
(новое значение координаты x , новое значение координаты Y) координатыtКоординаты точек кривой времени.
Общая формула
Линейная формула
Нет контрольных точек, прямая линия
Квадратичная формула
контрольная точка
кубическая формула
две контрольные точки
Это наша цель, потому что CSS-анимация — это кубические уравнения.
P0 — начальная точка, P3 — конечная точка, а контрольные точки — P1 и P2, потому что мы обычно предполагаем, что P0 — это (0,0), а P3 — это (1,1).
Смена контрольной точки повлияет на всю кривую, давайте просто инкапсулируем ее и выполним примерные операции.
1-й заказ 2-й заказ 3-й заказ упаковка
Мы делаем простую инкапсуляцию на основе приведенной выше формулы,
Вы можете получить информацию о соответствующем наборе точек, передав необходимое количество точек и соответствующие контрольные точки.
class Bezier {
getPoints(count = 100, ...points) {
const len = points.length;
if (len < 2 || len > 4) {
throw new Error("参数points的长度应该大于等于2小于5");
}
const fn =
len === 2
? this.firstOrder
: len === 3
? this.secondOrder
: this.thirdOrder;
const retPoints = [];
for (let i = 0; i < count; i++) {
retPoints.push(fn.call(null, i / count, ...points));
}
return retPoints;
}
firstOrder(t, p0, p1) {
const { x: x0, y: y0 } = p0;
const { x: x1, y: y1 } = p1;
const x = (x1 - x0) * t;
const y = (y1 - y0) * t;
return { x, y };
}
secondOrder(t, p0, p1, p2) {
const { x: x0, y: y0 } = p0;
const { x: x1, y: y1 } = p1;
const { x: x2, x: y2 } = p2;
const x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2;
const y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2;
return { x, y };
}
thirdOrder(t, p0, p1, p2, p3) {
const { x: x0, y: y0 } = p0;
const { x: x1, y: y1 } = p1;
const { x: x2, y: y2 } = p2;
const { x: x3, y: y3 } = p3;
let x =
x0 * Math.pow(1 - t, 3) +
3 * x1 * t * (1 - t) * (1 - t) +
3 * x2 * t * t * (1 - t) +
x3 * t * t * t;
let y =
y0 * (1 - t) * (1 - t) * (1 - t) +
3 * y1 * t * (1 - t) * (1 - t) +
3 * y2 * t * t * (1 - t) +
y3 * t * t * t;
return { x, y };
}
}
export default new Bezier();
Возможно, вы думаете, что это космическая дыра, так что давайте посмотрим на демо и скриншоты.
Демонстрационный адрес:Хотите спросить блоги Hu.GitHub.IO/Nuggets…
Безье первого порядка — это прямая:
Безье второго порядка одна контрольная точка:
Две контрольные точки Безье третьего порядка:
Контрольные точки Безье
Вернемся к началу: и анимация, и переход могут настраивать функцию Бесселя третьего порядка.Нужна информация о двух контрольных точках,Как получить контрольные точки через тестовую кривую?
Ключевой план по выводу Бесселя третьего порядка в онлайн уже давно доступен.
Но это не мешает мне реализовать простую и укрепить свое понимание.
Идеи грубой реализации
- эффект рисования на холсте
холст имеетbezierCurveToметод, вы можете напрямую рисовать кривые Безье - Две контрольные точки отображаются как элементы dom.
логика
- Вычислить ближайшую точку при нажатии и одновременно изменить координаты ближайшей точки
- перерисовать
Конечно, это всего лишь упрощенная версия.
Демонстрационный адрес:Хотите спросить блоги Hu.GitHub.IO/Nuggets…
снимок экрана:
С этим вы можете получить контрольные точки через кривую, Как упоминалось ранее, крутизна кривой определяет скорость, разве это не полезно?
Конечно, вы можете сами добавить линейное движение Безье и проверить реальный эффект движения, это не сложно, но сложность в том, что вы не хотите этого делать! ! !
напиши в конце
Если вы считаете, что это хорошо, ваши лайки и комментарии — самая большая мотивация для меня двигаться дальше.
Пожалуйста, посетите группу технического обменаиди сюда. Или добавьте мое облако похорон WeChat и учитесь вместе.
ссылка
Кривая Безье Грамотность
онлайн безье
онлайн безье 2
Визуализация кривой Безье n-й степени и демонстрация анимации процесса -- Dabaojian
Алгоритм кривой Безье, js точки пути кривой Безье
Точка захвата JS алгоритма кривой Безье
GitHub.com/peachcolore/be в IE…
кривая Безье n порядка рассчитывается для достижения
Обзор эффекта кривой Безье во внешнем интерфейсе