通过封装相关动画插件，可以更深入了解到相关位置信息的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>
水平方向和竖直方向移动规律分析
分析图.png
通过原生js封装
敬请期待
通过vue组件封装，在vue项目可以灵活使用动画效果
敬请期待
