煮酒论英雄，小球趣说运动
1.缓动动画
2.弹性运动鼠标跟随鼠标在线demo
如果我们的鼠标做圆周运动，我们惊讶的发现不知不觉中我们实行了一个橡皮筋绑着小球甩圈圈的效果。
童年味道满满的(✪ω✪)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="js/tools.js"></script>
<script src="js/ball.js"></script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var ball = new Ball(cnv.width / 2, cnv.height / 2);
var mouse = tools.getMouse(cnv);
var targetX = cnv.width / 2;
var spring = 0.02;
var vx = 0;
var vy = 0;
var f = 0.95;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
var ax = (mouse.x - ball.x) * spring;
var ay = (mouse.y - ball.y) * spring;
vx += ax;
vy += ay;
vx *= f;
vy *= f;
ball.x += vx;
ball.y += vy;
ball.fill(cxt);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>
不过那个橡皮筋没有画出来，我们现在马上把它实行出来在线demo，我们只需要绘制一个线条就可以了。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="js/tools.js"></script>
<script src="js/ball.js"></script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var ball = new Ball(cnv.width / 2, cnv.height / 2);
var mouse = tools.getMouse(cnv);
var targetX = cnv.width / 2;
var spring = 0.02;
var vx = 0;
var vy = 0;
var friction = 0.95;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
//加入弹性动画
var ax = (mouse.x - ball.x) * spring;
var ay = (mouse.y - ball.y) * spring;
vx += ax;
vy += ay;
vx *= friction;
vy *= friction;
ball.x += vx;
ball.y += vy;
ball.fill(cxt);
//将鼠标以及小球中心连接成一条直线
cxt.beginPath();
cxt.moveTo(ball.x, ball.y);
cxt.lineTo(mouse.x, mouse.y);
cxt.stroke();
cxt.closePath();
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="270" height="180" style="border:1px solid silver;"></canvas>
</body>
</html>
看起来有点像了，不过总感觉差了点什么。。。。。你知道差了什么么？
我们是生活在地球上的！！！！地心引力！！！！！重力
补上，补上，马上，，，，，，，，，，，，在线demo，
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script src="js/tools.js"></script>
<script src="js/ball.js"></script>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
window.onload = function () {
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
var ball = new Ball(cnv.width / 2, cnv.height / 2);
var mouse = tools.getMouse(cnv);
var targetX = cnv.width / 2;
var spring = 0.02;
var vx = 0;
var vy = 0;
var friction = 0.95;
//定义重力
var gravity = 1;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
//加入弹性动画
var ax = (mouse.x - ball.x) * spring;
var ay = (mouse.y - ball.y) * spring;
vx += ax;
vy += ay;
//加入重力影响
vy += gravity;
vx *= friction;
vy *= friction;
ball.x += vx;
ball.y += vy;
ball.fill(cxt);
//将鼠标以及小球中心连接成一条直线
cxt.beginPath();
cxt.moveTo(ball.x, ball.y);
cxt.lineTo(mouse.x, mouse.y);
cxt.stroke();
cxt.closePath();
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="270" height="180" style="border:1px solid silver;"></canvas>
</body>
</html>
扫描二维码关注公众号，回复：
2139472 查看本文章
完美！！！！！！！！！！！！！！！让我们一起去玩球去吧！！！！！！！！！！！！O(∩_∩)O哈哈~，
本篇完结