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

栏目: CSS · 发布时间: 5年前

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

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

#前沿:

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

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

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

在平面内任选 3 个不共线的点,依次用线段连接。 贝塞尔曲线的css实现——淘宝加入购物车基础动画

在第一条线段上任选一个点 D。计算该点到线段起点的距离 AD,与该线段总长 AB 的比例。 贝塞尔曲线的css实现——淘宝加入购物车基础动画

根据上一步得到的比例,从第二条线段上找出对应的点 E,使得 AD:AB = BE:BC贝塞尔曲线的css实现——淘宝加入购物车基础动画

连接这两点 DE。

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

从新的线段 DE 上再次找出相同比例的点 F,使得 DF:DE = AD:AB = BE:BC贝塞尔曲线的css实现——淘宝加入购物车基础动画

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

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

如果你实在想象不出这个过程,没关系,看动画!

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

回过头来看这条贝塞尔曲线,为了确定曲线上的一个点,需要进行两轮取点的操作,因此我们称得到的贝塞尔曲线为二次曲线(这样记忆很直观,但曲线的次数其实是由前面提到的伯恩斯坦多项式决定的)。

当控制点个数为 4 时,情况是怎样的? 贝塞尔曲线的css实现——淘宝加入购物车基础动画

步骤都是相同的,只不过我们每确定一个贝塞尔曲线上的点,要进行三轮取点操作。如图, AE:AB = BF:BC = CG:CD = EH:EF = FI:FG= HJ:HI ,其中点 J 就是最终得到的贝塞尔曲线上的一个点。 贝塞尔曲线的css实现——淘宝加入购物车基础动画

这样我们得到的是一条三次贝塞尔曲线。 贝塞尔曲线的css实现——淘宝加入购物车基础动画

看过了二次和三次曲线,更高次的贝塞尔曲线大家应该也知道要怎么画了吧。那么比二次曲线更简单的一次(线性)贝塞尔曲线存在吗?长什么样?根据前面的介绍,只要稍作思考,想必你也能猜出来了。哈!就是一条直线~ 贝塞尔曲线的css实现——淘宝加入购物车基础动画

能画曲线也能画直线,是不是很厉害?要绘制更复杂的曲线,控制点的增加也仅仅是线性的。这一特点使其不光在工业设计领域大展拳脚,就连数学基础不好的人也可以比较容易地掌握,比如大多数平面美术设计师们。 贝塞尔曲线的css实现——淘宝加入购物车基础动画

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

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

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

我们可以在这个网站自己拖动查看不同参数下,三阶贝塞尔曲线的运动速率效果

#思路

将目标对象(本文为一个足球图片)包在两个div中,足球img标签放在最内层里;

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

#源代码:

```

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<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 class="wraper">

<!-- 水平运动 -->

<div class="item">

<img src="./images/ball.jpg" style="width:50px;"/>

</div>

</div>

</body>

<script>

</script>

</html>

```

#实现效果如下:

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTML网页设计参考手册

HTML网页设计参考手册

张金霞 / 清华大学 / 2006-9 / 39.00元

本书由最基本的HTML语法开始讲解网页设计的基础技术,详细介绍了各种网页制作的标记;然后介绍如何运用CSS控制网页画面中文字与图片的样式;接下来讲解了JavaScript语言与网页特效的制作;最后以应用最广泛的Drcamweaver为例,介绍网页设计的方法。在讲解中配有大量范例,使读者在实际操作中学习制作网页。   HTML语言是制作网页的基础语言。作为一个网页制作爱好者或者专业的网......一起来看看 《HTML网页设计参考手册》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具