整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
VG 動畫有很多種實現方法，也有很大SVG動畫庫，現在我們就來介紹 svg動畫實現方法都有哪些？
SVG animation 有五大元素，他們控制著各種不同類型的動畫，分別為：
1.1、set
set 為動畫元素設置延遲，此元素是SVG中最簡單的動畫元素，但是他并沒有動畫效果。
使用語法：
<set attributeName="" attributeType="" to="" begin="" />eg：繪制一個半徑為200的圓，4秒之后，半徑變為50。
<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
是基礎的動畫元素，實現單屬性的過渡效果。
使用語法：
<animate
attributeName="r"
from="200" to="50"
begin="4s" dur="2s"
repeatCount="2"
></animate>eg：繪制一個半徑為200的圓，4秒之后半徑在2秒內從200逐漸變為50。
<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也可以實現這個效果，所以該屬性目前已被廢棄。
1.4、animateTransform
實現transform變換動畫效果，與css3的transform變換類似。實現平移、旋轉、縮放等效果。
使用語法：
<animateTransform attributeName="transform" type="scale"
from="1.5" to="0"
begin="2s" dur="3s"
repeatCount="indefinite"></animateTransform><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各個圖形，沿著指定路徑運動。
使用語法：
<animateMotion
path="M 0 0 L 320 320"
begin="4s" dur="2s"></animateMotion>eg：繪制一個半徑為10的圓，延遲4秒從左上角運動的右下角。
<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>實際制作動畫的時候，動畫太單一不酷，需要同時改變多個屬性時，上邊的四種元素可以互相組合，同類型的動畫也能組合。以上這些元素雖然能夠實現動畫，但是無法動態地添加事件，所以接下來我們就看看 js 如何制作動畫。
上篇文章我們介紹js可以操作path，同樣也可以操作SVG的內置形狀元素，還可以給任意元素添加事件。
給SVG元素添加事件方法與普通元素一樣，可以只用on+事件名 或者addEventListener添加。
eg：使用SVG繪制地一條線，點擊線條地時候改變 x1 ,實現旋轉效果。
<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 來實現一幀一幀的改變。
我們上述制作的 SVG 圖形、動畫等，運行在低版本IE中，發現SVG只有IE9以上才支持，低版本的并不能支持，為了兼容低版本瀏覽器，可以使用 VML ,VML需要添加額外東西，每個元素需要添加 v:元素，樣式中還需要添加 behavier ，經常用于繪制地圖。由于使用太麻煩，所以我們借助 Raphael.js 庫。
Raphael.js是通過SVG/VML+js實現跨瀏覽器的矢量圖形，在IE瀏覽器中使用VML，非IE瀏覽器使用SVG，類似于jquery，本質還是一個javascript庫，使用簡單，容易上手。
使用之前需要先引入Raphael.js庫文件。cdn的地址為：https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js
3.1、創建畫布
Rapheal有兩種創建畫布的方式：
第一種：瀏覽器窗口上創建畫布
創建語法：
var paper = Raphael(x,y,width,height)
x,y是畫布左上角的坐標，此時畫布的位置是絕對定位，有可能會與其他html元素重疊。width、height是畫布的寬高。
第二種：在一個元素中創建畫布
創建語法：
var paper = Raphael(element, width, height);
element是元素節點本身或ID width、height是畫布的寬度和高度。
3.2、繪制圖形
畫布創建好之后，該對象自帶SVG內置圖形有矩形、圓形、橢圓形。他們的方法分別為：
paper.circle(cx, cy, r); // (cx , cy)圓心坐標 r 半徑
paper.rect(x, y, width, height, r); // (x,y)左上角坐標 width寬度 height高度 r圓角半徑(可選)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圓心坐標 rx水平半徑 ry垂直半徑
eg：在div中繪制一個圓形，一個橢圓、一個矩形。
<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>運行結果如下：
除了簡單圖形之外，還可以繪制復雜圖形，如三角形、心型，這時就使用path方法。
使用語法：paper.path(pathString)
pathString是由一個或多個命令組成，每個命令以字母開始，多個參數是由逗號分隔。
eg：繪制一個三角形。
let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")還可以繪制文字，如果需要換行，使用 \n 。
文字語法：paper.text(x,y,text)
(x,y)是文字坐標，text是要繪制的文字。
3.3、設置屬性
圖形繪制之后，我們通常會添加stroke、fill、stroke-width等讓圖形更美觀，Raphael使用attr給圖形設置屬性。
使用語法：circle.attr({"屬性名","屬性值","屬性名","屬性值",...})
如果只有屬性名沒有屬性值，則是獲取屬性，如果有屬性值，則是設置屬性。
注意：如果只設置一個屬性時，可以省略‘{}’。如：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等以及對應的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。
使用語法：
obj.click(function(){
//需要操作的內容
})3.5、添加動畫
animate為指定圖形添加動畫并執行。
使用語法：
obj.animate({
"屬性名1":屬性值1,
"屬性名2":屬性值2,
...
},time,type)屬性名和屬性值就根據你想要的動畫類型加就ok。
time：動畫所需時間。
type：指動畫緩動類型。常用值有：
eg：點擊矩形，矩形緩緩變大。
<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>復制上邊的代碼，分別在各個瀏覽器和低版本IE瀏覽器運行，發現都可以正常運行。SVG的動畫庫挺多了，我們介紹了拉斐爾，有興趣的小伙伴可以自行找找其他庫。
在好多人都把HTML5和前端的概念弄混淆了。例如，H5是HTML5的簡稱，而現在好多人把HTML5看成了是前端開發的總稱。今天達妹就為各位普及一下，到底前端和HTML5有哪些區別？
以一個網站為例包括網站設計、前端開發、程序開發等。網站設計就是網站的外觀，平面的東西。程序開發也好理解就是功能實現。
而前端開發，簡單來說，就是把平面效果圖轉換成網頁，把靜態轉換成動態。
它的工作包括了:切圖、寫樣式、做鼠標效果和圖片切換效果等。而優秀的前端開發可以保障實現這些效果的同時，即不能影響網站的打開速度、瀏覽器兼容性還有搜索引擎的收錄，還可以讓用戶體驗更加舒適，使網站在訪問中顯得更精細、更用心。
訪客使用起來更簡便。另外，現在前端工作還不僅僅只是網頁的制作，還有微網站、APP的制作，游戲制作，例如可以將你開發的Web頁面直接打包成手機使用的APP應用，游戲的互動界面更是以前端開發技術為主。
學習HTML、CSS和DIV+CSS技術用來制作Web頁面;學習Java、DOM、BOM等用建立開發基礎;學習 photoshop和Axure等軟件應用，完成頁面UI設計;
也要認識一下NodeJS和PHP加上數據庫等這樣的后端語言，方便前后端開發配合;學習 HTML5、CSS3、響應式頁面布局、微網站制作等開發移動互聯網的應用;像Ajax、JQuery、jQueryMobile、Bootstrap、AngularJS等更是前端開發必學的高級技術;
HTML5地理位置應用、離線應用、webworker多線程實現、websocket、跨平臺開發技術和webAPP開發等，這些企業級應用技術也是現在開發的主流。
現在前端開發最熱門、要人最多，就是使用canvas開發網頁游戲動畫，以及會用 Cocos2d-js制作游戲等開發。
HTML5就是HTML最新標準，是現在Web程序開發的核心、標準通用標記語言下的一個應用HTML的第五次重大修改，這是一項推薦標準。
雖然 CSS3和HTML5是兩個語言，但通常說HTML5也都泛指包括CSS3，因為它們兩個常在一起配合使用的。當然還不指這些，從技術本身分析來看，現在完成一些頁面制作、WebAPP、微網站開發以及網頁游戲等，現在都是使用HTML5標準完成的。
雖然開發這類的應用其實是以JS為主，但因為HTML5 這個概念很流行，所以微網站開發、WebAPP或是微網站等應用，很多人都會說使用HTML5開發。
現在好多人都把HTML5和前端的概念弄混淆了。例如，H5是HTML5的簡稱，而現在好多人把HTML5看成了是前端開發的總稱。
HTML5其實只是前端開發中重要的一部分技術，是現在前端開發的標準組件，特別是在移動端的特效開發、游戲開發，以及APP的開發方向上非常流行。如果把前端開發比作要建設的一座“大廈”，HTML5就相當于“鋼筋水泥”。
現在好多人都說開發“XX功能”使用“HTML5”技術，其實理解的有一些問題，他們所說的HTML5其實說的就是前端技術，只不過HTML5這個詞比較活躍也比較流行，所以多數人都將前端技術叫成了HTML5了。
通過以上的講解，相信大家都已經對前端有了一個深刻的認識了吧！如果你是了解過Web前端的人，那么你就有一顆想轉行的心，因為相比于其他行業，web前端相對容易只要你有過硬的技術，有足夠的項目實戰經驗，很容易就拿到高薪，再加上如今IT行業發展形勢大好，軟件開發人員匱乏，未來幾年前端開發都將是高薪行業！
小編是一個多年開發經驗的程序員，今年年初整理了一批WEB前端學習資料作為粉絲福利，不論你是計算機專業想往WEB前端方向發展，還是零基礎想要轉行學習WEB前端，這份資料都能幫助到你，在自學過程中遇見問題了也可以隨時問我。只要關注我，私信我【前端】，即可領取粉絲福利。
eb前端與HTML5有什么區別？相信很多初學前端的人都會有這個困惑，在學習之初很多人都會把HTML5和前端的概念弄混淆了。例如，H5是HTML5的簡稱，而現在好多人把HTML5看成了是前端開發的總稱。所以今天小編就為大家準備了這篇文章，讓我們一起來看一看Web前端與HTML5技術的區別有哪些?
一、什么是Web前端開發
以一個網站為例包括網站設計、前端開發、程序開發等。網站設計就是網站的外觀，平面的東西，程序開發也好理解就是功能實現。而前端開發，簡單來說，就是把平面效果圖轉換成網頁，把靜態轉換成動態。它的工作包括了:切圖、寫樣式、做鼠標效果和圖片切換效果等。而優秀的前端開發可以保障實現這些效果的同時，即不能影響網站的打開速度、瀏覽器兼容性還有搜索引擎的收錄，還可以讓用戶體驗更加舒適，使網站在訪問中顯得更精細、更用心。訪客使用起來更簡便。另外，現在前端工作還不僅僅只是網頁的制作，還有微網站、APP的制作，游戲制作，例如可以將你開發的Web頁面直接打包成手機使用的APP應用，游戲的互動界面更是以前端開發技術為主。
二、Web前端開發學習什么?
學習HTML、CSS和DIV+CSS技術用來制作Web頁面;學習Java、DOM、BOM等用建立開發基礎;學習 photoshop和Axure等軟件應用，完成頁面UI設計;也要認識一下NodeJS和PHP加上數據庫等這樣的后端語言，方便前后端開發配合;學習 HTML5、CSS3、響應式頁面布局、微網站制作等開發移動互聯網的應用；像Ajax、JQuery、jQueryMobile、Bootstrap、AngularJS等更是前端開發必學的高級技術;HTML5地理位置應用、離線應用、Webworker多線程實現、Websocket、跨平臺開發技術和WebAPP開發等，這些企業級應用技術也是現在開發的主流；現在前端開發最熱門、要人最多，就是使用canvas開發網頁游戲動畫，以及會用 Cocos2d-js制作游戲等開發。
三、什么是HTML5?
HTML5就是HTML最新標準，是現在Web程序開發的核心、標準通用標記語言下的一個應用HTML的第五次重大修改，這是一項推薦標準。雖然 CSS3和HTML5是兩個語言，但通常說HTML5也都泛指包括CSS3，因為它們兩個常在一起配合使用的。當然還不指這些，從技術本身分析來看，現在完成一些頁面制作、WebAPP、微網站開發以及網頁游戲等，現在都是使用HTML5標準完成的。雖然開發這類的應用其實是以JS為主，但因為HTML5 這個概念很流行，所以微網站開發、WebAPP或是微網站等應用，很多人都會說使用HTML5開發。
四、前端與HTML5的區別?
現在好多人都把HTML5和前端的概念弄混淆了。例如，H5是HTML5的簡稱，而現在好多人把HTML5看成了是前端開發的總稱。HTML5其實只是前端開發中重要的一部分技術，是現在前端開發的標準組件，特別是在移動端的特效開發、游戲開發，以及APP的開發方向上非常流行。如果把前端開發比作要建設的一座“大廈”，HTML5就相當于“鋼筋水泥”。現在好多人都說開發“XX功能”使用“HTML5”技術，其實理解的有一些問題，他們所說的HTML5其實說的就是前端技術，只不過HTML5這個詞比較活躍也比較流行，所以多數人都將前端技術叫成了HTML5了。
所以現在你清楚了前端和HTML5的區別了嗎？如果你有一顆想轉行的心，Web前端無疑是一個很好的選擇，如今IT行業發展形勢大好，軟件開發人員匱乏，未來幾年前端開發都將是高薪行業。關注“武漢千鋒”微信公眾號，即有機會領取兩周免費試聽名額。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
