Я спросил, почему слова авторского ребенка изучают то, что Bezier Curve? Говорить правду, я вообще люблю математику большое количество людей, проходящих дрейфую, зачем просить ребенка заниматься математическими формулами ах! Исследование сделано кривые Безье, я внезапно хотел изучить математику. Действительно не хорошо в математике, изучая какое программирование ах. (Бумага Halo Scrop в плачении ......)
Сухие товары здесь:
Время науки
Когда дело доходит до кривых Безье, какова ваша первая реакция?
Друзья, которые изучают CSS, должны знатьanimation-timing-function:cubic-bezier(x1,y1,x2,y2)параметр времени анимации CSS. Если вы не можете этого понять, просто представьте, что у вас есть равномерное движение и движение с переменной скоростью. Если вы до сих пор этого не чувствуете, представьте, что вы бежите по беговой дорожке, причем в течение 1 часа, иногда со скоростью 8 км/ч, иногда со скоростью 10 км/ч. то естьanimation-timing-function:cubic-bezier(x1,y1,x2,y2)Смысл в том, чтобы позволить вам двигаться с разной скоростью в течение определенного промежутка времени (метод движения не ограничен, это может быть перемещение, вращение, растяжение...).
Но кривые Безье, поскольку они являются кривыми, сначала не использовались для функций времени, а действительно использовались для рисования кривых, таких как инструмент «Перо» в PS. (Удивление не удивление, удивление не случайно, здесь должны быть смайлики.)
Определение кривой Безье
A Bézier curve is defined by a set of control points P0 through Pn, where n is called its order (n = 1 for linear, 2 for quadratic, etc.). The first and last control points are always the end points of the curve; however, the intermediate control points (if any) generally do not lie on the curve. The sums in the following sections are to be understood as affine combinations, the coefficients sum to 1.
Авторский перевод накипи: кривая Безье управляется набором точек от P0 до PN, где N — его порядок (например, при N=1 она линейна, при 2 — квадратична и т. д.). Первая и последняя контрольные точки являются конечными точками кривой, однако некоторые промежуточные контрольные точки, если они есть, обычно не находятся на кривой. Комбинацию этих точек можно понимать как аффинную комбинацию (то есть не только точку, но и направление, в котором точка указывает), а сумма их коэффициентов равна единице.
Простое объяснение:
- Кривые Безье
一堆点взято из коллекции . - Этот
一堆点Он находится под контролем определения P0 ~ PN, полученного. - P0 ~ PN эти определенные точки, первая точка и последняя точка являются началом и концом кривой.
Процесс получения кривой действительно непрост, то есть процесс получения кривой на компьютере не является гладким, и он не так прост, как рисование кривой от руки. Если у вас есть наброски, вы должны знать, как нарисовать круг. Кто-то может сказать, что круг настолько прост, что это большой торт голыми руками. Можно только сказать, что вы слишком просты, молодой человек. Окружность наброска не делается за ночь, а непрерывно вырезается, и через отрезок линии медленно рисуется окружность. Конечно, это всего лишь метафора, кривые в компьютере формируются путем объединения бесчисленных отрезков прямых.
Примеры кривых Безье
Предположим, что мы делим кривую на 10 отрезков, кривая Безье контролируется P0~N точками, начиная с P0, находим точку на 1/10 отрезка в N-1 соединяющих линиях этих точек P0~N, и затем свяжите новые точки, чтобы получить N-2 линии, найдите точку на 1/10 вновь полученного отрезка линии и так далее, пока не останется только две точки и линия, найдите конечную точку на этой конечной линии, а также точки, составляющие кривую. Затем найдите точку 2/10, повторяя первый раз, пока не будет достигнуто PN.
Это немного сбивает с толку, дорога к рождению кривой действительно тяжелая. Приходить! Давайте почувствуем это на примере. Как мы контролируем кривую, определяя несколько точек.
Линейные кривые Безье
Линейные кривые Безье формируются путем управления двумя точками P0 и P1.Это простейшее, и это основная функция неполной средней школы (возможно, начальной школы). Вы можете спросить, почему я должен объяснять такой простой вопрос, вы глупы? (Отпустите меня, я не сумасшедший, я могу продолжить.) В предыдущем разделе упоминалось, что кривая на самом деле состоит из бесчисленных отрезков, поэтому эта линейная кривая Безье, конечно же, является основой!
Квадратичные кривые Безье
Итак, оставив основную функцию, мы собираемся ввести квадратичную функцию. Квадратичные кривые Безье образованы тремя точками P0, P1 и P2. Отсюда мы собираемся открыть дверь в новый мир.Через простые линейные кривые Безье в предыдущем разделе мы начинаем выводить метод рисования и математическую формулу квадратичных кривых Безье.
Вывод формулы:
Три кривые Безье
Наконец в CSSanimation-timing-function:cubic-bezier(p1x,p1y,p2x,p2y)нужную кривую. Эту кривую можно нарисовать с помощью упомянутого выше вторичного рисунка тыквы, разница в том, что есть еще два динамических сегмента линии.
Вывод формулы:
Разложение составления немного жестокого, поэтому я сделал фильм холст
Наслаждайтесь онлайн-адресом:codepen
Если это просто использовать, мы можем передатьчит-сайтПолучите часто используемые параметры временной кривой.
Связь между кубическими кривыми Безье и функцией времени CSS
Я считаю, что каждый нашел CSS, упомянутый выше, вanimation-timing-function:cubic-bezier(x1,y1,x2,y2)Этот атрибут на самом деле является применением трех кривых Бесселя, но первая точка и последняя точка фиксированы, а P1 и P2 можно регулировать.
Хотя нарисовать кривую Безье несложно, если вы понимаете ее принцип, нарисовать кривую нетрудно для всех. Но функцию времени CSS действительно сложно понять, потому что мы обычно используем время t, чтобы получить координаты (x, y) для рисования кривой, но в функции времени CSS мы не используем этот метод. Вместо этого найдите значение y по известному x. Сложность здесь в том, что需要求解一个3元一次方程(Если вам интересно, вы можете решить тройное линейное уравнение, чтобы получить t, и ввести формулу, чтобы получить y).
Есть также великие боги, которые сделали этот сайт для нас.Играйте с функциями Безье, так что вам не придется решать троичное линейное уравнение самостоятельно.
Рекурсивно обрабатывать все типы кривых Безье
Хотя мы можем получить формулы для расчета позиции каждой точки кривой Безье, мы можем сделать это в другом, более грузоподъемной силе, который также является более интуитивным.
Поскольку кривая Безье — прямая линия, я могу использовать рекурсию слой за слоем, чтобы вызвать только одну точку, а затем вычислить новые точки в соответствии с t и соединить эти точки, чтобы сформировать мою кривую!
Каждая кривая Безье получается из линейной рекурсии, поэтому сначала напишите линейную формулу.
function linearBezierCurze(a, b, c, d){
//(a,b),(c,d)
let s1 = c - a, s2 = d - b
return function (t) {
return [
s1 * t + a,
s2 * t + b
]
}
}
Затем используйте сокращение, чтобы вычислить новую точку между двумя точками для точек позиционирования, пока не останется только одна новая точка.
function drawPoints(point){
let newPoint=[]
point.reduce((p,c)=>{
newPoint.push(linearBezierCurze(...p,...c)(t))
return c
})
if(newPoint.length===1){
return newPoint[0]
}else{
return drawPoints(newPoint)
}
}
Автор написал демку онлайн игры, в игру можно добавить еще, написание относительно простое, не нравиться:demo
Суммировать
Автор ускользнул...