贝塞尔曲线 弯曲动画ios_用贝塞尔曲线弯曲

贝塞尔曲线 弯曲动画ios

by Nash Vail

由Nash Vail

用贝塞尔曲线弯曲 (Nerding Out With Bezier Curves)

Since the past few days I have been trying to write my own little JavaScript animation library. I know I know no one really cares about a new animation library but hey, the point is, in the process I stumbled on to Bezier curves. I spent a couple of hours researching, trying to understand them during which I came across this fresh article — “Mathematical Intuition Behind Bezier Curves”, which also happens to be the inspiration for this article. It’s mathy and seemingly aimed at brainy people, therefore I had kind of a tough time wrapping my head around the concept. But, fortunately, in the end I did and this led to learning a number of cool new stuff about Bezier curves which I am very excited to share with you.

从过去的几天开始，我一直在尝试编写自己的小JavaScript动画库。 我知道我没有人真正在乎一个新的动画库，但是，关键是，在我偶然发现Bezier曲线的过程中。 我花了几个小时进行研究，试图理解它们，然后才发现这篇新文章“ 贝塞尔曲线背后的数学直觉 ”，这也正是本文的灵感。 这是数学式的，看似针对聪明的人，因此我很难理解这个概念。 但是，幸运的是，最终我做到了，这导致学习了许多关于Bezier曲线的新奇知识，我很高兴与您分享。

您将学到什么 (What you will be learning)

I’ll start out with an introduction to curves, what they are, why they’re cool, their mathematical representation. Don’t worry about the Math though, to be honest, I kinda sorta suck at Math, so I have to come with ways of trying to explain it to myself and I am sure “the ways” will work for you too :).

我将首先介绍曲线，它们是什么，为什么很酷，它们的数学表示形式。 不过，请不要担心数学，说实话，我有点喜欢数学，所以我必须想方设法向自己解释数学，并且我相信“方法”也将对您有用：)。

Next, we’ll move on to Bezier curves. What they are, and what makes them different. Their mathematical formula.

接下来，我们继续进行贝塞尔曲线。 它们是什么，以及使它们与众不同的原因。 他们的数学公式。

Towards the end we will build our own little Bezier curve drawing engine in JavaScript and SVG. How cool is that?

最后，我们将使用JavaScript和SVG构建我们自己的小Bezier曲线绘制引擎。 多么酷啊？

曲线 (Curves)

I don’t need to give a formal definition of curve here right? All of these lines are curves, look at them

我不需要在这里给出曲线的正式定义，对吧？ 所有这些线都是曲线，看看它们

Curves are pretty sweet, they can represent a number of things. Like for example the curve below shows the number of my Twitter followers over time.

曲线非常漂亮，可以代表很多东西。 例如，下面的曲线显示了一段时间以来我的Twitter关注者数量。

Alright okay, that looks like a randomly scribbled line. Let me add some context.

好吧，那看起来像是随意绘制的线条。 让我添加一些背景信息。

It should now give a better idea of what it represents. On the horizontal axis is the number of days since I joined Twitter and on the vertical axis is the number of followers I gained.

现在，它应该更好地表示它的含义。 横轴是我加入Twitter以来的天数，纵轴是我获得关注者的数量。

On my first day on Twitter, I had 0 followers then it slowly increased, I lost some, gained some, then on the latter half as you can see I gained a number of new followers. That is not the only information we can decipher out of this curve. I can also find out the exact number of followers I had on any given day. It is just a matter of drawing two lines.

在Twitter上的第一天，我有0个关注者，然后逐渐增加，我损失了一些，获得了一些，然后在后半部分，正如您所看到的，我获得了许多新关注者。 这不是我们可以从该曲线中得到的唯一信息。 我还可以找出任何一天我的关注者的确切人数。 只需画两条线即可。

Let’s say I’d like to know the number of followers I had on the 60th day.

假设我想知道第60天的追踪者人数。

I draw a vertical line from 60 on the horizontal axis, then from the point where this line intersects the curve I draw a horizontal line. This horizontal line intersects the vertical axis (axis with number of followers) at a point. The value of that point on the vertical axis gives me the exact number of followers I had on the 60th day, which is 126.

