html5 spring demo

最新推荐文章于 2024-09-23 16:44:33 发布

转载最新推荐文章于 2024-09-23 16:44:33 发布 · 78 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangwenfei/p/animation_spring.html

本文介绍了一个简单的HTML5 Canvas鼠标跟随动画实现方法。通过使用JavaScript来控制画布上的球体跟随鼠标的移动，同时考虑了弹簧效应、摩擦力和重力等因素。文章提供了完整的代码示例，包括utils.js和ball.js两个辅助文件。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Follow Mouse</title>
    <script type="text/javascript" src="utils.js"></script>
    <script type="text/javascript" src="ball.js"></script>
    <style type="text/css">
        body{background-color: silver;}
        #canvas{background-color: white;}
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <textarea name="" id="log" cols="30" rows="10"></textarea>
    <script type="text/javascript">
        window.onload=function(){
            var canvas=document.getElementById("canvas"),
                context=canvas.getContext("2d"),
                mouse=utils.captureMouse(canvas),
                ball=new Ball(),
                spring=0.03,
                friction=0.9,
                gravity=2,
                vx=0,
                vy=0;
                (function drawFrame(){
                    window.requestAnimationFrame(drawFrame,canvas);
                    context.clearRect(0,0,canvas.width,canvas.height);

                    var dx=mouse.x-ball.x,
                        dy=mouse.y-ball.y,
                        ax=dx*spring,
                        ay=dy*spring;
                    vx+=ax;
                    vy+=ay;
                    vy+=gravity;
                    vx*=friction;
                    vy*=friction;
                    ball.x+=vx;
                    ball.y+=vy;
                    context.beginPath();
                    context.moveTo(ball.x,ball.y);
                    context.lineTo(mouse.x,mouse.y);
                    context.stroke();
                    ball.draw(context);


                }())
        }
    </script>
</body>
</html>

utils.js 文件 https://gist.github.com/King-fly/6034511/raw/2e28359afdfb45800948f0e6bd31aa958ba7f5cb/html5+utils

ball.js 文件 https://gist.github.com/King-fly/6034525/raw/4664959f6e33196b9b4520136cc67573e07c8282/ball.js

转载于:https://www.cnblogs.com/wangwenfei/p/animation_spring.html