贝塞尔曲线的css实现——淘宝加入购物车基础动画

时间 2019-11-17

标签曲线 css 实现淘宝加入购物车基础动画栏目 CSS 繁體版

原文原文链接

本文是看了志佳老师的公开课学习的，**模仿淘宝的加入购物车动画**，实现贝塞尔曲线运动的动画路径效果,以下所示。css

#前沿：html

1.贝塞尔曲线原理：https://blog.csdn.net/cdnight/article/details/48468653前端

贝塞尔曲线在 web 开发领域一样占有一席之地。CSS3 新增了 transition-timing-function 属性，它的取值就能够设置为一个三次贝塞尔曲线方程。在此以前，也有很多 JavaScript 动画库使用贝塞尔曲线来实现美观逼真的缓动效果。
css3

下面咱们就经过例子来了解一下如何用 de Casteljau 算法绘制一条贝塞尔曲线。web

在平面内任选 3 个不共线的点，依次用线段链接。算法

在第一条线段上任选一个点 D。计算该点到线段起点的距离 AD，与该线段总长 AB 的比例。学习

根据上一步获得的比例，从第二条线段上找出对应的点 E，使得 AD:AB = BE:BC。动画

链接这两点 DE。网站

重新的线段 DE 上再次找出相同比例的点 F，使得 DF:DE = AD:AB = BE:BC。.net

到这里，咱们就肯定了贝塞尔曲线上的一个点 F。接下来，请稍微回想一下中学所学的极限知识，让选取的点 D 在第一条线段上从起点 A 移动到终点 B，找出全部的贝塞尔曲线上的点 F。全部的点找出来以后，咱们也获得了这条贝塞尔曲线。

若是你实在想象不出这个过程，不要紧，看动画！

回过头来看这条贝塞尔曲线，为了肯定曲线上的一个点，须要进行两轮取点的操做，所以咱们称获得的贝塞尔曲线为二次曲线（这样记忆很直观，但曲线的次数实际上是由前面提到的伯恩斯坦多项式决定的）。

当控制点个数为 4 时，状况是怎样的？

步骤都是相同的，只不过咱们每肯定一个贝塞尔曲线上的点，要进行三轮取点操做。如图，AE:AB = BF:BC = CG:CD = EH:EF = FI:FG= HJ:HI，其中点 J 就是最终获得的贝塞尔曲线上的一个点。

这样咱们获得的是一条三次贝塞尔曲线。

看过了二次和三次曲线，更高次的贝塞尔曲线你们应该也知道要怎么画了吧。那么比二次曲线更简单的一次（线性）贝塞尔曲线存在吗？长什么样？根据前面的介绍，只要稍做思考，想必你也能猜出来了。哈！就是一条直线~

能画曲线也能画直线，是否是很厉害？要绘制更复杂的曲线，控制点的增长也仅仅是线性的。这一特色使其不光在工业设计领域大展拳脚，就连数学基础很差的人也能够比较容易地掌握，好比大多数平面美术设计师们。

上面介绍的内容并不足以展现贝塞尔曲线的真正威力。推广到三维空间的贝塞尔曲面，以及更进一步的非均匀有理 B 样条（NURBS），早已成为当今计算机辅助设计（CAD）的行业标准，不管是咱们日常用到的各类产品，仍是在电影院看到的精彩大片，都少不了它们的功劳。

2.贝塞尔曲线演示网站： http://cubic-bezier.com

咱们能够在这个网站本身拖动查看不一样参数下，三阶贝塞尔曲线的运动速率效果

#思路

将目标对象（本文为一个足球图片）包在两个div中，足球img标签放在最内层里；

内外两层分别从横向和纵向两个方向设置好div的动画，运动时间设置相同则能够出现二维的运动动画效果，理论上能够实现不少复杂的曲线效果。

#源代码：

```

<!DOCTYPE html>

<html>

<head>

<title>前端使用贝塞尔曲线实现移动曲线动画</title>

<style>

:root{

--main: 200px;

}

.item{

width: var(--mian);

height: var(--mian);

position: absolute;

top: 50px;

left: 20px;

background-color: #00aa00;

border-radius: 50%;

}

.wraper{

animation: ver-animation 2s 0.5s 2;

animation-timing-function: cubic-bezier(0.06, .46, 0, 1.04)

}

.wraper .item{

animation: hor-animation 2s linear .5s 2;

}

@keyframes hor-animation{

0%{

transform: translateX(0px)

}

100%{

transform: translateX(400px)

}

@keyframes ver-animation{

0%{

transform: translateY(0px)

}

100%{

transform: translateY(400px)

}

</style>

</head>

<body>

</div>

</body>

</script>

</html>

```

#实现效果以下：