我在水平轴上从60开始绘制一条垂直线，然后从该线与曲线相交的点开始绘制一条水平线。 此水平线与垂直轴(带有跟随器数量的轴)在一点上相交。 垂直轴上该点的值向我提供了我在第60天拥有的确切追踪者数量，即126。

Now, where the two red lines intersect, is what is called a point. On a 2-dimensional plot, like our Twitter followers graph, a point is uniquely identified by two values, its horizontal coordinate (x) and its vertical coordinate (y). Therefore writing (x, y) is all it is needed to represent a point. In our case, the red point, where the two red lines intersect can be written as (60, 126).

现在，两条红线相交的地方就是一个点 。 在二维图上，就像我们的Twitter关注者图一样，一个点由两个值唯一地标识，即水平坐标( x )和垂直坐标( y )。 因此，只需写出(x，y)即可表示一个点。 在我们的例子中，两条红线相交的红点可以写为(60，126)。

(60= x/Horizontal coordinate, 126 = y/Vertical Coordinate)

(60 = x /水平坐标，126 = y /垂直坐标)

Alright enough for what a point is, you knew that already. Let’s talk about the curve, which actually is a collection of many such points isn’t it?

就什么意思而言，您已经知道了。 让我们谈谈曲线，它实际上是许多这样的点的集合，不是吗？

You take an array of data like on 0th day 0 followers, 1st day 50 followers … 10th day 76 followers ...100th day 500 followers… and so on. You convert this data to points (0, 0) (1, 50) … (10, 76)…(100, 500)... You plot the points on the graph join them together and there, you have a curve.

您采用一系列数据，例如第0天第0个关注者，第1天第50个关注者...第十天第76个关注者...第100天第500个关注者……等等。 您将此数据转换为点(0，0)(1，50)…(10，76)...(100，500)...在图上绘制点，将它们连接在一起，就形成了一条曲线。

So, for a curve you need points and for points you need corresponding x and y values. Therefore, now pay close attention here, a curve can be uniquely represented by something that can spit out x and or y values for us. That “something” is what we call in Mathematics a function.

因此，对于曲线，您需要点，对于点，您需要相应的x和y值。 因此，现在在这里要特别注意，曲线可以由可以为我们吐出x和y值的东西唯一地表示。 这个“东西”是我们在数学中所谓的函数。

There are many standard functions in Mathematics. Consider the sine function.

数学中有许多标准函数。 考虑正弦函数。

In functions like this, the choice of x is ours. We give it an x, it gives us a y. And together we form a point (x, y). We give it another x it gives us another y, so and so forth we end up with a collection of points, we plot them and get a unique shape.

在这样的函数中，x是我们的选择。 我们给它一个x ，它给我们一个y 。 我们一起形成一个点(x，y)。 我们给它另一个x，给它另一个y，依此类推，我们最终得到一个点集合，绘制它们并得到一个独特的形状。

A function can also be represented in parametric form. In parametric form we don’t need to supply a part of the point’s coordinate like we did (x) in the previous example. Instead we supply a parameter/variable, generally written as t and for every t we get both x and y coordinates, in short we supply a t we get a point.

函数也可以参数形式表示。 以参数形式，我们不需要像上一个示例中那样提供点坐标的一部分。 取而代之的是，我们提供一个参数/变量，通常写为t，并且每获得t，我们都获得x和y坐标，总之，我们提供了t，我们得到一个点。

You will want to know what parametric form is when we talk about the Mathematics behind Bezier curves.

当我们谈论贝塞尔曲线背后的数学时，您将想知道什么是参数形式。

贝塞尔曲线 (Bezier Curves)

Bezier curves are very special curves. The math and the idea behind them blew me away and you should get ready to be blown away too.

贝塞尔曲线是非常特殊的曲线。 他们背后的数学和想法让我震惊，您也应该准备被吹走。

