代瀏覽器都內置了專用動畫技術，Martin G?rner為您展現四種最棒的實例。

現代移動操作系統將用戶接口動畫化，并已達到了電腦端交互的標準——精選流暢的動畫，體現出沉浸效果以及支持直觀的交互。我們都想當然的認為，可以設置一個列表，使之帶有運動特性，用手指輕輕一推，它就如同有重量和慣性一樣運動起來，直到遇到邊緣再反彈回來一點。但是，在網絡上，我們還達不到這樣的效果。

接受事實吧，現有網上的動畫經常被視作UI災難，還在使用二十年前陳舊的<blink>標簽技術。加入Flash有點幫助，不過它缺乏HTML DOM集成，都變成了不美觀的800×600分辨率，并且JavaScript DOM操作還有其標志性的5幀/秒（fps）動畫率——真是絕望啊！

改變

2013年，現代瀏覽器內置了專用動畫技術，達到60 fps。是時候去忘掉過去，開始構建美妙的UI動畫體驗了。我將展示四個動畫技術，幫助你決定，哪一個更適合你的項目。

CSS3動畫——3D

讓我們從最簡單的聲明式技術開始：CSS3。這里不需要JavaScript，存CSS，加上一點現代手段。

CSS通過兩種基本屬性來聲明動畫：過渡和動畫。過渡屬性通知瀏覽器計算兩種狀態（由各自CSS定義）間的中間幀。動畫通過改變元素CSS觸發。比如，當你以編程方式改變它的層，或啟動一個:hover CSS。

當縮略圖層從開始轉變到結束，圖像則從一處平滑的移動到另一處，典型的表現為JavaScript DOM動作的結果。

img { -webkit-transition: 1s; }.begin { left: 0px; }.end { left: 500px; }

動畫屬性最常用于持續運行的動畫特效，它還允許自定義中間步驟的動畫。

創建一個旋轉的圖像：

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屬性制作動畫具有無限的創造性，你可以根據意圖在邊框寬度內任意創建動畫。 不過，大多數對動畫有用的屬性都是幾何變換和不透明的。CSS3通過易操作的轉換屬性提供了全系列二維幾何變換：平移、旋轉、縮放和歪斜。

用旋轉、縮放和歪斜創建2D轉換：

• webkit-transform：旋轉30度

• webkit-transform：縮小50%

• webkit-transform：歪斜-20度，再20度

接下來變得有趣了。如果你覺得在CSS中添加3D效果，技術上是為了粗體和斜體的設計，這很愚蠢，請接著閱讀。通過擴展幾何轉換到三維圖像將是一個很自然的方式，相同變換屬性還可以做平移X，Y，Z軸以及旋轉X，Y，Z軸。

3D旋轉圖像：

• webkit-transform：Y軸旋轉45度

再加上點拋出動畫效果，看上去就像是一個旋轉的三維立方體。

如果確實這般容易的話，就不會有任何趣味性了。設計師留了一點懸念，你可以試一下，只對一個圖像進行旋轉，瀏覽器默認渲染出來的效果是不帶透視性的：

• webkit-transform：Y軸旋轉45度

可以添加上透明屬性，默認是無窮大極限值也是不帶有一點透明效果的。就如同靠近鏡頭的對象與很遠距離外的對象看上去大小一樣。

為了確保圖像看上去更真實，你還需要指定一個鏡頭與屏幕之間距離的值。加上-webkitperspective: 1000px就可以了。

一點數學問題：什么是透視性？

要在一塊平面屏幕上呈現一個3D對象，首先畫出一條線連接眼鏡或相機與3D物理上的點。這條線與屏幕的交集就是相應像素所在的位置。為了找到像素在屏幕上的坐標，利用泰勒斯定理，你需要空間中點的3D坐標和相機與屏幕之間的距離（f在光學中也被稱為焦距）。這就是視角屬性提供的距離。如果這個距離是無限遠的，你可以看到所有射線（眼球到3D點線）是水平緊密狀的，而且很遠很遠的對象在屏幕上的大小一樣。

現在我們有設置一個3D立方體的所有基礎了，利用六個圖像以及CSS 3D轉換，接下來就可以實現旋轉了。

旋轉

這一步很簡單：我們把一個三維旋轉封裝到一個div，將會產生如下效果：

瀏覽器執行你讓它所做的步驟：在div渲染一個三維立方體，然后像一張平面圖片般在自身運用3D旋轉。這是默認效果，雖然不是你想要的。你要告訴瀏覽器運用嵌套div來構成3D轉換，-webkit-transform-style: preserve-3d屬性。通過這個，我們就能得到想要的旋轉立方體了。

準確獲取

很容易在空間失去定位。我的建議是采用一個div，命名為SCENE。這就是透明屬性存放的位置。在內部，放置一個命名為OBJECT的div，它應當擁有transform-style: preserve-3d屬性，并且該div就是你應用轉換移動整個對象的地方。最后，在該div內部，使用3D轉換設置你想要的正面圖像，創建所需對象。在我們的例子中，立方體的六個面：

