HTML5动画特效怎么做_随笔

主要思想：

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

文本虚拟化效果可以通过css的text-shadow来实现。

text-shadow语法:

text-shadow ： none | <length>none | [<shadow>, ] * <shadow>或none | <color>[, <color>]*

也就是：

text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...

或者

text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)].

例子：

.demo {background: #666666width: 440pxpadding: 30pxfont: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sanscolor: #ffftext-transform: uppercase}

首先是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)

}

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

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

HTML5动画特效怎么做

发表评论

评论列表（0条）