整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
VG 動畫有很多種實現(xiàn)方法，也有很大SVG動畫庫，現(xiàn)在我們就來介紹 svg動畫實現(xiàn)方法都有哪些？
SVG animation 有五大元素，他們控制著各種不同類型的動畫，分別為：
1.1、set
set 為動畫元素設(shè)置延遲，此元素是SVG中最簡單的動畫元素，但是他并沒有動畫效果。
使用語法：
<set attributeName="" attributeType="" to="" begin="" />eg：繪制一個半徑為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ǔ)的動畫元素，實現(xiàn)單屬性的過渡效果。
使用語法：
<animate
attributeName="r"
from="200" to="50"
begin="4s" dur="2s"
repeatCount="2"
></animate>eg：繪制一個半徑為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也可以實現(xiàn)這個效果，所以該屬性目前已被廢棄。
1.4、animateTransform
實現(xiàn)transform變換動畫效果，與css3的transform變換類似。實現(xiàn)平移、旋轉(zhuǎn)、縮放等效果。
使用語法：
<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>實際制作動畫的時候，動畫太單一不酷，需要同時改變多個屬性時，上邊的四種元素可以互相組合，同類型的動畫也能組合。以上這些元素雖然能夠?qū)崿F(xiàn)動畫，但是無法動態(tài)地添加事件，所以接下來我們就看看 js 如何制作動畫。
上篇文章我們介紹js可以操作path，同樣也可以操作SVG的內(nèi)置形狀元素，還可以給任意元素添加事件。
給SVG元素添加事件方法與普通元素一樣，可以只用on+事件名 或者addEventListener添加。
eg：使用SVG繪制地一條線，點擊線條地時候改變 x1 ,實現(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 來實現(xiàn)一幀一幀的改變。
我們上述制作的 SVG 圖形、動畫等，運行在低版本IE中，發(fā)現(xiàn)SVG只有IE9以上才支持，低版本的并不能支持，為了兼容低版本瀏覽器，可以使用 VML ,VML需要添加額外東西，每個元素需要添加 v:元素，樣式中還需要添加 behavier ，經(jīng)常用于繪制地圖。由于使用太麻煩，所以我們借助 Raphael.js 庫。
Raphael.js是通過SVG/VML+js實現(xiàn)跨瀏覽器的矢量圖形，在IE瀏覽器中使用VML，非IE瀏覽器使用SVG，類似于jquery，本質(zhì)還是一個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)，此時畫布的位置是絕對定位，有可能會與其他html元素重疊。width、height是畫布的寬高。
第二種：在一個元素中創(chuàng)建畫布
創(chuàng)建語法：
var paper = Raphael(element, width, height);
element是元素節(jié)點本身或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中繪制一個圓形，一個橢圓、一個矩形。
<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>運行結(jié)果如下：
除了簡單圖形之外，還可以繪制復(fù)雜圖形，如三角形、心型，這時就使用path方法。
使用語法：paper.path(pathString)
pathString是由一個或多個命令組成，每個命令以字母開始，多個參數(shù)是由逗號分隔。
eg：繪制一個三角形。
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è)置一個屬性時，可以省略‘{}’。如：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：動畫所需時間。
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>復(fù)制上邊的代碼，分別在各個瀏覽器和低版本IE瀏覽器運行，發(fā)現(xiàn)都可以正常運行。SVG的動畫庫挺多了，我們介紹了拉斐爾，有興趣的小伙伴可以自行找找其他庫。
代瀏覽器都內(nèi)置了專用動畫技術(shù)，Martin G?rner為您展現(xiàn)四種最棒的實例。
現(xiàn)代移動操作系統(tǒng)將用戶接口動畫化，并已達(dá)到了電腦端交互的標(biāo)準(zhǔn)——精選流暢的動畫，體現(xiàn)出沉浸效果以及支持直觀的交互。我們都想當(dāng)然的認(rèn)為，可以設(shè)置一個列表，使之帶有運動特性，用手指輕輕一推，它就如同有重量和慣性一樣運動起來，直到遇到邊緣再反彈回來一點。但是，在網(wǎng)絡(luò)上，我們還達(dá)不到這樣的效果。
接受事實吧，現(xiàn)有網(wǎng)上的動畫經(jīng)常被視作UI災(zāi)難，還在使用二十年前陳舊的<blink>標(biāo)簽技術(shù)。加入Flash有點幫助，不過它缺乏HTML DOM集成，都變成了不美觀的800×600分辨率，并且JavaScript DOM操作還有其標(biāo)志性的5幀/秒（fps）動畫率——真是絕望啊！
改變
2013年，現(xiàn)代瀏覽器內(nèi)置了專用動畫技術(shù)，達(dá)到60 fps。是時候去忘掉過去，開始構(gòu)建美妙的UI動畫體驗了。我將展示四個動畫技術(shù)，幫助你決定，哪一個更適合你的項目。
讓我們從最簡單的聲明式技術(shù)開始：CSS3。這里不需要JavaScript，存CSS，加上一點現(xiàn)代手段。
CSS通過兩種基本屬性來聲明動畫：過渡和動畫。過渡屬性通知瀏覽器計算兩種狀態(tài)（由各自CSS定義）間的中間幀。動畫通過改變元素CSS觸發(fā)。比如，當(dāng)你以編程方式改變它的層，或啟動一個:hover CSS。
當(dāng)縮略圖層從開始轉(zhuǎn)變到結(jié)束，圖像則從一處平滑的移動到另一處，典型的表現(xiàn)為JavaScript DOM動作的結(jié)果。
img { -webkit-transition: 1s; }.begin { left: 0px; }.end { left: 500px; }
動畫屬性最常用于持續(xù)運行的動畫特效，它還允許自定義中間步驟的動畫。
創(chuàng)建一個旋轉(zhuǎn)的圖像：
img {-webkit-animation: myAnim 3s infinite; }@-webkit-keyframes myAnim{ from {-webkit-transform: rotate(0deg) } 50% {/* possible intermediate positions at any % */} to {-webkit-transform: rotate(360deg) }}
利用大量CSS屬性制作動畫具有無限的創(chuàng)造性，你可以根據(jù)意圖在邊框?qū)挾葍?nèi)任意創(chuàng)建動畫。 不過，大多數(shù)對動畫有用的屬性都是幾何變換和不透明的。CSS3通過易操作的轉(zhuǎn)換屬性提供了全系列二維幾何變換：平移、旋轉(zhuǎn)、縮放和歪斜。
用旋轉(zhuǎn)、縮放和歪斜創(chuàng)建2D轉(zhuǎn)換：
webkit-transform：旋轉(zhuǎn)30度
webkit-transform：縮小50%
webkit-transform：歪斜-20度，再20度
接下來變得有趣了。如果你覺得在CSS中添加3D效果，技術(shù)上是為了粗體和斜體的設(shè)計，這很愚蠢，請接著閱讀。通過擴(kuò)展幾何轉(zhuǎn)換到三維圖像將是一個很自然的方式，相同變換屬性還可以做平移X，Y，Z軸以及旋轉(zhuǎn)X，Y，Z軸。
3D旋轉(zhuǎn)圖像：
webkit-transform：Y軸旋轉(zhuǎn)45度
再加上點拋出動畫效果，看上去就像是一個旋轉(zhuǎn)的三維立方體。
如果確實這般容易的話，就不會有任何趣味性了。設(shè)計師留了一點懸念，你可以試一下，只對一個圖像進(jìn)行旋轉(zhuǎn)，瀏覽器默認(rèn)渲染出來的效果是不帶透視性的：
webkit-transform：Y軸旋轉(zhuǎn)45度
可以添加上透明屬性，默認(rèn)是無窮大極限值也是不帶有一點透明效果的。就如同靠近鏡頭的對象與很遠(yuǎn)距離外的對象看上去大小一樣。
為了確保圖像看上去更真實，你還需要指定一個鏡頭與屏幕之間距離的值。加上-webkitperspective: 1000px就可以了。
要在一塊平面屏幕上呈現(xiàn)一個3D對象，首先畫出一條線連接眼鏡或相機(jī)與3D物理上的點。這條線與屏幕的交集就是相應(yīng)像素所在的位置。為了找到像素在屏幕上的坐標(biāo)，利用泰勒斯定理，你需要空間中點的3D坐標(biāo)和相機(jī)與屏幕之間的距離（f在光學(xué)中也被稱為焦距）。這就是視角屬性提供的距離。如果這個距離是無限遠(yuǎn)的，你可以看到所有射線（眼球到3D點線）是水平緊密狀的，而且很遠(yuǎn)很遠(yuǎn)的對象在屏幕上的大小一樣。
現(xiàn)在我們有設(shè)置一個3D立方體的所有基礎(chǔ)了，利用六個圖像以及CSS 3D轉(zhuǎn)換，接下來就可以實現(xiàn)旋轉(zhuǎn)了。
這一步很簡單：我們把一個三維旋轉(zhuǎn)封裝到一個div，將會產(chǎn)生如下效果：
瀏覽器執(zhí)行你讓它所做的步驟：在div渲染一個三維立方體，然后像一張平面圖片般在自身運用3D旋轉(zhuǎn)。這是默認(rèn)效果，雖然不是你想要的。你要告訴瀏覽器運用嵌套div來構(gòu)成3D轉(zhuǎn)換，-webkit-transform-style: preserve-3d屬性。通過這個，我們就能得到想要的旋轉(zhuǎn)立方體了。
很容易在空間失去定位。我的建議是采用一個div，命名為SCENE。這就是透明屬性存放的位置。在內(nèi)部，放置一個命名為OBJECT的div，它應(yīng)當(dāng)擁有transform-style: preserve-3d屬性，并且該div就是你應(yīng)用轉(zhuǎn)換移動整個對象的地方。最后，在該div內(nèi)部，使用3D轉(zhuǎn)換設(shè)置你想要的正面圖像，創(chuàng)建所需對象。在我們的例子中，立方體的六個面：
.SCENE { -webkit-perspective: 1000px; }.OBJECT{ -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(20deg rotateY(120deg) rotateZ(50deg); /* replace this with an animation property if you want movement */}.FACE1 { -webkit-transform:translateX(150px)rotateY(90deg);}...
關(guān)于3D CSS轉(zhuǎn)換很棒的一點是CSS動畫和過渡的完美結(jié)合。我們在這留了一個練習(xí)，讓旋轉(zhuǎn)立方體運動起來，當(dāng)鼠標(biāo)光標(biāo)懸停其上時，立方體自動打開來。操作方法是：把立方體的面移動到與中心一定距離的地方。第二組CSS屬性有一個 :hover選擇器，將立方體的面放置在更遠(yuǎn)的距離。通過運用第一種轉(zhuǎn)換屬性，你將看到立方體從中心盤旋打開，同時還保持旋轉(zhuǎn)（演示）。
HTML與CSS都是強大的動畫技術(shù)，但缺乏繪圖基元。SVG能夠彌補這點，并擁有其獨特的動畫標(biāo)簽。SVG動畫部分被特定稱為同步多媒體集成語言（SMIL）。
首先，SVG是用于矢量基元的，比如矩形、圓形和貝塞爾曲線：
<svg> <rect x="5" y="5" width="140" height="140" stroke="#000000" strokewidth="4"fill="#AAAAFF" opacity="1"/></svg>
同樣可用于：
<line x1 y1 x2 y2><circle cx cy r><path d><image x y width height xlink:href>
其中一個基元，<path>標(biāo)簽，是SVG中最好用的。它允許你使用直線、弧和貝塞爾曲線定義任意路徑。路徑定義看上去想一個字母，如同Inkscape矢量圖形軟件生成的。對于SVG動畫，你應(yīng)該理解這一點。
一個二次和三次貝塞爾曲線的例子：
<svg> <path d="M 30,240 Q 170,40 260,230" stroke="#F00" /> <path d="M 30,240 C 70,90 210,150 260,230" stroke="#F00" /></svg>
語法：
M x,y ? ? 新的起點 (標(biāo)記)
L x,y ? ? ?到哪里的直線
Q cx, cy, x, y ?二次貝塞爾曲線到 (x,y)和一個控制點
C cx,cy, dx,dy, x,y 三次貝塞爾曲線到(x, y)和兩個控制點
A ? ? ? 橢圓弧
z ? ? ? 字符串最后，用于結(jié)束路徑
讓我們把這些矢量變得更生動化。你可以查看演示，一個家伙踏著滑板翱翔于白云間。
沖浪板上下擺動，小人的嘴巴在大和更大的笑容間交替變化，眼睛滾動，瞳孔擴(kuò)張。這是SVG動畫四種可能的類型。
最簡單的一種SVG動畫運用<animate>標(biāo)簽，改變一種幾何形狀的一個參數(shù)，在本例中，就是眼睛的半徑。
要使瞳孔擴(kuò)張，需要改變屬性列表值中的半徑值。
<circle cx="200" cy="205" r="80" > <animate dur="3s" attributeName="r" values="80; 150; 80" repeatCount="indefinite" /></circle>
方便的是變化的屬性還可以成為<path>標(biāo)簽。允許你創(chuàng)建一個動畫路徑。 唯一的限制是兩個曲線之間要進(jìn)行轉(zhuǎn)換，必須是同一種類型且擁有相同數(shù)量的控制點。它們必須由相同位置上的同一個字母定義，唯一不同的只能是參數(shù)的改變。當(dāng)移動小人的嘴巴時，只有“微笑”和“大笑”位置被定義了。SVG動畫將完成插值。
<path fill="#fff"> <animate attributeName="d" dur="2s" repeatCount="indefinite" values="m 0,0 c 1,15 -13,45 -45,45 -32,0 -44,-28 -44,-44 z; m 0,0 c -4,15 -66,106 -98,106 -32,0 3,-89 9,-105 z" /></path>
當(dāng)然，SVG還能進(jìn)行幾何變換，也能做成動畫。這里的動畫標(biāo)簽是<animate Transform>。你必須告訴它想要將哪里的轉(zhuǎn)變做成動畫，還要提供一個分號分隔的所有關(guān)鍵位置的值列表。還可以組成動畫轉(zhuǎn)換，你告訴瀏覽器使用additive=”sum” 屬性。
幾何轉(zhuǎn)換的動畫：
<g> ... <!-- SVG primitives group --> <animateTransform dur="3s" repeatCount="indefinite" additive="sum" attributeName="transform" type="translate" values="0,0; 200,-130; -100,200; 0,0" /> <animateTransform dur="3s" repeatCount="indefinite" additive="sum" attributeName="transform" type="rotate" values="0; 20; -20; 0" /></g>
第三個和最后一個SVG動畫標(biāo)簽也很有用。<animateMotion>用來引導(dǎo)對象沿著特定路徑運動。 它有一個隱藏的技巧稱為rotate=”auto”屬性。它讓對象不僅能夠遵循指定路徑，同時自身保持朝前，如同路上行駛的車輛一樣。
<g> ... <!-- SVG primitives group --> <animateMotion dur=”1s"repeatCount="indefinite" path="m 0,0 a 15,11 0 1 1 -30,0 15,11 0 1 1 30,0 z" /></g>
SMIL有大量控制動畫特征。在它的JavaScript API中揭露pauseAnimations(), unpauseAnimations()和setCurrentTime(t) 函數(shù)在全局性開始/停止/暫停一個動畫的功能。還在所有三種動畫標(biāo)簽(<animate>, <animateTransform>, <animateMotion>)上指定了begin與end屬性。它們可以利用一個事件節(jié)點/用戶事件/動畫事件的強大組合。你可以指定，動畫在點擊之后的一秒結(jié)束或開始。
例如，下面這個SVG按鈕被點擊后有一個移動的陰影效果：
<g id="buttonID"> <!-- SVG button artwork here --> <animate begin="buttonID.click" dur="1s"\ .../></g>
由聲明性動畫轉(zhuǎn)換到編程性動畫技術(shù)，<canvas>標(biāo)簽是你的第一選擇。本文所提到的所有技術(shù)中，<canvas>標(biāo)簽最具有跨瀏覽器支持，瀏覽器廠商做了很多努力使之兼容60fps動畫，以下是設(shè)置一個畫布的方法：
<canvas width="400" height="400" style = "width: 400px; height: 400px;"></canvas>
第一個尺寸（標(biāo)簽屬性）設(shè)置了畫布的分辨率，這就是你所使用的坐標(biāo)空間。第二個尺寸（CSS屬性）是畫布出現(xiàn)在屏幕上的形狀大小。為什么不把畫布物理尺寸設(shè)置到100%分辨率，內(nèi)部坐標(biāo)空間不變，瀏覽器為任意窗口都能正確渲染圖畫？非常遺憾，瀏覽器將畫布內(nèi)容作為點陣圖來掃描的，任何擴(kuò)大范圍的結(jié)果都將導(dǎo)致模糊混亂的像素。于是，把這兩個值設(shè)置成相同的值是唯一可行的選項。
初始化畫布需要JavaScript中<canvas>元素，并在其上調(diào)用getContext('2d')函數(shù)。獲得的圖畫內(nèi)容對象被用來調(diào)用到畫布API。內(nèi)容是狀態(tài)性的，存儲三種不同的狀態(tài)信息：繪畫風(fēng)格，即時幾何轉(zhuǎn)換以及累計繪圖路徑。在畫布上進(jìn)行繪畫的方法是發(fā)布繪圖指令，不產(chǎn)生任何可見內(nèi)容，但在內(nèi)存中已創(chuàng)建了一個路徑，然后發(fā)布一個油墨指令（ctx.stroke(), ctx.fill() 或兩者皆有），就能顯示出路徑了。
畫布動畫需要設(shè)置一個動畫循環(huán)，你應(yīng)當(dāng)基于requestAnimationFrame()函數(shù)（帶有正確的前綴）。該函數(shù)使瀏覽器能夠管理幀率，在瀏覽器選項卡隱藏時也能停止動畫。
function runAnimation(){ yourWorld.draw() // this is your drawing code webkitRequestAnimationFrame(runAnimation);}
一般來說，畫布被用于動畫的時候，對象的位置必須是在逐幀的基礎(chǔ)上才行，這是因為它們都是物理仿真的結(jié)果。觀看box2dweb.js教程。仿真不斷改變仿真世界中對象的位置，動畫循環(huán)周期性的在屏幕上展現(xiàn)當(dāng)前環(huán)境狀態(tài)。
在畫布動畫中使用SVG精靈是一種很有用的技巧。一個任意復(fù)雜性的靜態(tài)矢量圖片在畫布上呈現(xiàn)都是繁瑣的，這樣做實際上可行，雖然不如發(fā)送一個.svg到 ctx.drawImage()簡單。出于模糊安全的原因，只有內(nèi)聯(lián)SVG支持，你必須在Blob API中使用它（代碼）。
SVG精靈能夠以任意比例展示其矢量美態(tài)，但遺憾的是，只支持Chrome瀏覽器。
WebGL暴露瀏覽器運行的JavaScript應(yīng)用程序OpenGL API，而不需要任何插件。理論上講，你只需要在<canvas> 元素上調(diào)用getContext(‘webgl’)（而不是之前的2d）就可以了。然而，WebGL非常大，并且API等級低。最重要的是，web版本沒有默認(rèn)的渲染路徑，這意味著你無法給它一個形狀，讓它使用適合的默認(rèn)值展示出來。所以你必須編寫著色器，使用GLSL語言編寫屏幕上出現(xiàn)的任何內(nèi)容。
幸運的是我們有Three.js幫助。Three最初是由Mr.doob開發(fā)的庫，用于一些Chrome演示（www.ro.me/www.chaostoperfection.com），但它是相對獨立的。它擁有所有的基礎(chǔ)，以及內(nèi)置獨特的著色器，你就可以專注于其他有用的方面：相機(jī)、燈光、行動。
首先要做的是編寫Three粘合代碼（很簡單）：
var renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(width, height);renderer.setClearColorHex(0x000000, 0); // color,transparency// the renderer creates a canvas elementfor youdocument.whereeveryouwant.appendChild(renderer.domElement);
在lights和action之前，需創(chuàng)建camera和位置：
// arguments: FOV,viewAspectRatio, zNear, zFarvar camera = new THREE.PerspectiveCamera(35,width/height, 1, 10000);camera.position.z = 300;
然后是light：
var light = new THREE.DirectionalLight(0xffffff, 1);//color, intensitylight.position.set(1, 1, 0.3); // direction
我們試著呈現(xiàn)一個立方體吧，3D對象在Three中被稱為網(wǎng)絡(luò)，都由一個幾何體和一個材料構(gòu)成。
我們使用一個簡單的結(jié)構(gòu)：
var texture = THREE.ImageUtils.loadTexture(‘Fernando Togni.jpg’);var cube = new THREE.Mesh( new THREE.CubeGeometry(100, 100, 100), new THREE.MeshLambertMaterial({map: texture}) );
最后添加內(nèi)容，稱為渲染函數(shù)。
var scene = new THREE.Scene();scene.add(cube);scene.add(light);renderer.render(scene, camera);
這將為我們的立方體產(chǎn)生一個靜態(tài)圖像，為了讓它動起來，我們包裹渲染召集一個動畫循環(huán)，改變立方體在每一幀的位置。
function runAnimation(t){ // animate your objects depending on time cube.rotation.y = t/1000; cube.position.x = ... renderer.render(scene, camera); // display requestAnimationFrame(runAnimation); // and loop}
推薦使用三維建模軟件例如Sketchup。Three識別幾類3D模型結(jié)構(gòu)，包括COLLADA（.dae）具有廣泛行業(yè)支撐。下面是如何在Three中加載一個模型：
var loader = new THREE.ColladaLoader();loader.load("Android.dae", function(collada){ var model = collada.scene; model.position = ...; // x, y, z model.rotation = ...; // x, y, z scene.add(model);} );
再做一些努力，更換機(jī)器人外觀花式，Three提供蘭伯特和馮氏照明風(fēng)格，法線貼圖，凹凸貼圖，環(huán)境映射以及更多。
還可以使機(jī)器人運動起來，具體步驟參考教程。
原文鏈接：http://www.gbtags.com/gb/share/2124.htm
網(wǎng)頁設(shè)計過程中，我們會經(jīng)常用到一些HTML5特效代碼，下面就是為大家整理分享的一些好看炫酷且實用的HTML5特效代碼，可以放心在您的應(yīng)用程序中使用。
一、Canvas跟隨鼠標(biāo)光標(biāo)動畫特效
演示、下載地址：http://www.php.cn/xiazai/js/845
二、HTML5 Canvas泡泡懸浮鼠標(biāo)特效
演示、下載地址：http://www.php.cn/xiazai/js/1599
三、HTML5卡通可愛風(fēng)格網(wǎng)頁找不到404錯誤頁面網(wǎng)頁模板
演示、下載地址：http://www.php.cn/xiazai/js/2987
四、HTML5-Canvas線條背景動畫
演示、下載地址：http://www.php.cn/xiazai/js/2930
五、HTML5-Canvas線條背景動畫
演示、下載地址：http://www.php.cn/xiazai/js/2919
六、HTML5-Canvas五彩紙屑飄落動畫特效
演示、下載地址：http://www.php.cn/xiazai/js/2917
更多炫酷html5、javascript特效代碼，盡在：js特效大全
以上就是html5精選特效代碼分享（收藏）的詳細(xì)內(nèi)容，更多請關(guān)注其它相關(guān)文章！
更多技巧請《轉(zhuǎn)發(fā) + 關(guān)注》哦！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
