添加购物车动画插件封装/vue动画组件

作者: Raral | 来源:发表于2021-04-26 18:01 被阅读0次

添加购物车动画插件封装/vue动画组件
Vue之transition
Vue动画之五：动画组件封装
五、Vue动画 ------ 2020-05-07
vue动画组件
Vue动画
过度与动画
react hook封装购物车动画
Wow.js滚动动画
可复用的动画过渡

通过封装相关动画插件，可以更深入了解到相关位置信息的api,和学习到咋样借助数学思想解决实际问题

原理实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>
         * {
             padding: 0;
             margin: 0;
         }
         body {
             background-color: #000;
             position: relative;
         }
        .dot {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #f00;
            position: absolute;
            top:0;
            left: calc(50% - 40px);
        }
        .cart {
            display: inline-block;
            background-color: yellowgreen;
            height: 60px;
            line-height: 60px;
            padding: 0 30px;
            position: fixed;
            right: 0;
            bottom: 0;
        }
        .btn {
            position: fixed;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="dot"></div>
    <div class="cart">购物车</div>
    <button class="btn">加入购物车</button>
</body>>
<script>

let btnNode = document.querySelector(".btn");
btnNode.addEventListener("click", () => {
    move();
})
function move() {
    
    //获取对应的dom
    let dotNode = document.querySelector(".dot");
    let cartNode = document.querySelector(".cart");

    // 获取cart dot 节点位置
    let dotPosition = dotNode.getBoundingClientRect();
    let cartPosition = cartNode.getBoundingClientRect();
    let dotCenterX = (dotPosition.left + dotPosition.right) / 2;
    let dotCenterY = (dotPosition.top + dotPosition.bottom) / 2;
    let cartCenterX = (cartPosition.left + cartPosition.right) / 2;
    let cartCenterY = (cartPosition.top + cartPosition.bottom) / 2;
    //获取初始方向 x轴 和 y轴
    // 判断dot相对于 cart 左边还是右边，（用户控制移动的方向）  
    var relativePosition = dotCenterX > cartCenterX ? -1 : 1;

    //获取 dot 与 cart 之间的距离
    let xDistance = Math.abs(dotCenterX - cartCenterX);
    let yDistance = Math.abs(dotCenterY - cartCenterY);

    //绘制dot并设置其位置
    let ballNode = drawBall();
    ballNode.style.top = dotCenterY + "px";
    ballNode.style.left = dotCenterX + "px";
    document.body.appendChild(ballNode);

    /**
     * 根据一元二次方程的轨迹求出对象的系数 
     * 竖直方向:   y = ax^2 + bx + c; 
     * 假设： b=c=0;
     *  解： a = y / x^2  =>  a = yDistance / Math.pow(xDistance, 2)                                                                                           
     * 
    */
    // 设置dot初始位置
    var x = 0, y = 0;

    let ballTimer = setInterval(() => {
       //每次重新坐标
        x += 15 * relativePosition;//每隔25ms,移动15步长 => F(t) = 5t
        y = (yDistance / Math.pow(xDistance, 2)) * Math.pow(x, 2);// 竖直方向移动距离与水平方向有关系的

        // 重新定位小球的位置
        ballNode.style.top = dotCenterY + y + "px";
        ballNode.style.left = dotCenterX + x + "px";
        //检查是否到达终点
        var surplusDistance = parseInt(ballNode.style.left) - cartCenterX;
        if (Math.abs(surplusDistance) <= 40) {
            clearInterval(ballTimer);
        }

        

    }, 25)

    function drawBall(){
        var ballNode = document.createElement("div");
        ballNode.style.width = "80px";
        ballNode.style.height = "80px";
        ballNode.style.borderRadius = "50%";
        ballNode.style.backgroundColor = "#f00";
        ballNode.style.position = "absolute";
        return ballNode;
    }

}
</script>
</html>