十八.2弹性动画小球，悠悠球

最新推荐文章于 2022-07-01 13:00:21 发布

陆康永

最新推荐文章于 2022-07-01 13:00:21 发布

阅读量627

点赞数

分类专栏： canvas CANVAS 文章标签：弹性运动 canvas 小球

本文链接：https://blog.csdn.net/xiaomogg/article/details/79427102

版权

canvas 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CANVAS

16 篇文章 1 订阅

订阅专栏

先上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(0, cnv.height / 2);
            var targetX = cnv.width / 2;
            var spring = 0.02;
            var vx = 0;

            (function frame() {
                window.requestAnimationFrame(frame);
                cxt.clearRect(0, 0, cnv.width, cnv.height);

                var ax = (targetX - ball.x) * spring;
                vx += ax;
                ball.x += vx;

                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(0, cnv.height / 2);
            //定义终点的X轴坐标
            var targetX = cnv.width * (3 / 4);
            //定义缓动系数
            var easing = 0.05;

            (function frame() {
                window.requestAnimationFrame(frame);
                cxt.clearRect(0, 0, cnv.width, cnv.height);

                var vx = (targetX - ball.x) * easing;
                ball.x += vx;

                ball.fill(cxt);
            })();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>

差异（弹性动画修改的是加速度）：

//缓动动画
var vx = (targetX - ball.x) * easing;
ball.x += vx;
//弹性动画
 var ax = (targetX - ball.x) * easing;
vx += ax;//弹性动画修改的是加速度
ball.x += vx;

关键地方已经打通，弹性动画中跟距离成正比的是加速度。物体距离终点越远，加速度越快（想想下橡皮筋拉着一个小球，小球距离手指越远的时候加速度越快）

过程：

1.由于加速度的影响，速度会增大（速度+加速度）

2.物体距离终点越大，加速度越大（目标值减去小球的位置）

3.当物体接近终点的时候，加速度变得很小，但是它还在加速运动，越过终点

4当越过目标距离几乎等于物体初始位置和终点距离的的时候（targetX - ball.x 小位置比目标值大，得到加速度为负值），加速度开始为负值，物体反方向运动

语法：

ax=(targetX-obj.x)*easing;

ay=(targetY-obj.y)*easing;

vx+=ax;

vy+=ay;

vx*=firction;

vy*=firction;

obj.x+=vx;

obj.y+=vy;

firction为摩擦力。文章第一个demo因为没有摩擦力所以一直不会停下来，下面我们看下添加了摩擦力的弹性运动

在线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(0, cnv.height / 2);
            var targetX = cnv.width / 2;
            var spring = 0.02;
            var vx = 0;
            var friction = 0.95;

            (function frame() {
                window.requestAnimationFrame(frame);
                cxt.clearRect(0, 0, cnv.width, cnv.height);

                var ax = (targetX - ball.x) * spring;
                vx += ax;
                vx *= friction;
                ball.x += vx;

                ball.fill(cxt);
            })();

        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>

铛铛......铛铛......................是不是马上画风变了。。。。。。。。。。更真实了