笔记四（正弦波平滑运动）

最新推荐文章于 2023-12-11 16:15:13 发布

原创最新推荐文章于 2023-12-11 16:15:13 发布 · 699 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#平滑运动-html5

前端动画基础学习笔记专栏收录该内容

22 篇文章

订阅专栏

这里创建一个正弦波平滑运动的动画。
utils.js文件不变，见笔记三。
创建一个Ball构造函数。文件名：ball.js。

function Ball(radius , color){
    if (radius === undefined) {
        radius = 40;
    };
    if (color === undefined) {
        color = "#0099CC";
    };
    this.x = 0;
    this.y = 0;
    this.radius = radius;
    this.rotation = 0;
    this.scaleX = 1;
    this.scaleY = 1;
    this.color = color;
    this.lineWidth = 1;
}
Ball.prototype.draw = function(context){
    context.save();
    context.translate(this.x , this.y);
    context.scale(this.scaleX , this.scaleY);
    context.lineWidth = this.lineWidth;
    context.fillStyle = this.color;
    context.beginPath();
    context.arc(0,0,this.radius,0,(Math.PI * 2),true);
    context.closePath();
    context.fill();
    if (this.lineWidth > 0) {
        context.stroke();
    };
    context.restore();
};

创建html文件，文件名：bobbing.html.。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>平滑运动</title>
<style type="text/css">
    #canvas{background-color: #99cc33;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="ball.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d"),
            ball = new Ball(),
            angle = 0;
        ball.x = canvas.width/2;
        ball.y = canvas.height/2;
        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){
                return window.setTimeout(callback,1000/60);
            })
        };
        (function drawFrame(){
            window.requestAnimationFrame(drawFrame,canvas);
            context.clearRect(0,0,canvas.width,canvas.height);
            (ball.x <= canvas.width)?(ball.x += 1):(ball.x = 0);
            ball.y = canvas.height/2 + Math.sin(angle)*50;
            angle +=0.1;
            ball.draw(context);
        }());
    };
</script>
</body>
</html>