动画里正弦值除了运用于改变对象的坐标,还可以应用于对象的其他属性。
这里对笔记四稍加修改创建一个脉冲运动。文件名:pulse.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;
centerScale = 1,
range = 0.6,
speed = 0.08;
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.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;
angle += speed;
ball.draw(context);
}());
};
</script>
</body>
</html>
效果图:
参见《HTML5+Javascript动画基础》。