代瀏覽器都內置了專用動畫技術,Martin G?rner為您展現四種最棒的實例。
現代移動操作系統將用戶接口動畫化,并已達到了電腦端交互的標準——精選流暢的動畫,體現出沉浸效果以及支持直觀的交互。我們都想當然的認為,可以設置一個列表,使之帶有運動特性,用手指輕輕一推,它就如同有重量和慣性一樣運動起來,直到遇到邊緣再反彈回來一點。但是,在網絡上,我們還達不到這樣的效果。
接受事實吧,現有網上的動畫經常被視作UI災難,還在使用二十年前陳舊的<blink>標簽技術。加入Flash有點幫助,不過它缺乏HTML DOM集成,都變成了不美觀的800×600分辨率,并且JavaScript DOM操作還有其標志性的5幀/秒(fps)動畫率——真是絕望啊!
改變
2013年,現代瀏覽器內置了專用動畫技術,達到60 fps。是時候去忘掉過去,開始構建美妙的UI動畫體驗了。我將展示四個動畫技術,幫助你決定,哪一個更適合你的項目。
讓我們從最簡單的聲明式技術開始: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選擇器,將立方體的面放置在更遠的距離。通過運用第一種轉換屬性,你將看到立方體從中心盤旋打開,同時還保持旋轉(演示)。
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>
由聲明性動畫轉換到編程性動畫技術,<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到 ctx.drawImage()簡單。出于模糊安全的原因,只有內聯SVG支持,你必須在Blob API中使用它(代碼)。
SVG精靈能夠以任意比例展示其矢量美態,但遺憾的是,只支持Chrome瀏覽器。
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
周在給學生講授JavaScript課程中setInterval方法時,想到了我們在網上看到的各類GIF動圖比較有意思,就將其引入到教學中,教學內容設計如果通過HTML5與JavaScript實現網頁類似GIF效果的動態圖。于是在網上搜集了部分gif格式動圖,將每一個Gif動圖分解為一組jpg格式圖片,再采用setInterval與html5 Canvas進行動畫的實現。通過學習可以讓學生進一步了解canvas動畫實現的過程與原理。并將其發布到頭條,也希望對有興趣的初學者了解HTML5 Canvas等有所幫助。圖片分組圖片素材如下:
素材一
實現動畫的素材我們已經給出,主要通過gif動圖導出一組圖片,下面對html5動畫實現過程進行簡單說明。
實現其動畫的基本思路是通過HTML5提供的canvas元素進行圖片的繪制與展示,借助setInterval方法實現間隔指定時間調用新的圖片實現重新繪圖。其中繪圖主要使用drawImage方法進行繪圖,最終通過圖片依次重繪實現動畫效果。具體實現過程如下:
在頁面body部分添加Canva標簽,設置其id屬性為canv,寬度為600,高度為400,編寫代碼描述如下圖:
添加畫布元素
canvas瀏覽效果
使用Canvas借助JavaScript提供的drawImage方法進行繪圖,需要提供要繪制的圖片資源即繪圖的坐標位置。該方法原型如下:
drawImage方法原型
因此我們需要加載圖片資源,本例由于需要調用多個img實現定時不同圖片的繪制,因此我們可以使用數組存儲所加載的圖片資源。本例圖片數量為14,因此我們數組長度為14。使用素組存儲圖片實現代碼如下:
加載圖片資源代碼
本例設計在頁面加載時自動播放動畫,因此需要在JavaScript腳本中添加頁面onload事件,在事件中編寫繪圖相關代碼,主要代碼包括獲取畫布canva與實例化繪圖對象context。部分代碼描述如下:
onload事件及繪圖初始化
使用setInterval方法實現動畫主要需要定義回調函數與回調函數觸發執行的周期,本例中我們使用匿名函數作為回調函數,觸發周期設置為100毫秒。setInterval函數定義如下:
setInterval函數
在定義完函數之后可在其匿名函數函數體部分寫入繪圖方法dramImage(),實現周期調用不同圖片資源進行繪圖,最終展示出動畫效果。為了保證循環調用14張圖片,我們需要設置一計數全局變量i,由于我們圖片采用數組存儲,下標為數組,且從0-13進行編號,因此當計數值小于13時自動+1,指向下一數組下標,當為13時,設置計數值為0,回到數組第一元素,最終實現數組訪問下標的循環。setInterval實現完整代碼如下:
setInterval完整代碼
HTML動畫效果展示
本頭條號長期關注編程資訊分享;編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見,可以聯系作者,共同探討。期待大家關注!如需案例完整代碼請關注并私信,往期前端設計文章鏈接如下:
使用DIV+CSS布局時,我們需要通過為div命名的方式,來區分網頁中不同的模塊。在HTML5中布局方式有了新的變化,HTML5中增加了新的結構標簽,如header標簽、nav標簽、article標簽等,具體介紹如下。
1. header標簽
HTML5中的header標簽是一種具有引導和導航作用的結構標簽,該標簽可以包含所有通常放在頁面頭部的內容。header標簽通常用來放置整個頁面或頁面內的一個內容區塊的標題,也可以包含網站Logo圖片、搜索表單或者其他相關內容。其基本語法格式如下:
<header>
<h1>網頁主題</h1>
...
</header>
在上面的語法格式中,<header></header>的使用方法和<div class="header"></div>類似。
注意:
在HTML網頁中,并不限制header標簽的個數,一個網頁中可以使用多個header標簽,也可以為每一個內容塊添加header標簽。
2. nav標簽
nav標簽用于定義導航鏈接,是HTML5新增的標簽,該標簽可以將具有導航性質的鏈接歸納在一個區域中,使頁面元素的語義更加明確。nav標簽的使用方法和普通標簽類似,例如下面這段示例代碼:
<nav>
<ul>
<li><a href="#">首頁</li>
<li><a href="#">公司概況</li>
<li><a href="#">產品展示</li>
<li><a href="#">聯系我們</li>
</ul></nav>
在上面這段代碼中,通過在nav標簽內部嵌套無序列表ul來搭建導航結構。通常一個HTML頁面中可以包含多個nav標簽,作為頁面整體或不同部分的導航。具體來說,nav標簽可以用于以下幾種場合。
● 傳統導航條:目前主流網站上都有不同層級的導航條,其作用是跳轉到網站的其他主頁面。
● 側邊欄導航:目前主流博客網站及電商網站都有側邊欄導航,目的是將當前文章或當前商品頁面跳轉到其他文章或其他商品頁面。
● 頁內導航:它的作用是在本頁面幾個主要的組成部分之間進行跳轉。
● 翻頁操作:翻頁操作切換的是網頁的內容部分,可以通過點擊“上一頁”或“下一頁”切換,也可以通過點擊實際的頁數跳轉到某一頁。
除了以上幾點以外,nav標簽也可以用于其他導航鏈接組中。需要注意的是,并不是所有的鏈接組都要被放進nav標簽,只需要將主要的和基本的鏈接放進nav標簽即可。
3. footer標簽
footer標簽用于定義一個頁面或者區域的底部,它可以包含所有放在頁面底部的內容。在HTML5出現之前,一般使用<div class="footer"></div>標簽來定義頁面底部,而現在通過HTML5的footer標簽可以輕松實現。與header標簽相同,一個頁面中可以包含多個footer標簽。
4. article標簽
article標簽代表文檔、頁面或者應用程序中與上下文不相關的獨立部分,該元素經常被用于定義一篇日志、一條新聞或用戶評論等。一個article標簽通常有它自己的標題(可以放在header標簽中)和腳注(可以放在footer標簽中),例如下面的示例代碼。
<article>
<header>
<h1>秋天的味道</h1>
<p>你想不想知道秋天的味道?它是甜、是苦、是澀...</p>
</header>
<footer>
<p>著作權歸XXXXXX公司所有...</p>
</footer></article>
需要注意的,在上面的示例代碼中還缺少主體內容。主體內容通常會寫在header和footer之間,通過多個section標簽進行劃分。一個頁面中可以出現多個article標簽,并且article標簽可以嵌套使用。
5. section標簽
section標簽表示一段專題性的內容,一般會帶有標題,主要應用在文章的章節中。例如,新聞的詳情頁有一篇文章,該文章有自己的標題和內容,因此可以使用article標簽標注,如果該新聞內容太長,分好多段落,每段都有自己的小標題,這時候就可以使用section標簽把段落標注起來。在使用section標簽時,需要注意以下幾點:
● section不僅僅是一個普通的容器標簽。當一個標簽只是為了樣式化或者方便腳本使用時,應該使用div標簽。
如果article標簽、aside標簽或nav標簽更符合使用條件,那么不要使用section標簽。
● 沒有標題的內容模塊不要使用section標簽定義。
值得一提的是,在HTML5中,article標簽可以看作是一種特殊的section標簽,它比section標簽更具有獨立性,即section標簽強調分段或分塊,而article標簽強調獨立性。如果一塊內容相對來說比較獨立、完整時,應該使用article標簽;但是如果想要將一塊內容分成多段時,應該使用section標簽。
6. aside標簽
aside標簽用來定義當前頁面或者文章的附屬信息部分,它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條等有別于主要內容的部分。aside標簽的用法主要分為兩種:
● 被包含在article標簽內作為主要內容的附屬信息。
● 在article標簽之外使用,作為頁面或網站的附屬信息部分。最常用的的使用形式是側邊欄。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。