This is the 26th day of my participation in the August More Text Challenge.

preface

Today we talk about we often use CSS3 animation inside the Belsey curve, I hope to do, she knows you, you are familiar with her! This article source: Bezier

Read you understand half, start you succeed the other half!

The Bezier curve is in the front

Css3 animation is mainly

  • transition
  • animation

Transition transition-timing-function animation Animation -timing-function

In the transition – timing – function, for example

The built-in ease, Linear,ease-in,ease-out,ease-in-out are Bessel curve functions that control the rate at which properties change. Cubic bizier(x1,y1,x2,y2) can also be customized, the third order Bessel curve, x1,y1 and x2,y2 are two control points.

As shown in figure: X1, y1 correspond to P1, x2,y2 correspond to P2. Key points:

  1. The steeper the curve, the faster the speed, vice versa, the slower the speed!
  2. The position of the control points affects the shape of the curve

Speaking of which, think back to where our front end is still bezier.

  • svg
  • canvas/webgl
  • css3animation
  • animation Web API

    Don’t think JS can’t manipulate CSS3 animation

At the risk of sounding hollow, let’s take a look at the curve and the actual animation: the red ease and ease-out curves are steeper at the beginning and the acceleration is significantly faster.

Bezier curve motion – demo address

What is the Bezier curve

Bezier curve, also known as Bezier curve or Bezier curve, is a mathematical curve used in two-dimensional graphics applications.

So how do I understand this formula? Here you can assume

  • P0 is 0,0, and the final point is 1,1.

T goes from 0 to 1 and then you plug the value of t and the x-coordinate of the control point into the formula, and you get a new x-coordinate

The (new x, new y) coordinates are the points of the curve at time t.

The general formula

The linear equation

No control points, straight lines

Quadratic formula

A control point

Cubic formula

Two control points

This is our focus, because CSS animations are cubic equations

P0 is the starting point, P3 is the ending point, and the control points are P1 and P2, because we generally assume that P0 is (0,0) and P3 is (1,1).

The change of control points will affect the whole curve. Let’s encapsulate it briefly and carry out an example operation.

First order second order third order encapsulation

Based on the above formula for simple encapsulation, you pass in the required number of points and the corresponding control points can get the corresponding set of points information.

class Bezier {
  getPoints(count = 100. points) {
    const len = points.length;
    if (len < 2 || len > 4) {
      throw new Error("Points should be greater than or equal to 2 and less than 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();
Copy the code

Maybe you think it’s too empty, so let’s take a look at the demo and the screenshots. Demo address: xiangwenhu. Making. IO/juejinBlogs…

A first-order Bessel is a straight line:

Second order Bessel a control point:

Third-order Bezier two control points:

Bezier curve control point

Back to the beginning, animation and Transition can customize third-order Bessel functions. All they need is information about the two control points. How do we get control points by testing curves?

The scheme for taking third-order Bessel keys online has long existed.

Online Bessel online Bessel 2

But without hindering my own efforts to achieve a simple, enhanced understanding. General implementation ideas

  • Canvas drawing effect

    Canvas havebezierCurveToMethod, the Bessel curve can be drawn directly
  • The two control points are displayed as DOM elements

logic

  • Click to calculate the nearest point and modify the coordinates of the nearest point
  • redraw

Of course, this is just a simple version.

Demo Address:Xiangwenhu. Making. IO/juejinBlogs…

Screenshots:

With this, you can get control points from the curve, and as mentioned earlier, the steepness of the curve determines how fast you go, isn’t that useful?

Of course, you can add a Bessel linear movement, check the actual movement effect, in fact, it is not difficult, difficult is you do not want to start!!

Write in the last

If you think it is good, your likes and comments are the biggest motivation for me to move forward.

Please go to the technical exchange groupCome here,. Or add my wechat Dirge-Cloud and learn together.

Refer to the reference

2 visualized n times bezier curve and process animation demo – big sword Bezier curve algorithm, JS Bezier curve path point Bezier curve algorithm JS acquisition point github.com/mtsee/Bezie… N order Bezier curve calculation formula to achieve the front bezier curve effect summary