原生js、vue、react 购物车运动小球_一个小球以抛线往下掉 js原生-优快云博客

本文链接：https://blog.youkuaiyun.com/Time_Flies_lei/article/details/116718909

本文介绍如何使用 CSS3 和 JavaScript 实现一个简单的水平抛物线动画效果。通过调整贝塞尔曲线参数和过渡属性，可以创建平滑且吸引人的动画体验。

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

所有版本大同小异有详细备注，一目了然

大体实现主要借助：贝塞尔曲线 https://cubic-bezier.com/#.04,.88,.94,.2

react版

 <div className="ball" >
      <img src={"http://www.ibugthree.com/" + obj.img_src} alt="" />
 </div>


 // 当前运动小球
            let ball = e.currentTarget.parentNode.lastChild;
            // 小球显示
            ball.style.display = "block"
            // 小球落地位置
            let warp = document.querySelector('.favorites-wrap')
            // 落地位置到顶部距离
            let H = warp.offsetTop;
            // 落地位置到左部距离
            let HL = warp.offsetLeft;
            // 小球到左边距离
            let ballL = ball.getBoundingClientRect().left
            // 小球到顶部距离
            let ballT = ball.getBoundingClientRect().top
            // 两者差值，100是根据个人需求添加
            let L = Math.floor(HL - ballL + 100)
            let Y = Math.floor(H - ballT)
            // 进行赋值
            setTimeout(() => {
                ball.style.top = Y + 'px';
                ball.style.left = L + 'px';
                // 动画效果
                ball.style.transition = 'left .4s linear, top .4s cubic-bezier(0.49, -0.29, 0.75, 0.41)';
            }, 20)
            //   运动结束
            ball.addEventListener('transitionend', () => {
                // 隐藏小球
                ball.style.display = "none";
                // 小球初始位置
                ball.style.top = 0 + 'px';
                ball.style.left = 100 + 'px';
            })



//style
 .ball {
            display: none;
            width: 100px;
            height: 100px;
            background: #5EA345;
            border-radius: 50%;
            position: absolute;
            z-index: 997;
            top: 0;
            left: 240px;
            // transition: left 1s linear, top 1s ease-in;

            img {
                width: 100px;
                height: 100px;
                border-radius: 100px;
            }
        }

原生js

<!DOCTYPE html>
<html lang="en" style="width:100%;height:100%;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            position: relative;
        }

        .ball {
            width: 50px;
            height: 50px;
            background: #5EA345;
            border-radius: 50%;
            position: absolute;
            transition: left 1s linear, top 1s ease-in;
        }

        .love {
            position: fixed;
            top: 550px;
            right: 50px;
            color: red;
            font-size: 50px;
        }

        .box {
            position: absolute;
            right: 20px;
        }

        li {
            padding: 40px 0;
            margin: 10px 0;
            background-color: #5EA345;
        }
    </style>
    <title>CSS3 水平抛物线动画</title>
</head>

<body style="width:100%;height:100%;">
    <div class="ball"></div>
    <ul class="box">
        <li>100</li>
        <li>200</li>
        <li>300</li>
        <li>400</li>
        <li>500</li>
        <li>600</li>
        <li>700</li>
        <li>800</li>
        <li>900</li>
        <li>1000</li>
    </ul>
    <div class="love">❤</div>
</body>
<script>
    var ball = document.getElementsByClassName('ball')[0];
    var obox = document.querySelectorAll('.box>li')
    for (var i = 0; i < obox.length; i++) {
        obox[i].onclick = function (e) {
            let H = document.querySelector('.love').offsetTop
            let ballX = e.clientX
            let ballY = e.clientY
            console.log(ballX, (-H +ballY-500))


            ball.style.top = (-H + ballY+500) + 'px';
            ball.style.right = e.clientX + 'px';
            ball.style.transition = 'right 0s, top 0s';
            setTimeout(() => {
                console.log(H)
                ball.style.top = H + 'px';
                ball.style.right = '100px';
                ball.style.transition = 'right .4s linear, top .4s cubic-bezier(0.49, -0.29, 0.75, 0.41)'
            }, 20)
        }
    }

</script>