HTML5自學(xué)VS培訓(xùn)，到底哪個(gè)好？

HTML5移動開發(fā)技術(shù)可以說是Web開發(fā)世界一次重大變革，無論你喜不喜歡，它都代表了未來發(fā)展趨勢。如今HTML5廣為流傳，各類媒體炒的如火如荼，很多文章都在不遺余力的介紹HTML5技術(shù)，想學(xué)HTML5開發(fā)技術(shù)的人也是越來越多。今天千鋒武漢HTML5培訓(xùn)小編要跟大家分享的文章是關(guān)于零基礎(chǔ)怎么學(xué)習(xí)HTML5？難不難學(xué)？

互聯(lián)網(wǎng)發(fā)展到今天，越來越多的技術(shù)崗位人才出現(xiàn)了稀缺的狀態(tài)，就拿當(dāng)前的HTML5來講，基本成為了每家互聯(lián)網(wǎng)公司不可缺少的人才。如果抓住這個(gè)機(jī)會，把HTML5搞好，那么前途不可限量，而且這門行業(yè)是越老越吃香，經(jīng)驗(yàn)越多待遇越高。

身邊有些朋友在自學(xué)HTML5的過程中，發(fā)現(xiàn)的一個(gè)很嚴(yán)重的問題，那便是自學(xué)HTML5并不是想象的那么簡單，你必須要滿足以下條件：

1、一定要有高手指導(dǎo)。遇到難題如果沒有高手指導(dǎo)，單純的靠自己琢磨特別耗費(fèi)時(shí)間，進(jìn)度緩慢不說，而且最后不一定能弄懂，時(shí)間一久就很容易放棄，這也是很多自學(xué)HTML5的同學(xué)半途而廢的首要原因。

2、一定要有足夠的設(shè)計(jì)靈感和開發(fā)思想，多看代碼多讀代碼。要想學(xué)好HTML5，HTML5設(shè)計(jì)思想就必須放在第一位，因?yàn)榍岸俗⒅氐木褪强蛻趔w驗(yàn)度。

3、除了培養(yǎng)HTML5項(xiàng)目的鍛煉，你還有輔助提升辦法。比如多多強(qiáng)化你的英語閱讀水平，HTML5編程雖然要用到的英語詞匯不多，也就500個(gè)單詞左右，但是你的英語閱讀水平提高了，那么在自學(xué)HTML5的過程中，你的進(jìn)度一定會更加的好，并且對日后的發(fā)展也很有幫助。

如果沒有基礎(chǔ)，在很多人看來自學(xué)HTML5是不可思議的事情。如果你覺得自學(xué)HTML5這條路太難走，又不想放棄HTML5的學(xué)習(xí)，那么對于想快速學(xué)好HTML5的你來說，最好的辦法就是參加系統(tǒng)的HTML5培訓(xùn)班。

參加培訓(xùn)不但可以快速學(xué)習(xí)HTML5，同時(shí)還能帶來意想不到的收獲：

1、當(dāng)你遇到難題，很快的就有人為你解答

2、可以讓你完全的掌握HTML5行業(yè)的技術(shù)與項(xiàng)目

3、可以助你找到一個(gè)好的工作

4、可以給你帶來工作經(jīng)驗(yàn)

5、有一個(gè)好的教學(xué)環(huán)境

6、可以認(rèn)識更多的人脈關(guān)系

以上就是千鋒武漢HTML5培訓(xùn)小編今天跟大家分享的零基礎(chǔ)怎么學(xué)習(xí)HTML5？希望本篇文章能夠?qū)φ郎?zhǔn)備自學(xué)的小伙伴們提高幫助，如果覺得自學(xué)有困難參加HTML5培訓(xùn)也是不錯(cuò)的選擇哦。

VG 動畫有很多種實(shí)現(xiàn)方法，也有很大SVG動畫庫，現(xiàn)在我們就來介紹 svg動畫實(shí)現(xiàn)方法都有哪些？

一、SVG 的 animation

SVG animation 有五大元素，他們控制著各種不同類型的動畫，分別為：

set
animate
animateColor
animateTransform
animateMotion

1.1、set

set 為動畫元素設(shè)置延遲，此元素是SVG中最簡單的動畫元素，但是他并沒有動畫效果。

使用語法：

