笔记五（垂直运动）

最新推荐文章于 2024-05-31 14:55:23 发布

草木黄尘

最新推荐文章于 2024-05-31 14:55:23 发布

阅读量469

点赞数

分类专栏：前端动画基础学习笔记文章标签：动画-html5

本文链接：https://blog.csdn.net/qq_24849765/article/details/49870871

版权

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

22 篇文章 0 订阅

订阅专栏

将笔记四（平滑运动）里bobbing.html文件代码稍加改变，即可创建一个线性垂直运动。文件名：vertical.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;
            centerY = 200,
            range = 50,
            xspeed = 1,
            yspeed = 0.05;
        ball.x = 0;
        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 += xspeed):(ball.x = 0);
            ball.y = centerY/2 + Math.sin(angle)*range;
            ball.draw(context);
        }());
    };
</script>
</body>
</html>

效果图：
垂直运动效果图

参见《HTML5+Javascript动画基础》。

草木黄尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记五（垂直运动）

将笔记四（平滑运动）里bobbing.html文件代码稍加改变，即可创建一个线性垂直运动。文件名：vertical.html。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>垂直运动</title></head><style type="text/css"> #canvas{background-co
复制链接

扫一扫