.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);}...

關于3D CSS轉換很棒的一點是CSS動畫和過渡的完美結合。我們在這留了一個練習，讓旋轉立方體運動起來，當鼠標光標懸停其上時，立方體自動打開來。操作方法是：把立方體的面移動到與中心一定距離的地方。第二組CSS屬性有一個 :hover選擇器，將立方體的面放置在更遠的距離。通過運用第一種轉換屬性，你將看到立方體從中心盤旋打開，同時還保持旋轉（演示）。

可縮放的矢量圖像（SVG）

HTML與CSS都是強大的動畫技術，但缺乏繪圖基元。SVG能夠彌補這點，并擁有其獨特的動畫標簽。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>標簽，是SVG中最好用的。它允許你使用直線、弧和貝塞爾曲線定義任意路徑。路徑定義看上去想一個字母，如同Inkscape矢量圖形軟件生成的。對于SVG動畫，你應該理解這一點。

一個二次和三次貝塞爾曲線的例子：

<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 ? ? 新的起點 (標記)

L x,y ? ? ?到哪里的直線

Q cx, cy, x, y ?二次貝塞爾曲線到 (x,y)和一個控制點

C cx,cy, dx,dy, x,y 三次貝塞爾曲線到(x, y)和兩個控制點

A ? ? ? 橢圓弧

z ? ? ? 字符串最后，用于結束路徑

讓我們把這些矢量變得更生動化。你可以查看演示，一個家伙踏著滑板翱翔于白云間。

沖浪板上下擺動，小人的嘴巴在大和更大的笑容間交替變化，眼睛滾動，瞳孔擴張。這是SVG動畫四種可能的類型。

最簡單的一種SVG動畫運用<animate>標簽，改變一種幾何形狀的一個參數，在本例中，就是眼睛的半徑。

要使瞳孔擴張，需要改變屬性列表值中的半徑值。

<circle cx="200" cy="205" r="80" > <animate dur="3s" attributeName="r" values="80; 150; 80" repeatCount="indefinite" /></circle>

方便的是變化的屬性還可以成為<path>標簽。允許你創建一個動畫路徑。 唯一的限制是兩個曲線之間要進行轉換，必須是同一種類型且擁有相同數量的控制點。它們必須由相同位置上的同一個字母定義，唯一不同的只能是參數的改變。當移動小人的嘴巴時，只有“微笑”和“大笑”位置被定義了。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>

當然，SVG還能進行幾何變換，也能做成動畫。這里的動畫標簽是<animate Transform>。你必須告訴它想要將哪里的轉變做成動畫，還要提供一個分號分隔的所有關鍵位置的值列表。還可以組成動畫轉換，你告訴瀏覽器使用additive=”sum” 屬性。

幾何轉換的動畫：

<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動畫標簽也很有用。<animateMotion>用來引導對象沿著特定路徑運動。 它有一個隱藏的技巧稱為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) 函數在全局性開始/停止/暫停一個動畫的功能。還在所有三種動畫標簽(<animate>, <animateTransform>, <animateMotion>)上指定了begin與end屬性。它們可以利用一個事件節點/用戶事件/動畫事件的強大組合。你可以指定，動畫在點擊之后的一秒結束或開始。

例如，下面這個SVG按鈕被點擊后有一個移動的陰影效果：

<g id="buttonID"> <!-- SVG button artwork here --> <animate begin="buttonID.click" dur="1s"\ .../></g>

HTML5繪圖

由聲明性動畫轉換到編程性動畫技術，<canvas>標簽是你的第一選擇。本文所提到的所有技術中，<canvas>標簽最具有跨瀏覽器支持，瀏覽器廠商做了很多努力使之兼容60fps動畫，以下是設置一個畫布的方法：

<canvas width="400" height="400" style="width: 400px; height: 400px;"></canvas>

第一個尺寸（標簽屬性）設置了畫布的分辨率，這就是你所使用的坐標空間。第二個尺寸（CSS屬性）是畫布出現在屏幕上的形狀大小。為什么不把畫布物理尺寸設置到100%分辨率，內部坐標空間不變，瀏覽器為任意窗口都能正確渲染圖畫？非常遺憾，瀏覽器將畫布內容作為點陣圖來掃描的，任何擴大范圍的結果都將導致模糊混亂的像素。于是，把這兩個值設置成相同的值是唯一可行的選項。

初始化畫布需要JavaScript中<canvas>元素，并在其上調用getContext('2d')函數。獲得的圖畫內容對象被用來調用到畫布API。內容是狀態性的，存儲三種不同的狀態信息：繪畫風格，即時幾何轉換以及累計繪圖路徑。在畫布上進行繪畫的方法是發布繪圖指令，不產生任何可見內容，但在內存中已創建了一個路徑，然后發布一個油墨指令（ctx.stroke(), ctx.fill() 或兩者皆有），就能顯示出路徑了。

逐幀動畫

畫布動畫需要設置一個動畫循環，你應當基于requestAnimationFrame()函數（帶有正確的前綴）。該函數使瀏覽器能夠管理幀率，在瀏覽器選項卡隱藏時也能停止動畫。