<set attributeName="" attributeType="" to="" begin="" />

attributeName ：是要改變的元素屬性名稱。
attributeType ：是表明attributeName屬性值的列表，支持三個(gè)固定參數(shù) CSS/XML/auto，如x,y以及transform屬于XML，opacity屬于CSS。auto是瀏覽器自動判別的意思，也是默認(rèn)值，如果你不知道該選哪個(gè)就填auto，瀏覽器自己判別。
to ：動畫結(jié)束的屬性值。
begin ：動畫延遲時(shí)間。

eg：繪制一個(gè)半徑為200的圓，4秒之后，半徑變?yōu)?0。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <set attributeName="r" attributeType="XML" to="50" begin="4s" />
 </circle>
</svg>

1.2、animate

是基礎(chǔ)的動畫元素，實(shí)現(xiàn)單屬性的過渡效果。

使用語法：

<animate 
 attributeName="r" 
 from="200" to="50" 
 begin="4s" dur="2s" 
 repeatCount="2"
></animate>

from ：過渡效果的屬性開始值。
to：過渡效果的屬性結(jié)束值。
begin：動畫開始時(shí)間。
dur：動畫過渡時(shí)間，控制動畫速度。
repeatCount：動畫重復(fù)次數(shù)。

eg：繪制一個(gè)半徑為200的圓，4秒之后半徑在2秒內(nèi)從200逐漸變?yōu)?0。

<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
 <animate attributeName="r" from="200" to="50" 
  begin="4s" dur="2s" repeatCount="2"></animate>
</circle>

1.3、animateColor

控制顏色動畫，animate也可以實(shí)現(xiàn)這個(gè)效果，所以該屬性目前已被廢棄。

1.4、animateTransform

實(shí)現(xiàn)transform變換動畫效果，與css3的transform變換類似。實(shí)現(xiàn)平移、旋轉(zhuǎn)、縮放等效果。

使用語法：

<animateTransform attributeName="transform"  type="scale" 
 from="1.5" to="0" 
 begin="2s"  dur="3s" 
 repeatCount="indefinite"></animateTransform>

repeatCount：重復(fù)次數(shù)，設(shè)置為 indefinite 表示無限循環(huán)，一直執(zhí)行。
type：添加 transform 變換類型。
eg：繪制一個(gè)半徑為200的圓，4秒之后開始縮放，在2秒內(nèi)從1.5縮小到0倍。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <animateTransform attributeName="transform" begin="4s"  
   dur="2s" type="scale" from="1.5" to="0" 
   repeatCount="indefinite"></animateTransform>
 </circle>
</svg>

1.5、animateMotion

可以定義動畫路徑，讓SVG各個(gè)圖形，沿著指定路徑運(yùn)動。

使用語法：

<animateMotion 
 path="M 0 0 L 320 320" 
begin="4s" dur="2s"></animateMotion>

path：定義路徑，使用語法與《HTML5(八)——SVG 之 path 詳解》path的d屬性一致。
begin：延遲時(shí)間。
dur：動畫執(zhí)行時(shí)間。

eg：繪制一個(gè)半徑為10的圓，延遲4秒從左上角運(yùn)動的右下角。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">
  <animateMotion 
   path="M 0 0 L 320 320" 
   begin="4s" dur="2s"
   ></animateMotion>
 </circle>
</svg>

實(shí)際制作動畫的時(shí)候，動畫太單一不酷，需要同時(shí)改變多個(gè)屬性時(shí)，上邊的四種元素可以互相組合，同類型的動畫也能組合。以上這些元素雖然能夠?qū)崿F(xiàn)動畫，但是無法動態(tài)地添加事件，所以接下來我們就看看 js 如何制作動畫。

二、JavaScript 控制

上篇文章我們介紹js可以操作path，同樣也可以操作SVG的內(nèi)置形狀元素，還可以給任意元素添加事件。

給SVG元素添加事件方法與普通元素一樣，可以只用on+事件名或者addEventListener添加。

eg：使用SVG繪制地一條線，點(diǎn)擊線條地時(shí)候改變 x1 ,實(shí)現(xiàn)旋轉(zhuǎn)效果。

<svg width="800" height="800" id="svg">
    <line id="line" x1="100" y1="100" 
    x2="400" y2="300" 
    stroke="black" stroke-width="5"></line>  
  </svg>