Since you’re reading this I assume you are a designer or a developer and have dealt with Bezier curves before, especially Cubic Bezier curves, we’ll get to what Cubic Bezier curves are in a second. Now these curves are used in a variety of places, to create vector graphics, animation paths, animation easing curves e.t.c only because they are so easy to control. You don’t need to know a whole lot of Math, none at all to bend these curves to your whims. Think if Bezier curves didn’t exist and people had to come up with unique Mathematical functions for curves for let’s say drawing vector graphics like fonts for example, a nightmare of course.

由于您正在阅读本文，因此我假设您是设计师或开发人员，并且之前已经处理过Bezier曲线，尤其是Cubic Bezier曲线，所以我们将在一秒钟之内了解一下Cubic Bezier曲线。 现在，这些曲线可用于各种地方，以创建矢量图形，动画路径， 动画缓和曲线等，这仅是因为它们易于控制 。 您不需要了解很多数学知识，根本不需要将这些曲线弯曲成您的理想。 考虑一下，如果不存在贝塞尔曲线，人们不得不为曲线想出独特的数学函数，比如说绘制矢量图形(例如字体)，那当然是一场噩梦。

数学 ？ (Math ?)

Alright, time for some Math. I’ll start with the general formula for Bezier curves, it's quite daunting at the first sight, but we’ll make our way through.

好了，是时候上一些数学了。 我将从贝塞尔曲线的一般公式开始，乍一看这让人望而生畏，但是我们将逐步解决。

“Whoa! Whoa! Whoa! Einstein!”. Hey wait, don’t click away. It’s easy, look, I made it so colorful ?.

“哇！ 哇！ 哇！ 爱因斯坦！”。 嘿，等等，不要点击离开。 很简单，您看，我使它变得如此多彩吗？

Let us start breaking the formula down. You can skip over the parts you already know.

让我们开始分解公式。 您可以跳过已经知道的部分。

B(吨) (B(t))

B because it’s a Bezier curve. As mentioned earlier in the article about parametric form of curves, t is a parameter. You plug in t and out comes x and y, a point. We’ll soon see how that works with the equation above. It’ll be good to mention here that for Bezier curves the value of t should be between 0 and 1, both included.

B，因为它是A B ezier曲线。 如前面有关曲线的参数形式的文章所述， t是一个参数。 插入t ，然后插入x和y ，这就是一点。 我们很快将看到上面的方程如何工作。 值得一提的是，对于Bezier曲线， t的值应介于0和1之间(均包括在内)。

Σ/西格玛 (Σ / Sigma)

This symbol, Σ, in Mathematics is called the summation operator. The way it works is like this, on the right of this symbol is an expression with a variable i, and i can only hold integer values. On the top and bottom of the symbol we write the limits of i. For each value of i the expression to the right is evaluated and added to the total until i reaches n.

在数学中，此符号Σ被称为求和运算符。 它的工作方式是这样的，在此符号的右边是带有变量i的表达式，并且i仅可容纳整数值。 在符号的顶部和底部，我们写出了i的极限。 对于i的每个值，将评估右边的表达式并将其添加到总数中，直到i达到n。

Here are some examples.

这里有些例子。

Just a shorter notation for something longer.

只是较短的符号代表更长的时间。

Alright, looks like we’re clear with sigma.

好吧，看来我们对sigma了如指掌。

nCi (nCi)

This C here, is the C from Permutations and Combinations. Let’s have an impromptu Combinations lesson shall we. Now, in the formula this part is what is called a Binomial coefficient. The way to read nCi is like this, n Choose i. Which is to say given n items in how many ways can you choose i items out of it ( n is always greater than or equal to i). Okay, that might not have made a lot of sense, consider this example : I have 3 items a circle, a square and a triangle. Therefore here, n = 3. In how many ways can I choose 2(i = 2) items out of the 3. In the language of Mathematics that would be written as 3C2 ( 3 Choose 2). The answer is 3.

这里这个C，从排列组合和C ombinations的温度。 让我们上一个即席组合课。 现在，在公式中这部分就是所谓的二项式系数。 读取nCi的方法是这样的，n 选择 i。 也就是说，给定n种商品，您可以从中选择i种商品(n始终大于或等于i)。 好的，那可能没有多大意义，请考虑以下示例：我有3个项目，分别是圆形，正方形和三角形。 因此，这里n =3。我可以从3种方法中选择2种(i = 2)。用数学语言表示为3C2(3选择2)。 答案是3。

