js新增到購物車動畫效果實現
阿新 • • 發佈：2019-01-07
方法一： 用js控制購車的的位置實現
原理解析： 通過js動態生成一個過度元素（就是一個可以移動的小球），並控制該元素的位置移動，從點選按鈕dom元素移動到購物車的dom元素，實現新增到購物車的動態效果。
- 效果展示
綠色小球會按照拋物線的軌跡移動到購物車裡
- 核心js程式碼 github程式碼地址
/* * 新增到購物車動畫 指令碼 * */ /*** * 動畫軌跡控制 * @param addBtnDom 增加按鈕的dom元素或者選擇器 * @param shopCarDom 購物車的dom元素或選擇器 */ function controllPath(addBtn, shopCar) { var addBtnDom = null, shopCarDom = null; if(typeof addBtn === "string"){ addBtnDom = document.querySelector(addBtn); } else if(addBtn instanceof HTMLElement){ addBtnDom = addBtn } else { alert("傳入的引數錯誤： 第一個引數應為增加按鈕的dom元素或該元素的選擇器。"); return; } if(typeof shopCar === "string"){ shopCarDom = document.querySelector(shopCar); } else if(shopCar instanceof HTMLElement){ shopCarDom = shopCar; }else { alert("傳入的引數錯誤： 第二個引數應為購物車的dom元素或該元素的選擇器。"); return; } // 獲取兩個dom的位置 var addBtnposition = addBtnDom.getBoundingClientRect(); var shopCarPosition = shopCarDom.getBoundingClientRect(); var addBtnCenterX = (addBtnposition.left + addBtnposition.right) / 2; var addBtnCenterY = (addBtnposition.top + addBtnposition.bottom) / 2; var shopCarCenterX = (shopCarPosition.left + shopCarPosition.right) / 2; var shopCarCenterY = (shopCarPosition.top + shopCarPosition.bottom) / 2; //計算增加按鈕 是在 相對於購物車的 左邊還是右邊（用於控制後面的移動方向） var relativePosition = addBtnCenterX > shopCarCenterX ? -1 : 1; // 獲取連個dom之間的距離 var xDistance = Math.abs(addBtnCenterX - shopCarCenterX); var yDistance = Math.abs(addBtnCenterY - shopCarCenterY); // 繪製小球並設定其位置 var ballDom = drawBall(); ballDom.style.top = addBtnCenterY + "px"; ballDom.style.left = addBtnCenterX + "px"; document.body.appendChild(ballDom); /* * 根據一元二次方程的軌跡求出物件的係數 y = ax^2 + bx + c * var coefficientC = 0; * var coefficientB = 0; * var coefficientA = yDistance / Math.pow(xDistance, 2); */ //小球的橫豎座標 var xAbscissa = 0, yAbscissa = 0; //設定移動路徑 var ballTimer = setInterval(function () { //每次重新座標 xAbscissa += 5 * relativePosition; yAbscissa = (yDistance / Math.pow(xDistance, 2)) * Math.pow(xAbscissa, 2); ballDom.style.top = addBtnCenterY + yAbscissa + "px"; ballDom.style.left = addBtnCenterX + xAbscissa + "px"; //檢查是否到達終點 var surplusDistance = parseInt(ballDom.style.left) - shopCarCenterX; if (Math.abs(surplusDistance) <= 10) { clearInterval(ballTimer); } }, 25); } /* * 繪製小球 * */ function drawBall() { var ballDom = document.createElement("div"); ballDom.style.width = "20px"; ballDom.style.height = "20px"; ballDom.style.border = "1px solid #ccc"; ballDom.style.background = "#73dd51"; ballDom.style.borderRadius = "50%"; ballDom.style.position = "absolute"; return ballDom; }
- 使用說明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <title>新增到購物車</title> <style> html, body { margin: 0; padding: 0; height: 100%; } .box { position: relative; width: 100%; height: 100%; border: 2px solid #cc726f; box-sizing: border-box; } .add-btn { width: 40px; height: 40px; border: 2px solid orange; border-radius: 50%; position: absolute; top: 10px; left: 10px; background: antiquewhite; box-sizing: border-box; } .add-btn:before, .add-btn:after { content: ""; position: absolute; top: 50%; left: 10%; margin-top: -2px; width: 80%; height: 4px; background: white; } .add-btn:after { transform: rotate(90deg); } .shop-car { width: 100px; height: 40px; border: 1px solid #ff574d; position: absolute; top: 300px; left: 100px; text-align: center; line-height: 40px; } </style> </head> <body> <div class="box"> <div class="add-btn"></div> <div class="shop-car">購物車</div> </div> <script src="./addToCar.js"></script> <script> var addBtnDom = document.querySelector(".add-btn"); var shopCarDom = document.querySelector(".shop-car"); addBtnDom.addEventListener("click",function () { //第一種方式 controllPath(addBtnDom, shopCarDom); //第二種方式 //controllPath(".add-btn", ".shop-car"); }) </script> </body> </html>