<script>
 window.onload = function(){
  var line = document.getElementById("line")
  line.onclick = function(){
   let start = parseInt(line.getAttribute("x1")),
       end=400,dis = start-end
   requestAnimationFrame(next)
   let count = 0;
   function next(){
    count++
    let a = count/200,cur = Math.abs(start+ dis*a)
    line.setAttribute('x1',cur)
    if(count<200)requestAnimationFrame(next)
   }
  }
 }
</script>

js制作的SVG動畫，主要利用 requestAnimationFrame 來實(shí)現(xiàn)一幀一幀的改變。

我們上述制作的 SVG 圖形、動畫等，運(yùn)行在低版本IE中，發(fā)現(xiàn)SVG只有IE9以上才支持，低版本的并不能支持，為了兼容低版本瀏覽器，可以使用 VML ,VML需要添加額外東西，每個(gè)元素需要添加 v:元素，樣式中還需要添加 behavier ，經(jīng)常用于繪制地圖。由于使用太麻煩，所以我們借助 Raphael.js 庫。

三、Rapha?l.js (拉斐爾)

Raphael.js是通過SVG/VML+js實(shí)現(xiàn)跨瀏覽器的矢量圖形，在IE瀏覽器中使用VML，非IE瀏覽器使用SVG，類似于jquery，本質(zhì)還是一個(gè)javascript庫，使用簡單，容易上手。

使用之前需要先引入Raphael.js庫文件。cdn的地址為：https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js

3.1、創(chuàng)建畫布

Rapheal有兩種創(chuàng)建畫布的方式：

第一種：瀏覽器窗口上創(chuàng)建畫布

創(chuàng)建語法：

var paper = Raphael(x,y,width,height)

x,y是畫布左上角的坐標(biāo)，此時(shí)畫布的位置是絕對定位，有可能會與其他html元素重疊。width、height是畫布的寬高。

第二種：在一個(gè)元素中創(chuàng)建畫布

創(chuàng)建語法：

var paper = Raphael(element, width, height);

element是元素節(jié)點(diǎn)本身或ID width、height是畫布的寬度和高度。

3.2、繪制圖形

畫布創(chuàng)建好之后，該對象自帶SVG內(nèi)置圖形有矩形、圓形、橢圓形。他們的方法分別為：

paper.circle(cx, cy, r); // (cx , cy)圓心坐標(biāo) r 半徑
paper.rect(x, y, width, height, r); // (x,y)左上角坐標(biāo) width寬度 height高度 r圓角半徑(可選)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圓心坐標(biāo) rx水平半徑 ry垂直半徑

eg：在div中繪制一個(gè)圓形，一個(gè)橢圓、一個(gè)矩形。

<div id="box"></div>
<script>
 var paper = Raphael("box",300,300)
 paper.circle(150,150,150)
 paper.rect(0,0,300,300)
 paper.ellipse(150,150,100,150)
</script>

運(yùn)行結(jié)果如下：

除了簡單圖形之外，還可以繪制復(fù)雜圖形，如三角形、心型，這時(shí)就使用path方法。

使用語法：paper.path(pathString)

pathString是由一個(gè)或多個(gè)命令組成，每個(gè)命令以字母開始，多個(gè)參數(shù)是由逗號分隔。

eg：繪制一個(gè)三角形。

let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")

還可以繪制文字，如果需要換行，使用 \n 。

文字語法：paper.text(x,y,text)

(x,y)是文字坐標(biāo)，text是要繪制的文字。

3.3、設(shè)置屬性

圖形繪制之后，我們通常會添加stroke、fill、stroke-width等讓圖形更美觀，Raphael使用attr給圖形設(shè)置屬性。

使用語法：circle.attr({"屬性名","屬性值","屬性名","屬性值",...})

如果只有屬性名沒有屬性值，則是獲取屬性，如果有屬性值，則是設(shè)置屬性。

注意：如果只設(shè)置一個(gè)屬性時(shí)，可以省略‘{}’。如：rect.attr('fill','pink')

eg：給上邊的矩形添加邊框和背景色。

<div id="box"></div>
<script>
 var paper = Raphael("box",300,300)
 let rect = paper.rect(100,100,150,200)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
</script>

3.4、添加事件

