每天一个jquery插件-飞行的飞机
飞行的飞机
实现成功了，不过搞得我有点恶心头晕，难受，你们看下去就知道为啥了
实现效果
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飞行的飞机</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-image: url(img/点.png);
background-position-x: 0px;
background-position-y: 0px;
}
#div {
border: 1px solid lightgray;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
#div img {
width: 50px;
height: 50px;
transform: rotate(90deg);
}
</style>
</head>
<body>
<div id="div">
<img src="img/飞机.png" />
</div>
</body>
</html>
<script>
$(function() {
//初始原点位置
var x1 = $(document).width() / 2;
var y1 = $(document).height() / 2;
var x2 = x1 + 10;
var y2 = x2 + 10;
//当浏览器变化的时候改变原点位置
$(window).resize(function() {
var x1 = $(document).width() / 2;
var y1 = $(document).height() / 2;
})
//鼠标移动控制飞机方向
$(document).mousemove(function(e) {
x2 = e.offsetX;
y2 = e.offsetY;
var x1 = $(document).width() / 2;
var y1 = $(document).height() / 2;
var temp = Math.atan2((y2 - y1), (x2 - x1)) / 0.017453292;
var r = temp < 0 ? -temp : 360 - temp;
r = 90 - r;
$("#div img").css("transform", "rotate(" + r + "deg)")
})
//一个周期执行动画的部分
setInterval(function() {
var tempx = (x2 - x1)/10;
var tempy = (y2 - y1)/10;
var postx = parseInt($("body").css("background-position-x").replace("px",""))
var posty = parseInt($("body").css("background-position-y").replace("px",""))
$("body").stop().animate({
"background-position-x":postx-tempx,
"background-position-y":posty-tempy
},100)
console.log(postx, posty)
}, 100)
})
</script>
实现思路
- 按照昨天想的来做，首先控制飞机的方向，像这个我之前在鼠标的聚焦里面话眼睛视线跟随的时候已经实现过的效果就不做太多讲解了，反正大概就是知道俩参数，然后就能知道他们之间的夹角进而转换成飞机dom旋转的角度
- 然后我这里为了让画面看着更有感觉，所以在背景上平铺填满了一个个的点的图片，用来做参考物骗眼睛飞机在飞行的效果，并且结合飞机旋转的角度和动画变化的速度还能做出速度和转向的效果
- 从js部分从上往下的思路如下
- x1,y1为记录中心点坐标，在后面还特地加了个监测浏览器变化动态改变中心坐标参数的方法，这个是全局的
- y1,y2为记录的鼠标的位置，初始化的时候我将它默认为原点的右下角多一点点的距离，这个会在鼠标移动时间中被不断更新
- 然后就是动画实现部分，也是一个周期的计时器，它的目的就是通过计算全局的两个坐标对应轴的距离temp?再获取当前背景画布拖拽的距离post?，两者取得正确的关系之后计算出动画移动的值提交返回给animate控制变化，当然这里面加个stop是防止动画延迟的
- 此外计算中temp?在获取的时候除以10是因为不除的时候我看的头晕_(¦3」∠)_，此外计时器的周期100也是我自己定义的东西可以粗略理解为动画的刷新率。
- 完事，碎觉~