Similarly,

同样，

And when i is 0, there is just one way to choose 0 items out of n, 1, to choose none at all.

当i为0时，只有一种方法从n，1中选择0个项，而根本不选择任何项。

Instead of drawing sketches and figuring out the answer to a given Combination expression, there is this generalized formula.

有一个广义的公式，而不是绘制草图并弄清楚给定组合表达式的答案。

sub (P sub i)

This is the important bit. In the general formula for Bezier curve there is t, i and n. We haven’t really touched on what n is. n is what is called the degree of the Bezier curve. n is what decides whether a Bezier curve is linear or quadratic or cubic or something else.

这是重要的一点。 在贝塞尔曲线的通用公式中，有t，i和n。 我们还没有真正涉及n是什么。 n是所谓的贝塞尔曲线的度数。 n是决定Bezier曲线是线性曲线，二次曲线，三次曲线还是其他曲线的原因。

You see, if you have used the pen tool before, you click at two distinct locations to create two distinct points and then you control the curve that is formed between the two points using handles. A Bezier curve is always going to have at least two anchor points, and the remaining are control points that are used to control the shape of the curve. Also, what you call handles are just the control points connected by a line to a anchor point, they’re just there to provide a better mental model. So when you adjust the handles, in reality you are simply changing the coordinates of the control points.

您会看到，如果以前使用过钢笔工具，则可以在两个不同的位置单击以创建两个不同的点，然后使用手柄控制在两个点之间形成的曲线。 贝塞尔曲线始终将至少具有两个锚点，其余的是用于控制曲线形状的控制点。 同样，您所说的句柄只是通过线连接到锚点的控制点，它们只是在此处提供更好的思维模型。 因此，实际上，当您调整手柄时，您只是在更改控制点的坐标。

Let us get rid of all the accessories and focus on the core.

让我们摆脱所有的配件，专注于核心。

The curve you see in the image above is a Cubic Bezier curve, or in other words the degree of the Bezier curve shown above is 3, or in the general formula for Bezier Curves you plug n = 3.

您在上图中看到的曲线是三次Bezier曲线，换句话说，上面显示的Bezier曲线的度数是3，或者在插入Be = 2的Bezier曲线的通用公式中。

n = 1 gives you a linear Bezier curve with two anchor points P0 and P1 and no control points, so it essentially ends up being a straight line.

n = 1为您提供了一个线性的贝塞尔曲线，它具有两个锚点P0和P1，并且没有控制点，因此它最终以一条直线结束。

n = 2 gives you a quadratic Bezier Curve with two anchor points P0 and P2 and one control point P1

n = 2给出具有两个锚点P0和P2和一个控制点P1的二次贝塞尔曲线

and similarly n = 3 gives you a Cubic Bezier curve with two anchor points P0 and P3 and two control points P1 and P2. The higher the n, the more complicated shapes can be drawn.

同样，n = 3会给出具有两个锚点P0和P3以及两个控制点P1和P2的三次贝塞尔曲线。 n越高，可以绘制的形状越复杂。

Now we’re going to form from the general equation the equation for Cubic Bezier curve which involves substituting n = 3 in the general formula. The equation we will get will be in the variable t which as mentioned earlier is a parameter whose value varies between 0 and 1. Also, for the equation we will need 4 Pis ( read: Pee eyes ) P0, P1, P2 and P3. The choice of these points is up to us, after all when we draw vector graphics say using the pen tool we choose the position of anchor points and the control points don’t we? After the changes our equation for Cubic Bezier curve looks something like this.

现在，我们将从通用方程式形成三次贝塞尔曲线的方程式，其中涉及在通用公式中替换n = 3。 我们将得到的方程式将在变量t中，变量t如前所述是一个值在0到1之间变化的参数。此外，对于方程式，我们将需要4个Pis(读取：Pee眼睛)P0，P1，P2和P3。 这些点的选择完全取决于我们，毕竟当我们绘制矢量图形时说要使用钢笔工具选择锚点的位置，而控制点不是吗？ 更改后，我们的三次贝塞尔曲线方程看起来像这样。

