Как понимать и применять кривые Безье

JavaScript Canvas

Кривая Безье, также известная как кривая Безье, когда-то доставляла мне много головной боли в средней школе колледжа. Когда я некоторое время назад занимался рукописной анимацией, я обнаружил, что кривые Безье можно использовать для рисования траекторий и определения кривых анимации.

В этой статье мы рассмотрим, что представляет собой кривая Безье.

Принцип кривой Безье

Кривая Безье определяется n точками, и ее кривая траектория может быть получена по формуле:

贝塞尔公式

Среди них n представляет порядок кривой Безье, а формула описывает путь движения кривой.

Давайте обсудим, как выводится формула Бесселя.

кривая Безье первого порядка

一阶

Установите движущуюся точку на рисунке в Pt, t – время движения, t∈(0,1), можно получить следующую формулу

公式1

Кривая Безье второго порядка

二阶

二阶坐标

Известно, что на кривой Безье второго порядка три точки являются постоянными (P0,P1,P2), установите на P0P1Дело в Пa, в П1P2Дело в Пb, Пtв ПaPbТри точки находятся в равномерном движении за одно и то же время t.

Из формулы (1) можно узнать, что

公式2

Подставляя формулу (2) (3) в формулу (4), можно получить

公式3

Кривая Безье третьего порядка

三阶

三阶坐标

Точно так же, согласно приведенному выше процессу вывода, мы можем получить

公式4

Отсюда можно вывести

公式5

Кривая Безье порядка n

四阶

五阶

Поместите URL-адрес и почувствуйте процесс рисования кривой Безье по своему желанию:

нет entity729.GitHub.IO/whitemothwhile-Cu RV…

практическое применение

Есть два основных применения кривой Безье во внешнем интерфейсе: с одной стороны, ее можно использовать в качестве кривой анимации в анимации CSS3, а с другой стороны, ее можно использовать для рисования кривой через холст для достижения желаемого эффекта. .

Применение кривой Безье в CSS3

В CSS3 часто используются два свойства:transition-timing-functionа такжеanimation-timing-function, эти два представляют скорость перехода и скорость анимации соответственно. CSS3 предоставляет нам новый инструмент —cubic-bezier(x1,y1,x2,y2). Этот инструмент может генерировать кривую скорости и заставлять наш элемент регулировать скорость в соответствии с этой кривой.

В приведенном выше выводе мы знаем, что в формуле Бесселя есть две точки с постоянными положениями - P0 и P1,cubic-bezierПоложения двух контрольных точек определены в , поэтому кривая является кривой Безье третьего порядка.

Есть сайт, который позволяет нам быстро построить кривую Безье:cubic-bezier

Связь между кривыми Безье и кривыми анимации

Возьмем простое и грубое ощущение волнового графика: Пример 1:

1

Пример 2:

2

Пример третий:

3

Слева — кривая Безье, по горизонтальной оси — событие, по вертикальной — прогресс, интуитивно почувствовать изменение скорости невозможно.

Кривая справа — это кривая анимации в панели управления, по горизонтальной оси — время, по вертикальной оси — скорость, можно увидеть изменение скорости в различных аспектах.

В приведенном выше примере прямое направление является положительным направлением скорости, а обратное направление — отрицательным направлением скорости.

Как узнать изменение скорости

получить

В примере 1 кривая Безье представляет собой прямую линию. Когда время изменяется равномерно, прогресс также увеличивается равномерно. Видно, что скорость постоянна, а связь между временем и прогрессом может быть выражена линейным уравнением:

y=ax+b (a=1,b=0)

Где х — время, у — прогресс, а — скорость.

Первый случай вывода

Вдохновленный приведенными выше выводами, чтобы наблюдать другие кривые Безье,

方程一

Фигура представляет собой изменяющуюся кривую, мы берем небольшой ее участок и рассматриваем как устойчивую прямую, которая представлена ​​следующим линейным уравнением и отмечена на рисунке красной линией:

y=ax+b

Из содержания математики младших классов мы знаем, что при a>1 угол с осью x ∈ (45°, 90°); при a∈(0,1) угол с осью x находится в точке (0, 45°). В то же время, чем больше угол с осью х, тем больше а и выше скорость.

