今天小編給大家分享一下如何用html制作一個(gè)動(dòng)畫網(wǎng)頁(yè)的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比黑河網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式黑河網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋黑河地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

html5新增的canvas無(wú)疑是一個(gè)非常出彩的設(shè)計(jì)。網(wǎng)頁(yè)由此只需要引入一個(gè)html元素(正是)，即可進(jìn)行圖形繪制。相應(yīng)地，flash動(dòng)畫是網(wǎng)頁(yè)中一直以來(lái)很常見(jiàn)的內(nèi)容，它的特色也是矢量圖形繪制。因此，很容易聯(lián)想到，是不是也可以用canvas來(lái)制作動(dòng)畫。

canvas并不像flash那樣是被設(shè)計(jì)為做動(dòng)畫的。但是，通過(guò)一定的方法，確實(shí)可以使用canvas制作出flash那樣的圖形動(dòng)畫，而且效果同樣很棒。

動(dòng)畫的原理

動(dòng)畫的原理相信很多人也聽(tīng)說(shuō)過(guò)，就是把繪制好的多張靜態(tài)圖，以一定的頻率，按照一定的順序依次切換顯示，即形成動(dòng)態(tài)的畫面。當(dāng)頻率高于一定數(shù)值后，人眼就察覺(jué)不出切換的過(guò)程，這時(shí)也就形成了連貫的動(dòng)畫。同時(shí)，在同一場(chǎng)景(也稱為分鏡)中，相鄰的靜態(tài)圖只會(huì)有微小差異，由此通過(guò)相當(dāng)數(shù)量的靜態(tài)圖的組合創(chuàng)建過(guò)渡(一般稱為動(dòng)畫分格)，使畫面平滑自然。

在動(dòng)畫中，每一張靜態(tài)圖對(duì)應(yīng)的靜態(tài)畫面，稱為幀。靜態(tài)畫面的切換頻率，則稱為幀頻。在flash的時(shí)間軸面板中，可以很容易找到它們。

canvas動(dòng)畫的實(shí)現(xiàn)

圖形繪制

使用canvas繪圖的做法是：先在html中加入元素。

然后，獲取這個(gè)元素對(duì)應(yīng)的context(可以稱為繪圖上下文)。

var drawing=document.getElementById("drawing");

if (drawing.getContext) {

var context=drawing.getContext("2d");

}

這里的變量context表示的繪圖上下文，是canvas圖形繪制的核心，它有一系列的繪圖屬性和繪圖方法。簡(jiǎn)單地說(shuō)，所有的繪圖都是操作這個(gè)context實(shí)現(xiàn)。

動(dòng)畫中的圖形

canvas的context有一個(gè)clearRect()方法，可以清除畫布上的某一矩形區(qū)域內(nèi)的所有圖形。聯(lián)系前文所述的動(dòng)畫的原理，可以知道，如果以某一頻率不斷地先清除，再繪制，而且每一次繪制的內(nèi)容稍有不同，就可以看到變化的圖形，形成動(dòng)畫。

如何讓每一次繪制的內(nèi)容稍有不同呢？對(duì)此，較為合理的做法是，為需要繪制的圖形，創(chuàng)建類，每一個(gè)類對(duì)應(yīng)一種圖形。任意一種圖形，都有自己的一些屬性，而且有一個(gè)屬性指向canvas的繪圖上下文。同時(shí)，圖形類都定義了一個(gè)繪圖方法draw()(這只是我用的命名，可以自定)，這個(gè)繪圖方法draw()包含了一系列代碼，依次做以下兩件事：依照當(dāng)前的屬性值(或者叫狀態(tài))操作繪圖上下文把自己繪制在canvas畫布上，以及更新當(dāng)前屬性值。

比如，下面是可以移動(dòng)的球體(其實(shí)就是圓)的類的定義：

// 類定義，球體

var Ball=function(config, context) {

this.x=config.x; // X坐標(biāo)

this.y=config.y; // Y坐標(biāo)

this.color=config.color; //  例如rgba(0,0,0,1)

this.radius=config.radius; // 半徑

this.speedX=config.speedX; // 水平方向速度

this.speedY=config.speedY; // 垂直方向速度

this.context=context; // 獲取context的引用

};

Ball.prototype.move=function() {

this.x +=this.speedX;

this.y +=this.speedY;

};

Ball.prototype.draw=function() {

// 繪圖

var context=this.context;

context.fillStyle=this.color;

context.beginPath();

context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);

context.fill();

// 移動(dòng)，更新位置

this.move();

};

可以看出，每一次調(diào)用這個(gè)類的draw()方法，都會(huì)把這個(gè)圖形繪制上去。而每一次draw()的調(diào)用，也會(huì)更新實(shí)例的屬性值，從而使下一次繪制的時(shí)候，圖形有所不同(這里的示例是位置的移動(dòng))。

