您的位置：首页 > Web前端 > HTML5

劳资的第一个html5动画 - 虽然简单但很爽

2010-07-15 22:02 316 查看

--
Player.js

if (!(window.Html5Animation)) {
window.Html5Animation = {};
}
Html5Animation.Player = function (animation) {
this.animation = animation;
this.framePerSec = animation.framePerSec;
this.intervalTime = 1000/this.framePerSec; //millisecond
this.currentFrameCount = 0;
this.playing = false;
}
Html5Animation.Player.prototype = {
play: function () {
if (this.animation && !(this.playing)) {
this.playing = true;
this.doPlay();
}
},
//private
doPlay: function () {
var self = this;
this.timeoutCode = setTimeout(function () {
self.clearScreen();
self.animation.draw(self.currentFrameCount);
self.currentFrameCount++;
self.doPlay();
}, this.intervalTime);
},
pause: function () {
if (this.currentFrameCount > 0 && this.playing) {
this.playing = false;
clearTimeout(this.timeoutCode);
}
},
stop: function () {
this.playing = false;
clearTimeout(this.timeoutCode);
this.currentFrameCount = 0;
this.clearScreen();
},
//private
clearScreen: function () {
this.animation.clear();
}
}

-- CircleAnimation.js

if (!(window.Html5Animation)) {
window.Html5Animation = {};
}
(function () {

Html5Animation.CircleAnimation = function (canvas) {
this.canvas = canvas;
this.context = canvas.getContext("2d");
}
var TRAJECTORY = Html5Animation.CircleAnimation.TRAJECTORY = Html5Animation.CircleTrajectory;

Html5Animation.CircleAnimation.prototype = {
framePerSec: 12,
draw: function (frameCount) {
var radius = this.getRadius(frameCount);
var centerCoordinate = this.getCenterCoordinate(frameCount);
var centerX = centerCoordinate.x;
var centerY= centerCoordinate.y;
var strokeStyle = this.getStrokeStyle(frameCount);

this.context.beginPath();
this.context.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
this.context.closePath();
this.context.strokeStyle = strokeStyle;
this.context.stroke();
},
getRadius: function (frameCount) {
return TRAJECTORY.getRadius(frameCount);
},
/**
* Return an object {x:[number], y:[number]}
*/
getCenterCoordinate: function (frameCount) {
return TRAJECTORY.getCenterCoordinate(frameCount);
},
getStrokeStyle: function (frameCount) {
return "#000";
},
clear: function () {
var w = this.canvas.width;
var h = this.canvas.height ;
this.context.clearRect(0, 0, w, h);
}
}
})();

-- CircleTrajectory.js

if (!(window.Html5Animation)) {
window.Html5Animation = {};
}
Html5Animation.CircleTrajectory = {
getRadius: function (time) {
var x = time%(2*Math.PI);
return Math.sin(x)+20;
},
/**
* Return an object {x:[number], y:[number]}
*/
getCenterCoordinate: function (time) {
var x = time;
var y = time*1.5;
return {
x: x,
y: y
};
}
}

测试页面

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>My Page</title>
<mce:script type="text/javascript" src="CircleTrajectory.js" mce_src="CircleTrajectory.js"></mce:script>
<mce:script type="text/javascript" src="CircleAnimation.js" mce_src="CircleAnimation.js"></mce:script>
<mce:script type="text/javascript" src="Player.js" mce_src="Player.js"></mce:script>
<mce:script type="text/javascript"><!--
var player;
function play() {
if (!player) {
var canvas = document.getElementById("myCanvas");
var ca = new Html5Animation.CircleAnimation(canvas);
player = new Html5Animation.Player(ca);
}
player.play();
}

// --></mce:script>
</head>
<body>
<canvas id="myCanvas" width="300" height="225"></canvas>
<input type="button" onclick="play()" value="Play"/>
<input type="button" onclick="player.pause()" value="Pause"/>
<input type="button" onclick="player.stop()" value="Stop"/>
</body>
</html>

刚刚写好，非常简单的动画，以后会慢慢改进的。第一次手工写出动画，小兴奋
HOHO
~~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航