Наблюдайте за тенденцией изменения внутреннего угла на изображении выше, угол постепенно становится меньше и стремится к 0, а затем постепенно становится больше и стремится к 90 °. Соответствующая скорость должна быть такой, что скорость постепенно становится медленнее и стремится к 0, а затем постепенно становится быстрее.

Поместите кривую анимации и анимацию, чтобы проверить наше предположение:

方程一（1）

5

Второй случай вывода

Кривая на рисунке ниже находится частично в четвертом квадранте и частично в первом квадранте Как получить соответствующую кривую анимации в настоящее время.

Кривая также считается составленной из n гладких прямых, а направление прямой представлено линейным уравнением Видно, что направление скорости a вначале отрицательное, а затем медленно приближается к положительное направление, и скорость также уменьшается от большой к малой.Когда она равна 0, она будет постепенно увеличиваться в положительную сторону. То есть кривая показывает, что элемент сначала замедляется в противоположном направлении, а когда скорость равна 0, он будет ускоряться в положительном направлении.

方程三

Приведенный выше вывод подтверждается анимационными кривыми и анимациями:

方程三（1）

6

проверять

Используйте две кривые, чтобы проверить сделанный выше вывод:

Кривая первая:

方程二

方程二（1）

3

Кривая вторая:

方程四

方程四（1）

7

Из результатов можно сделать вывод, что взаимосвязь между кривой Безье и кривой анимации может быть правильно получена с помощью описанного выше метода вывода.

Применение анимационных кривых

После понимания того, как использовать кривые Безье для определения кривых анимации, можно реализовать многие анимационные эффекты, связанные со скоростью, такие как ускорение и торможение автомобиля, анимация пружины и другие траектории скорости, которые можно настроить в соответствии с вашими потребностями.

Размещение URL-адреса быстрой ссылки на функцию плавности может сделать вашу анимацию более реалистичной:Функция ослабления

Поместите небольшой пример:

动画案例

Эта анимация имитирует процесс падения и отскока мяча.

код показывает, как показано ниже:

    <div class="ground">
      <div class="ball" id="ball"></div>
    </div>

      .ball {
        width: 30px;
        height: 30px;
        background: #000000;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 50%;
        animation: move 4s cubic-bezier(0.36, 1.7, 0.26, 0.61) 1s infinite;
      }

      @keyframes move {
        0% {
          top: 0;
        }
        100% {
          top: 90%;
        }
      }

Этот вид анимации может относиться к случаям больших в Интернете:

Применение кривых Безье с анимацией CSS3, SVG и холстом

Понимание и использование кривых Безье

Рисование кривых Безье с помощью холста

На холсте предоставляется API для быстрого рисования кривой Безье для достижения желаемого эффекта:

Кривая Безье второго порядка

quadraticCurveTo(x1,y1,x2,y2)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(40,200,200,20);
ctx.stroke();

canvas-2阶

вmoveToопределяет начальную точку,quadraticCurveTo(x1,y1,x2,y2)середина(x1,y1)является контрольной точкой,(x2,y2)на конец

Кривая Безье третьего порядка

bezierCurveTo(x1,y1,x2,y2,x3,y3)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(40,100,200,150,200,20);
ctx.stroke();

canvas-3阶

вmoveToопределяет начальную точку,bezierCurveTo(x1,y1,x2,y2)середина(x1,y1),(x2,y2)является контрольной точкой,(x3,y3)на конец

Суммировать

Чтобы узнать, что такое кривая Безье и как она связана с кривыми анимации и скоростью, автор побежал пересматривать вещи, которые были брошены учителю ранее.Если есть какая-то ошибка, пожалуйста, нажмите /(ㄒoㄒ) /~ ~

Широкая реклама

Эта статья была опубликована вЕженедельный выпуск Mint Front End, Добро пожаловать в Watch & Star ★, пожалуйста, указывайте источник при перепечатке.

Добро пожаловать, чтобы обсудить, поставить лайк и перейти ｡◕‿◕｡～

Мой блог будет синхронизирован с Tencent Cloud + Community, и я приглашаю всех присоединиться:cloud.Tencent.com/developer/ это…

Категории