function runAnimation(){ yourWorld.draw() // this is your drawing code webkitRequestAnimationFrame(runAnimation);}

一般來說，畫布被用于動畫的時候，對象的位置必須是在逐幀的基礎上才行，這是因為它們都是物理仿真的結果。觀看box2dweb.js教程。仿真不斷改變仿真世界中對象的位置，動畫循環周期性的在屏幕上展現當前環境狀態。

畫布SVG精靈

在畫布動畫中使用SVG精靈是一種很有用的技巧。一個任意復雜性的靜態矢量圖片在畫布上呈現都是繁瑣的，這樣做實際上可行，雖然不如發送一個.svg到 ctx.drawImage()簡單。出于模糊安全的原因，只有內聯SVG支持，你必須在Blob API中使用它（代碼）。

SVG精靈能夠以任意比例展示其矢量美態，但遺憾的是，只支持Chrome瀏覽器。

使用WebGL

WebGL暴露瀏覽器運行的JavaScript應用程序OpenGL API，而不需要任何插件。理論上講，你只需要在<canvas> 元素上調用getContext(‘webgl’)（而不是之前的2d）就可以了。然而，WebGL非常大，并且API等級低。最重要的是，web版本沒有默認的渲染路徑，這意味著你無法給它一個形狀，讓它使用適合的默認值展示出來。所以你必須編寫著色器，使用GLSL語言編寫屏幕上出現的任何內容。

幸運的是我們有Three.js幫助。Three最初是由Mr.doob開發的庫，用于一些Chrome演示（www.ro.me/www.chaostoperfection.com），但它是相對獨立的。它擁有所有的基礎，以及內置獨特的著色器，你就可以專注于其他有用的方面：相機、燈光、行動。

首先要做的是編寫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之前，需創建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

我們試著呈現一個立方體吧，3D對象在Three中被稱為網絡，都由一個幾何體和一個材料構成。

我們使用一個簡單的結構：

var texture=THREE.ImageUtils.loadTexture(‘Fernando Togni.jpg’);var cube=new THREE.Mesh( new THREE.CubeGeometry(100, 100, 100), new THREE.MeshLambertMaterial({map: texture}) );

最后添加內容，稱為渲染函數。

var scene=new THREE.Scene();scene.add(cube);scene.add(light);renderer.render(scene, camera);

這將為我們的立方體產生一個靜態圖像，為了讓它動起來，我們包裹渲染召集一個動畫循環，改變立方體在每一幀的位置。

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模型結構，包括COLLADA（.dae）具有廣泛行業支撐。下面是如何在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);} );

再做一些努力，更換機器人外觀花式，Three提供蘭伯特和馮氏照明風格，法線貼圖，凹凸貼圖，環境映射以及更多。

還可以使機器人運動起來，具體步驟參考教程。

原文鏈接：http://www.gbtags.com/gb/share/2124.htm

覽器內核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

渲染引擎它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。

JS 引擎則是解析 Javascript 語言，執行 javascript語言來實現網頁的動態效果。

最開始渲染引擎和 JS 引擎并沒有區分的很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。有一個網頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內核的種類很多，如加上沒什么人使用的非商業的免費內核，可能會有10多種，但是常見的瀏覽器內核可以分這四種：Trident、Gecko、Blink、Webkit。

（1）Trident(IE內核)

國內很多的雙核瀏覽器的其中一核便是 Trident，美其名曰 "兼容模式"。

代表： IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等。

Window10 發布后，IE 將其內置瀏覽器命名為 Edge，Edge 最顯著的特點就是新內核 EdgeHTML。

（2）Gecko(firefox)

Gecko(Firefox 內核)： Mozilla FireFox(火狐瀏覽器) 采用該內核，Gecko 的特點是代碼完全公開，因此，其可開發程度很高，全世界的程序員都可以為其編寫代碼，增加功能。 可惜這幾年已經沒落了， 比如 打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。

（3） webkit(Safari)

Safari 是蘋果公司開發的瀏覽器，所用瀏覽器內核的名稱是大名鼎鼎的 WebKit。

現在很多人錯誤地把 webkit 叫做 chrome內核（即使 chrome內核已經是 blink 了），蘋果感覺像被別人搶了媳婦，都哭暈再廁所里面了。

代表瀏覽器：傲游瀏覽器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器，

（4） Chromium/Blink(chrome)

在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置于 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。

大部分國產瀏覽器最新版都采用Blink內核。二次開發

（5） Presto(Opera)

Presto（已經廢棄） 是挪威產瀏覽器 opera 的 "前任" 內核，為何說是 "前任"，因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了。

移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。

手機瀏覽器

Android手機而言，使用率最高的就是Webkit內核，大部分國產瀏覽器宣稱的自己的內核，基本上也是屬于webkit二次開發。

iOS以及WP7平臺上，由于系統原因，系統大部分自帶瀏覽器內核，一般是Safari或者IE內核Trident的