首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。
关键技术点：
JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，
另外一个参数代表间隔时间，单位为毫秒数。代码示例：
setTimeout( update, 1000/30)
Canvas的API-drawImage()方法，需要指定全部9个参数：
ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height)
其中offw, offh是指源图像的起始坐标点，width, height表示源图像的宽与高，x2,y2表
示源图像在目标Canvas上的起始坐标点。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<meta http-equiv="Content-type" content="text/htmlcharset=UTF-8">
<title>Canvas Mouse Event Demo</title>
<link href="default.css" rel="stylesheet" />
<script>
var ctx = null// global variable 2d context
var started = false
var mText_canvas = null
var x = 0, y =0
var frame = 0// 22 5*5 + 2
var imageReady = false
var myImage = null
var px = 300
var py = 300
var x2 = 300
var y2 = 0
window.onload = function() {
var canvas = document.getElementById("animation_canvas")
console.log(canvas.parentNode.clientWidth)
canvas.width = canvas.parentNode.clientWidth
canvas.height = canvas.parentNode.clientHeight
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.")
return
}
// get 2D context of canvas and draw rectangel
ctx = canvas.getContext("2d")
ctx.fillStyle="black"
ctx.fillRect(0, 0, canvas.width, canvas.height)
myImage = document.createElement('img')
myImage.src = "../robin.png"
myImage.onload = loaded()
}
function loaded() {
imageReady = true
setTimeout( update, 1000/30)
}
function redraw() {
ctx.clearRect(0, 0, 460, 460)
ctx.fillStyle="black"
ctx.fillRect(0, 0, 460, 460)
// find the index of frames in image
var height = myImage.naturalHeight/5
var width = myImage.naturalWidth/5
var row = Math.floor(frame / 5)
var col = frame - row * 5
var offw = col * width
var offh = row * height
// first robin
px = px - 5
py = py - 5
if(px <-50) {
px = 300
}
if(py <-50) {
py = 300
}
//var rate = (frame+1) /22
//var rw = Math.floor(rate * width)
//var rh = Math.floor(rate * height)
ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height)
// second robin
x2 = x2 - 5
y2 = y2 + 5
if(x2 <-50) {
x2 = 300
y2 = 0
}
ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height)
}
function update() {
redraw()
frame++
if (frame >= 22) frame = 0
setTimeout( update, 1000/30)
}
</script>
</head>
<body>
<h1>HTML Canvas Animations Demo - By Gloomy Fish</h1>
<pre>Play Animations</pre>
<div id="my_painter">
<canvas id="animation_canvas"></canvas>
</div>
</body>
</html>
HTML5使得开发者能为你的网站创建出惊人的动画效果。这些很棒的动画效果会为你的网站增添更多吸引力，接着会带来更多的生意。这些用HTML5创建的动画效果很出色，看起来很惊人。但为了做出这种动画效果，你需要经历很多比较麻烦的工作，所以你可以使用一些免费或市面上收费的HTML5动画工具。本文将会为大家介绍市面上最好的HTML5动画工具。这个清单使我们极为用心列出来的，以为大家呈现出真正有用且专业的HTML5动画工具。所以接着读下去并找到最符合你需求的那个工具吧，以下每个工具都有它独特的地方。
1. Mixeek
这是一款用来设计和运行Web动画和交互的免费应用工具。它基于JavaScript，CSS3和HTML5，它有着轻量级、已使用的特点。
2. Animatron
它主要用来设计和发布动画/交互的内容，包括在PC端和手机端两个地方。
3. Tumult Hype
设计师们可以用它创造出漂亮的Web内容，而且几乎不用任何的Coding，可以运行在桌面、手机和Pad上。
4. Mugeda
Mugeda是一个基于云平台的专业可视化环境，用于直接在浏览器中制作富含动画和交互的HTML5内容。设计师无需任何编码，就可以制作富有感染力的移动动画内容。
5. HTML5 Maker
这是一款制作动画、标语和有感染力图像的最佳帮手，而且它是免费的。
6. Hippo studios
它提供了一个可以创造超强动画、复杂游戏、多媒体、App等的平台。
7. Sencha
Sencha Space 是安全应用管理平台，帮助你更好的部署你的应用给大部分用户，支持大多数设备，使用最新的 hassle。
8. Blysk
这又是一款实用工具，它可以帮助Web设计师创造页面上的动画，有更多的交互效果。
9. Radiapp
它可以为你的网站创造视频、动画和图像。
10. Createjs
CreateJS是一个JavaScript库，可以说是一款为HTML5游戏开发的引擎，帮助用户有更好的体验。
11.Motion Composer
Motion Composer是一套用于对比、整合和展示动作捕捉数据的软件包。可以制作多特征的动画，有着简单易用的接口。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）