--- theme: juejin highlight: a11y-dark --- ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/789a3f66cc224ab3a3c4f947b82c02c9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55uP54Gv:q75.awebp?rk3s=f64ab15b&x-expires=1757448788&x-signature=WLrDz96fzgD5TJWxHwGPn%2Fyviwo%3D) ![Kapture 2024-11-12 at 15.22.40.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1bdd81c8feea42a4af6c77a3465a253c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55uP54Gv:q75.awebp?rk3s=f64ab15b&x-expires=1757448788&x-signature=dvJJL0QhidQoim60bV11Nk46cRM%3D) ## 一、运动动画抛物线由`两段`运动构成：\ 1、`横`向 \ 2、`纵`向忽略空气阻力。\ 横向是`匀速`直线运动，\ 纵向是`自由`落体运动。 ### 用css做 #### 一个元素不同方向动画 ```html

``` 给这个小球动画，分别一个x方向的移动，一个y方向的移动。 ```css // x @keyframes moveX { to { transform: translateX(200px); } } // y @keyframes moveY { to { transform: translateY(400px); } } .ball { width: 50px; height: 50px; border-radius: 50%; background: #B30204; animation: moveX 2s linear forwards, moveY 2s ease forwards; } ``` 看看效果： ![Kapture 2024-11-12 at 16.00.29.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/be9e7d78f1844124913f13ab81d80a50~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55uP54Gv:q75.awebp?rk3s=f64ab15b&x-expires=1757448788&x-signature=c8%2FhkzQ3aFm0gNkP%2Bi99wLWwGZc%3D) 不是我们想要的效果。为什么呢？是因为一个元素同一时间，赋予两个动画，既让它往左走200米，又让它走往下走400米。明显造成冲突了。那么如何来解决这个问题呢？**多元素动画**。每一个负责一段运动就好了，那么就不存在css属性冲突这个问题了。 #### 多元素各负责一个动画 ```html

``` 现在有两个元素了。一个x轴向右匀速移动200px，一个y轴向下缓慢加速移动400px。我们来看看效果： ![Kapture 2024-11-12 at 16.41.39.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1787a310288c471b829e28186bf3f24c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55uP54Gv:q75.awebp?rk3s=f64ab15b&x-expires=1757448788&x-signature=DwOHnEgwvnuWZdO4WXHy%2FQ1Z3jg%3D) 🔴 红色是父 \ 🟢 绿色是子 \ 终点(x, y)是(200, 400) ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b2a2c62c5f9e41669fb21193820487dc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55uP54Gv:q75.awebp?rk3s=f64ab15b&x-expires=1757448788&x-signature=TbzyNatYfiiJNlPbzCb7HT24alU%3D) x轴方向的父确确实实也会影响y轴方向的子，只不过这个效果没达到我们想要的那种抛物线的效果。 #### 贝塞尔曲线那么，想要达到我们想要的效果，y轴方向，其实是需要先向上抛一段路程，再向下做加速运动的。css动画中能满足我们`随心`所欲地`定制`复杂`动画`的需求，这里就需要用到`贝塞尔曲线cubic-bezier()函数`。 **基本语法**： `cubic-bezier(x1, y1, x2, y2)`。\ `x1、y1、x2、y2`这四个参的取值范围都是(`0到1`)，较小就较慢，较大就较快。 **参数含义**： > x1, y1 ：起始速度（水平，垂直） * `x1`：控制动画`起始`点的`水平`方向`速度`变化。 * `y1`：控制动画`起始`点的`垂直`方向`速度`变化。 > x2, y2 ：结束速度（水平，垂直） * `x2`：控制动画`结束`点的`水平`方向`速度`变化。 * `y2`：控制动画`结束`点的`垂直`方向`速度`变化。我们平常碰到的`ease`、`ease-in`、`ease-out`、`ease-in-out`等等这些，实际上就是贝塞尔曲线`cubic-bezier()`的特定实例。实际上讲的是`速度`。只要`x1=y1, x2=y2`那即是匀速`linear`。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d4b16be7455e4ef7b7831fe53c4f5738~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55uP54Gv:q75.awebp?rk3s=f64ab15b&x-expires=1757448788&x-signature=8keiJ4wEZwVGMdmyMp9IuVFLFFw%3D) *** 从`贝塞尔曲线`这点回到`抛物线`这里。要想做抛物线，就得知道这条线是先`远离目标值`，再`逼近目标值`。那么我们可以设置它的时间函数`animation-timing-function`为`cubic-bezier(0.5, -0.5, 1, 1)`。 ![1.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/506e8b1edf3e4abc9caadf0855cf1e63~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55uP54Gv:q75.awebp?rk3s=f64ab15b&x-expires=1757448788&x-signature=wfFw%2B1wWK4OUFI3%2BrB71OS78k%2Fw%3D) ## 二、实战写`按钮`(点击加号飞向购物车，实际上我们这案例是点加号，加号自己根据自己的位置飞向购物车，一般呢，这是不用选规格的商品就这样做，要选规格的，就跳到选这个商品的规格详情界面再去加，啰嗦了，大家去小程序上点个外卖瞅一眼)、`加号`、`购物车`。 ```html