舞臺(tái)

在畫布中以動(dòng)畫形式展現(xiàn)的圖形，應(yīng)該有一個(gè)元素對(duì)它們做管理。參考flash中的動(dòng)畫結(jié)構(gòu)，這個(gè)元素就是舞臺(tái)。因此，建立一個(gè)舞臺(tái)類(Stage)。Stage類的定義是：

var Stage=function(config, context) {

this.stageWidth=config.stageWidth; // 舞臺(tái)寬

this.stageHeight=config.stageHeight; // 舞臺(tái)高

this.playFlag=false; // 播放標(biāo)識(shí)，初始為false

this.childs={}; // 存放舞臺(tái)中的元素

this.context=context; // 保存context的引用

};

Stage.prototype={

constructor: Stage,

// 添加舞臺(tái)元素

addChild: function(name, elem) {

this.childs[name]=elem;

},

// 移除舞臺(tái)元素

removeChild: function(name) {

delete this.childs[name];

},

// 渲染，繪制每一幀的舞臺(tái)中有的所有圖形

render: function() {

this.context.clearRect(0, 0, this.stageWidth, this.stageHeight); // 清除上一幀繪制的圖形

var childs=this.childs;

for (var i in childs) {

childs[i].draw(); // 調(diào)用舞臺(tái)中的所有圖形的draw()方法

}

if (this.playFlag) {

requestAnimationFrame((function(thisReplace) {

return function() {

thisReplace.render(); // 循環(huán)調(diào)用

};

})(this));

}

},

// 播放

play: function() {

if (!this.playFlag) {

this.playFlag=true;

this.render();

}

},

// 停止

stop: function() {

if (this.playFlag) {

this.playFlag=false;

}

}

};

在這段定義中，Stage類的render()方法最為重要。render()調(diào)用時(shí)，首先清除上一幀，然后通過(guò)一個(gè)循環(huán)，調(diào)用了舞臺(tái)中的所有圖形的draw()方法，從而完成當(dāng)前幀的繪圖，并且更新了所有圖形的屬性值，由此確定了下一幀的所有圖形的狀態(tài)。然后通過(guò)一個(gè)對(duì)自身的循環(huán)調(diào)用，實(shí)現(xiàn)連續(xù)的逐幀繪制。這樣，動(dòng)畫就產(chǎn)生了。

連續(xù)逐幀繪制是需要參照一個(gè)頻率的，一般會(huì)想到的就是使用setTimeout()和setInterval()。但是，現(xiàn)代瀏覽器考慮到動(dòng)畫實(shí)現(xiàn)的需要，專門為此提供了一個(gè)API，就是requestAnimationFrame()。這個(gè)方法在不同瀏覽器下的寫法不同，因此應(yīng)該使用一個(gè)跨瀏覽器的動(dòng)畫運(yùn)行控制函數(shù)：(來(lái)源于Paul Irish的requestAnimationFrame for Smart Animating)

if (!window.requestAnimationFrame) {

window.requestAnimationFrame=(function() {

return window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function(callback, element) {

window.setTimeout(callback, 1000 / 60);

};

})();

}

至于為什么應(yīng)該使用requestAnimationFrame()，請(qǐng)看基于腳本的動(dòng)畫的計(jì)時(shí)控制。簡(jiǎn)單的表述理由的話，就是“我們更專業(yè)”(——?——)。

動(dòng)畫過(guò)程

在有了前面的類定義后，實(shí)現(xiàn)動(dòng)畫的方法就很明晰了。首先創(chuàng)建舞臺(tái)和動(dòng)畫圖形的實(shí)例，然后把動(dòng)畫圖形實(shí)例通過(guò)舞臺(tái)的addChild()方法添加進(jìn)去，然后調(diào)用舞臺(tái)的play()方法。這部分對(duì)應(yīng)的代碼示例：

// 假定stageConfig, ballConfig已有適當(dāng)定義，context也已獲得繪圖上下文引用

var stage=new Stage(stageConfig, context),

ball=new Ball(ballConfig.context);

stage.addChild("ball", ball); // 添加到舞臺(tái)(顯示)

stage.play(); // 動(dòng)畫播放

這樣，canvas元素就開(kāi)始了連貫的動(dòng)態(tài)繪制，也就是能看到的動(dòng)畫了。

以上就是“如何用html制作一個(gè)動(dòng)畫網(wǎng)頁(yè)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：如何用html制作一個(gè)動(dòng)畫網(wǎng)頁(yè)
轉(zhuǎn)載注明：http://www.chinadenli.net/article4/iepgie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、營(yíng)銷型網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、ChatGPT、網(wǎng)站改版、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)