RaphaelJS一般具有以下事件：
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及對應(yīng)的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。

使用語法：

obj.click(function(){
 //需要操作的內(nèi)容
})

3.5、添加動畫

animate為指定圖形添加動畫并執(zhí)行。

使用語法：

obj.animate({
 "屬性名1":屬性值1,
 "屬性名2":屬性值2,
  ...
},time,type)

屬性名和屬性值就根據(jù)你想要的動畫類型加就ok。

time：動畫所需時(shí)間。

type：指動畫緩動類型。常用值有：

linear - 線性漸變
ease-in | easeIn | < - 由慢到快
ease-out | easeOut | > - 由快到慢
ease-in-out | easeInOut | <> - 由慢到快再到慢
back-in | backIn - 開始時(shí)回彈
back-out | backOut - 結(jié)束時(shí)回彈
elastic - 橡皮筋
bounce - 彈跳

eg：點(diǎn)擊矩形，矩形緩緩變大。

<div id="box"></div>
<script>
 var paper = Raphael("box",800,500)
 let rect = paper.rect(100,100,150,100)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
 rect.attr('fill','pink')
 rect.click(function(){
  rect.animate({
   "width":300,
   "height":300
  },1000,"bounce")
 })
</script>

復(fù)制上邊的代碼，分別在各個(gè)瀏覽器和低版本IE瀏覽器運(yùn)行，發(fā)現(xiàn)都可以正常運(yùn)行。SVG的動畫庫挺多了，我們介紹了拉斐爾，有興趣的小伙伴可以自行找找其他庫。

始之前大家最好掌握前端最基本的一些語法如：html、css、javascript等課程知識點(diǎn)。

好吧！！！因?yàn)殚_發(fā)前端的東西無須安裝任何開發(fā)工具，就算啥也不懂也沒關(guān)系，那么趕緊瓜子花生板凳準(zhǔn)備好快跟著老師來體驗(yàn)一下編程的魅力吧！:)

真實(shí)效果圖如下：

程序思維

開發(fā)的大概思路是首先在Body中定義一個(gè)div作為容器，然后使用樣式定義界面游戲場景，角色（貪吃蛇）以及食物，然后編寫javascript腳本對游戲地圖，角色以及食物進(jìn)行初始化的渲染，再編寫move函數(shù)完成蛇身移動，蛇身在移動的過程當(dāng)中判斷蛇頭和蛇身是否重疊，促使蛇身增長，假如蛇頭在移動的過程當(dāng)中碰到身體的其它部位，或者超出地圖編寫視作游戲結(jié)束Game Over,當(dāng)蛇身長度達(dá)到某個(gè)長度值我們可以設(shè)置通關(guān)條件可以增加移動速度。

廢話不多說直接按步驟擼代碼！！！

第一步：編寫游戲地圖/貪吃蛇/食物樣式

第二步：定義初始化數(shù)據(jù)（并定義功能函數(shù)）

第三步：創(chuàng)建地圖(函數(shù))

第四步：創(chuàng)建/擦除蛇身(函數(shù))

第五步：蛇身移動(函數(shù))

第五步中調(diào)用的函數(shù)：吃到食物（函數(shù)）

由于是否吃到食物和控制方向函數(shù)都是蛇身移動過程當(dāng)中需要反復(fù)調(diào)用，所以最后單獨(dú)寫成了獨(dú)立函數(shù)在蛇身移動函數(shù)中調(diào)用，好了代碼到此結(jié)束！最后大家可以來試試?yán)玻?/p>

如果有小伙伴在編寫代碼過程當(dāng)中碰到問題歡迎大家添加關(guān)注私信我來咨詢，或找我獲取錄制的經(jīng)典小游戲之貪吃蛇游戲錄制的視頻和代碼。

或點(diǎn)擊下面的“了解更多”,進(jìn)入在線視頻鏈接進(jìn)行學(xué)習(xí)。好了感謝大家的觀看再見！

在線咨詢

上一篇：c井POST和GET方式通過服務(wù)器地址提交數(shù)據(jù)
下一篇： JavaScript選擇排序

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5自學(xué)VS培訓(xùn)，到底哪個(gè)好？

一、SVG 的 animation

二、JavaScript 控制

三、Rapha?l.js (拉斐爾)

您的項(xiàng)目需求