笔记十九（基本动画——速度实例）

来源：互联网发布：windows10不兼容软件编辑：程序博客网时间：2024/06/04 19:19

本节笔记中引用的js文件具体参见前几节笔记。
速度实例中主要理解速度向量概念。
自此节笔记开始，代码段：

if (!window.requestAnimationFrame) {            window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){                return window.setTimeout(callback,1000/60);            })        };

写入utils.js文件里。

速度实例1：文件名：velocity1.html。

<!DOCTYPE html><html><head>    <meta charset = "utf-8">    <title>速度实例1</title><style>#canvas{background-color: #99cc33;}</style></head><body><canvas id="canvas" width="400" height="400"></canvas><script type="text/javascript" src="ball.js"></script><script type="text/javascript" src="utils.js"></script><script type="text/javascript">    window.onload = function(){        var canvas = document.getElementById('canvas'),            context = canvas.getContext("2d"),            ball = new Ball(),            angle = 45,            speed = 1;        ball.x = 50;        ball.y = 100;        (function drawFrame(){            window.requestAnimationFrame(drawFrame,canvas);            context.clearRect(0,0,canvas.width,canvas.height);            var radius = angle*Math.PI/180,                vx = Math.cos(radius)*speed,                vy = Math.sin(radius)*speed;            ball.x += vx;             ball.y += vy;            ball.draw(context);        }());    }</script></body></html>

效果图：
实例1

文件名：velocity2.html。

<!DOCTYPE html><html><head>    <meta charset = "utf-8">    <title>速度实例2</title><style>#canvas{background-color: #99cc33;}</style></head><body><canvas id="canvas" width="400" height="400"></canvas><script type="text/javascript" src="arrow.js"></script><script type="text/javascript" src="utils.js"></script><script type="text/javascript">    window.onload = function(){        var canvas = document.getElementById('canvas'),            context = canvas.getContext("2d"),            mouse = utils.captureMouse(canvas),            arrow = new Arrow(),            speed = 3;        (function drawFrame(){            window.requestAnimationFrame(drawFrame,canvas);            context.clearRect(0,0,canvas.width,canvas.height);            var dx = mouse.x - arrow.x,                dy = mouse.y - arrow.y,                angle = Math.atan2(dy,dx),                vx = Math.cos(angle)*speed,                vy = Math.sin(angle)*speed;            arrow.rotation = angle;            arrow.x += vx;            arrow.y += vy;            arrow.draw(context);         }());    }</script></body></html>

效果图：
实例2

文件名：velocity3.html。

<!DOCTYPE html><html><head>    <meta charset = "utf-8">    <title>速度实例3</title><style>#canvas{background-color: #99cc33;}</style></head><body><canvas id="canvas" width="400" height="400"></canvas><script type="text/javascript" src="arrow.js"></script><script type="text/javascript" src="utils.js"></script><script type="text/javascript">    window.onload = function(){        var canvas = document.getElementById('canvas'),            context = canvas.getContext("2d"),            arrow = new Arrow(),            vr = 3;        arrow.x = canvas.width/2;        arrow.y = canvas.height/2;        (function drawFrame(){            window.requestAnimationFrame(drawFrame,canvas);            context.clearRect(0,0,canvas.width,canvas.height);            arrow.rotation += vr*Math.PI/180;              arrow.draw(context);         }());    }</script></body></html>

效果图：
实例3

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

0 0