动画原理——曲线

书籍名称：HTML5-Animation-with-Javascript

书籍源码：https://github.com/lamberta/html5-animation

1.使用quadraticCurveTo，

• 开始点：moveTo(20,20)


• 控制点：quadraticCurveTo(20,100,200,20)的前两个参数，


• 结束点：quadraticCurveTo(20,100,200,20)的后两个参数

图示如下：

2.曲线经过的点

如果你想让曲线经过一个点，可以利用下面这个公式来计算。其中xt，yt是我们希望曲线经过的目标点，而x0,y0,x2,y2分别为两个端点。通过这个公式可以计算出控制点x1，y1

x1 = xt * 2 - (x0 + x2) / 2;
y1 = yt * 2 - (y0 + y2) / 2;

03-curve-through-point.html代码：

Example from Foundation HTML5 Animation with Javascript

View Code

3.多重曲线