// 购物车 // 点击按钮 // 这个静态固定位置的（动态时需注释掉，需动态添加），下面动态js代码如下👇

// 加号

``` > 以上是静态加号抛物线加入购物车。现在动态做，js去添加号，动态主要是要去算元素的位置，而不是固定的位置。 // 根据加号的父元素的位置，去设置加号的位置 ```js /** * 1、实现一个点击按钮，在按钮位置生成一个加号。 * 2、通过动画效果将加号抛物线姿势飞向购物车，飞完后移除该加号。 * 3、动态设置--left、--top、--x和--y去控制加号的位置和移动路径。 */ const cart = document.querySelector(".cart"); const btn = document.querySelector(".btn"); const PLUS_SIZE = 30; // 加号的宽度 btn.onclick = function () { const div = document.createElement("div"); div.className = "plus"; div.innerHTML = ``; const btnRect = btn.getBoundingClientRect(); const left = btnRect.left + btnRect.width / 2 - PLUS_SIZE / 2, top = btnRect.top + btnRect.height / 2 - PLUS_SIZE / 2; // 横向移动的距离是加号的left加上它自身宽度的一半，减去购物车的left加上它自身宽度的一半。 const catRect = cart.getBoundingClientRect(); const x = (catRect.left + catRect.width / 2) - PlUS_SIZE/2-left; // 纵向移动的距离是加号的top加上它自身高度的一半，减去购物车的top加上它自身高度的一半。 const y = (catRect.top + catRect.height / 2) - PLUS_SIZE/2-top; div.style.setProperty("--left", `${left}px`); div.style.setProperty("--top", `${top}px`); div.style.setProperty("--x", `${x}px`); div.style.setProperty("--y", `${y}px`); div.addEventListener("animationend", () => { div.remove(); }) // 飞完后消失 document.body.appendChild(div); } ``` css ```css .plus { --duration: 0.5s; // 定义自定义属性--duration，设置为0.5s，代表动画持续0.5s animation: moveY var(--duration) cubic-bezier(0.5, -0.5, 1, 1); } .plus .iconfont { animation: moveX var(--duration) linear; } ``` > \--duration 这种是自定义属性，包括上面的`--left --top --x --y`这些都是自定义属性，以便重复使用。 ## 三、拓展 * `Houdini API` 说到动画，那么非常值得去看看一下[`Houdini API`](https://developer.mozilla.org/zh-CN/docs/Web/API/Houdini_APIs)。是`css引擎`暴露出来的一组`底层api`。可以直接和浏览器的`css引擎`去交互。 * `tween.js`，js动画库，创一些平滑的动画效果。不必手动去处理一些复杂的动画细节。 > 脑子内存记不了太多，勤写一些笔记。 ![1.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/63110e12c9e74f85902fbab66e54b2ac~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55uP54Gv:q75.awebp?rk3s=f64ab15b&x-expires=1757448788&x-signature=t1GK5lPlaetO37H336P49oPtnRg%3D) > ☎️ 希望对大家有所帮助，本文有些地方可能考虑不够周到，有些纰漏，就当抛砖引玉，还望您海涵，如有错误，望不吝赐教，欢迎评论区留言互相学习。感谢阅读，祝您开发有乐趣。