js实现购物车的抛物线

最新推荐文章于 2023-01-09 09:41:20 发布

babulongbo

最新推荐文章于 2023-01-09 09:41:20 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：程序员笔记 web开发笔记文章标签： javascript动画抛物线购物车

本文链接：https://blog.youkuaiyun.com/babulongbo/article/details/81948025

本文探讨了如何使用JavaScript实现购物车小球的抛物线动画效果。通过抛物线方程计算水平和垂直方向的运动，同时调整小球的缩放变化。利用定时器进行运动模拟，确保小球精确地到达终点。文章还提醒读者要注意运动过程中单位和速度的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们经常在电商网站上买东西，当我们将心仪的商品加入购物车时，可能碰到下面的画面。
这里写图片描述
注意小球的运动，请自主忽略画技；
小球的运动轨迹呈现抛物线，且小球的体积由大变小在由小变大；对于一个编程人员，不探究其原理都可能睡不着，所以就研究一下其原理；
首先小球的运动轨迹是一个抛物线，则我们可以使用抛物线方程来计算水平方向和垂直方向的关系；
这里写图片描述
求抛物线的方程首先的需要至少最少三个坐标点，当然三个坐标点你肯定知道了或者你可以设定，开始与结束的坐标点是一定的，第三个坐标点是小球运动的最高点；
再者小球的体积变化和小球水平运动也可以使用方程来表示：
这里写图片描述
y轴表示小球的缩放变化，小球的变化是通过transform: scale(xxx)来表示，如scale变化从1 –> 0.1 –> 1;
注意：
小球在屏幕运动的最小单位是1px，所以你计算的时候需要把运动结果的取整；

<main class="main flex-center">
     <section class="rectangle">
         <section class="wrapper max-size">
             <span class="ball"></span>
         </section>
     </section>
 </main>

html, body, .main {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}
.main {
    position: relative;
    .rectangle {
        position: absolute;
        width: 50%;
        height: 400px;
        .wrapper {
            position: relative;
            .ball {
                position: absolute;
                left: 11r