We are using a little brevity here, in reality each point (P) has two coordinates x and y and also on passing t to the general equation we are supposed to get a point which also has x and y coordinates. Therefore we can write the above equation as

这里我们使用了一些简洁性，实际上每个点(P)都有两个坐标x和y，并且在将t传递给一般方程式时，我们应该得到一个也具有x和y坐标的点。 因此我们可以将上面的等式写成

You are about to witness something very special about these equations.

您将见证关于这些方程式的一些非常特殊的东西。

To recap, the mentioned equation is the parametric form of the Bezier curve with the parameter t which can hold values varying between 0 and 1. A curve is a collection of points. Each unique t you pass in to B gives a unique point that builds up the whole Bezier curve.

概括地说，上述方程式是参数t的Bezier曲线的参数形式，其参数值可以在0到1之间变化。曲线是点的集合。 传递给B的每个唯一的t都会产生一个唯一的点，该点构成了整个贝塞尔曲线。

The magical thing about the equation is that when t = 0, B(0) = P0 and when t = 1, B(1) = P3, therefore, the extreme values of t, 0 and 1 give the extreme most points of the curve which are of course the anchor points. This is not true just for cubic Bezier curves, for a curve of degree n B(0) = P0 and B(1) = Pn.

该方程式的神奇之处在于，当t = 0时，B(0)= P0，而当t = 1时，B(1)= P3，因此，t，0和1的极值给出了极值。曲线当然是锚点。 仅对于三次贝塞尔曲线，对于度为n B(0)= P0且B(1)= Pn的曲线，情况并非如此。

For any other value of t between 0 and 1 (e.g t = 0.2 in figure above) you get a point which builds up the curve.

对于介于0和1之间的t的任何其他值(例如，上图中的t = 0.2)，您会得到一个建立曲线的点。

Since the whole equation is dependent on the position of the Pis (Pee eyes) changing their position changes the shape of the curve. And that is how Bezier curves work.

由于整个方程式取决于Pis(小便眼睛)的位置，因此更改其位置会更改曲线的形状。 这就是贝塞尔曲线的工作方式。

Now that we know the Math behind Bezier curves let’s put that knowledge to some use.

现在我们知道了Bezier曲线背后的数学运算，现在就将该知识加以利用。

I have created a simple JavaScript program that renders a cubic Bezier curve, there is no UI to interact with it because I didn’t want the logic to fade away in all of the UI code and also because I am lazy. But that doesn’t mean you can’t interact with it :).

我创建了一个简单JavaScript程序，该程序呈现了三次Bezier曲线，没有UI可以与之交互，因为我不希望所有UI代码中的逻辑都消失，而且我很懒。 但这并不意味着您不能与它进行交互:)。

Was that a little too much to take in? We started out with defining what curves are, from there we moved to points and how they are the building blocks of a curve. Then we went on to Bezier curves and understood the Math to find points that make a Bezier curve up. I hope you learnt something and leaving this article smarter than when you started reading it.

有点太多了吗？ 我们首先定义什么曲线，然后从那里移到点，以及它们如何构成曲线。 然后，我们继续研究Bezier曲线并了解数学原理，以找到使Bezier曲线向上的点。 我希望您能学到一些东西，并使本文比开始阅读时更聪明。

The code for the little custom Cubic Bezier engine can be found in this GitHub repo.

小型自定义Cubic Bezier引擎的代码可以在此GitHub存储库中找到。

Update: The Generator can now generate a Bezier curve of any degree and not just Cubic Bezier Curves :) .

更新：生成器现在可以生成任何程度的贝塞尔曲线，而不仅仅是立方贝塞尔曲线:)。

寻找更多？ 我定期在我的博客nashvail.me上发布。 到那里见，祝你好运！ (Looking for more? I publish regularly on my blog at nashvail.me. See you there, have a good one!)

翻译自: https://www.freecodecamp.org/news/nerding-out-with-bezier-curves-6e3c0bc48e2f/

贝塞尔曲线 弯曲动画ios