如何制作html5的动画效果？_随笔

主要思想：\x0d\x0a首先要准备一张有连续帧的图片，然后利用HTML5Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。\x0d\x0a关键技术点：\x0d\x0aJavaScript函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，\x0d\x0a另外一个参数代表间隔时间，单位为毫秒数。代码示例：\x0d\x0asetTimeout(update,1000/30)\x0d\x0aCanvas的API-drawImage()方法，需要指定全部9个参数：\x0d\x0actx.drawImage(myImage,offw,offh,width,height,x2,y2,width,height)\x0d\x0a其中offw,offh是指源图像的起始坐标点，width,height表示源图像的宽与高，x2,y2表\x0d\x0a示源图像在目标Canvas上的起始坐标点。\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0aCanvasMouseEventDemo\x0d\x0a\x0d\x0a\x0d\x0avarctx=null//globalvariable2dcontext\x0d\x0avarstarted=false\x0d\x0avarmText_canvas=null\x0d\x0avarx=0,y=0\x0d\x0avarframe=0/롹*5+2\x0d\x0avarimageReady=false\x0d\x0avarmyImage=null\x0d\x0avarpx=300\x0d\x0avarpy=300\x0d\x0avarx2=300\x0d\x0avary2=0\x0d\x0awindow.onload=function(){\x0d\x0avarcanvas=document.getElementById("animation_canvas")\x0d\x0aconsole.log(canvas.parentNode.clientWidth)\x0d\x0acanvas.width=canvas.parentNode.clientWidth\x0d\x0acanvas.height=canvas.parentNode.clientHeight\x0d\x0aif(!canvas.getContext){\x0d\x0aconsole.log("Canvasnotsupported.PleaseinstallaHTML5compatiblebrowser.")\x0d\x0areturn\x0d\x0a}\x0d\x0a//get2Dcontextofcanvasanddrawrectangel\x0d\x0actx=canvas.getContext("2d")\x0d\x0actx.fillStyle="black"\x0d\x0actx.fillRect(0,0,canvas.width,canvas.height)\x0d\x0amyImage=document.createElement('img')\x0d\x0amyImage.src="../robin.png"\x0d\x0amyImage.onload=loaded()\x0d\x0a}\x0d\x0afunctionloaded(){\x0d\x0aimageReady=true\x0d\x0asetTimeout(update,1000ቺ)\x0d\x0a}\x0d\x0afunctionredraw(){\x0d\x0actx.clearRect(0,0,460,460)\x0d\x0actx.fillStyle="black"\x0d\x0actx.fillRect(0,0,460,460)\x0d\x0a//findtheindexofframesinimage\x0d\x0avarheight=myImage.naturalHeightǛ\x0d\x0avarwidth=myImage.naturalWidthǛ\x0d\x0avarrow=Math.floor(frameǛ)\x0d\x0avarcol=frame-row*5\x0d\x0avaroffw=col*width\x0d\x0avaroffh=row*height\x0d\x0a//firstrobin\x0d\x0apx=px-5\x0d\x0apy=py-5\x0d\x0aif(px

首先是HTML代码，非常简单，列出我们需要渲染的文字：

A

B

C

D

E

F

G

H

I

L

M

N

O

P

Q

R

S

T

U

V

Z

</div> CSS3

.letter{

display: inline-block

font-weight: 900

font-size: 8em

margin: 0.2em

position: relative

color: #00B4F1

transform-style: preserve-3d

perspective: 400

z-index: 1

} 这样我们就让这些字母安安静静的排列起来，并有了自己的背景颜色，等待强大的CSS3来渲染。

接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。

.letter:before, .letter:after{

position:absolute

content: attr(data-letter)

transform-origin: top left

top:0

left:0

}

.letter, .letter:before, .letter:after{

transition: all 0.3s ease-in-out

}

.letter:before{

color: #fff

text-shadow:

-1px 0px 1px rgba(255,255,255,.8),

1px 0px 1px rgba(0,0,0,.8)

z-index: 3

transform:

rotateX(0deg)

rotateY(-15deg)

rotateZ(0deg)

}

.letter:after{

color: rgba(0,0,0,.11)

z-index:2

transform:

scale(1.08,1)

rotateX(0deg)

rotateY(0deg)

rotateZ(0deg)

skew(0deg,1deg)

}

.letter:hover:before{

color: #fafafa

transform:

rotateX(0deg)

rotateY(-40deg)

rotateZ(0deg)

}

.letter:hover:after{

transform:

scale(1.08,1)

rotateX(0deg)

rotateY(40deg)

rotateZ(0deg)

skew(0deg,22deg)

}

主要思想：

首先要准备一张有连续帧的图片，然后利用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>

<title>Canvas Mouse Event Demo</title>

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>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6144717.html

如何制作html5的动画效果？

发表评论

评论列表（0条）