整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
代瀏覽器都內置了專用動畫技術，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
所周知，一個元素，動往往比靜更吸引眼球；
一套操作界面，合適的動態交互反饋能給用戶帶來更好的操作體驗；
一個H5運營宣傳頁，炫酷的動畫特效定能助力傳播和品牌打造。
近兩年，小到loading動畫，表單動效，大到各式各樣H5運營頁的炫酷展現，“動效設計”一詞可謂是火遍大江南北，而動效設計早已成為一名合格設計師必需有所知曉的領域。本文將通過一些案例，和大家一同挖掘幾種常見的H5動效制作手法。
我們由淺入深來挖掘這動效制作的秘密，一個入門級的小問題：看上圖這幾個動畫例子，大家是否能說出這動畫是如何制作出來的呢？而又是如何在網頁之上呈現的呢？
對，答案必須是設計師們都非常熟悉的gif小動畫了，H5動效制作的第一手法，便是GIF了。
動效制作手法1：GIF
GIF圖片擅長于制作細節的小動畫，位圖，優勢在于 “體型”很小，可壓縮，制作成本低，以圖片的形態適用于各種操作系統，無兼容性的后顧之憂。制作GIF動畫的方式有很多，例如我們所熟悉的Photoshop時間軸，或是利用Flash，AE將動畫導出存成GIF格式等等。
GIF動畫最常在H5動效里當擔loading導航條，熱門小標簽等元素，要把控圖片大小和精度之間的平衡，所以它一般用于制作小細節的動畫。
H5頁面承載GIF圖片的方式相對以下要介紹的其他方法，是最省成本，最為簡便的。只需要以背景圖片/內容圖片的形式在頁面上進行引用即可。
聊完了GIF動畫的一些特點，那么我們必須同時對比一下它的堂兄弟：逐幀動畫 。
動效制作手法2：逐幀動畫
逐幀動畫即是利用一張等間距的動畫分解逐幀圖片，由js腳本模擬編寫或是使用css3新屬性step()制作而成。step()在移動端的兼容性是很好的，但使用比較小眾。逐幀動畫和GIF動畫的差別在于，腳本可以控制逐幀動畫的快慢和動作的暫停，而GIF動畫無法在后期通過代碼進行動畫速率及透明度的修改。
做一個逐幀動畫必不可缺的就是需要一張等間距的“動畫分解逐幀圖片.png”，再通過JavaScript腳本或CSS3 animation的過度函數step()來控制圖片的background-position，二者結合就可以快速輸出一個逐幀動畫啦。
從以往的經驗看GIF動畫或是逐幀動畫，我們往往認為它們只適合做一些小細節的動畫。其實二者也可以承載一些很獨特的動畫效果！如以下這個例子，這是陌陌的一個宣傳h5頁面，它便是由逐幀分解圖+JavaScript腳本模擬逐幀動畫拼合而成的。
動效制作手法3：CSS3
CSS3應該是動畫家族里絕對不會被遺忘的一名成員。這里我們定義它為擅長于平面層的動畫。CSS3的缺陷應該在于它的部分屬性還沒有被瀏覽器有好的支持。這炫酷到沒朋友的動畫效果其實主要就是依靠CSS3編寫完成的。
這里給大家介紹一下CSS3的動畫三大屬性：Transform 變形，Transition 過渡，和Animation 動畫。
Transform 變形：擁有 rotate 旋轉 skew 扭曲 scale 縮放 translate 移動 matrix 矩陣變形五大特效，羅斯的例子中，便是對充分結合了這幾個變化特效的產物。
Transition 過渡：擁有修改執行變換的屬性，時長，速率和延遲時間的能力，大家都很熟悉的貝塞爾曲線，也是歸屬于transition的設定之下的。
***拓展工具：貝塞爾定制傳送門***
Animation 動畫：若將Transform解釋為動作，Transition解釋為過渡，那么Animation則是連續的幾個動作，即動畫。Animation可以我們設定keyframes的值，讓元素在一段時間內完成多個動作。
然而我們如何高質高效把動畫設計傳達給工程師呢？
這里來個小小的Tips：建議使用“案例Demo或者分鏡頭腳本+動畫屬性分解表+素材切圖”的套裝！
以下圖為例：這是一個點擊反饋的小動畫，在無法提供Demo的時候，我們可以使用”動畫屬性分解表”的方式。動畫屬性分解表可以讓工程師根據表格內填寫的數值進行動畫的編寫，會比憑空的和工程師進行交流傳達，來的更精準一些。
動畫屬性分解表示例：
動效制作手法4：SVG
SVG，
也是動效制作中不可忽略的一大熱門方法，我們定義它為擅長于線條的動畫，弊端是：IE8,Android4.2及以下支持不好。看下圖幾個例子，涉及到這
種沿著元素描邊的動畫，一般都是出自SVG之手啦，當然，它也可以實現一些復雜的動畫，類似這個表情圖片，不過實現成本是不太劃算的。
知識普及：SVG，可縮放矢量圖形（Scalable Vector Graphics）， 是被存成了 XML 格式的圖像，它有一些特別的地方：
可被多種工具讀取和修改（比如記事本）
尺寸更小，可壓縮性更強
矢量
純粹的 XML
一張SVG圖，其實是由一堆的定位錨點連線生成的。所以它可以很方便的存為文檔格式。而頁面中的引用，也是簡單的將此文本引入即可。這里必須要注意的點是：如果你想制作一個SVG動畫，請一定要使用AI工具繪制輸出矢量圖給到工程師同學哦。
動效制作手法5：Canvas
HTML5 的新元素 ，類似畫板，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。本身是沒有繪圖能力的。所有的繪制工作必須依賴 JavaScript 完成。我們定義它為擅長于繪畫的動畫。如下圖，繪制這樣一個大量元素下落的動畫效果，就是Canvas所擅長的。
Canvas可以算是SVG的堂兄弟，大部分的圖表動畫，都是由Canvas或是SVG制作而成的，二者的動畫能力相似但也有以下這些區別：
canvas是畫框，有自己固定的高寬，svg是不依賴分辨率的矢量，可以任意放大縮小。
canvas能以.jpg的格式保存圖像，svg是文本的格式保存圖像
canvas繪制的圖像不占DOM，而svg的每個圖像都是1個DOM元素
canvas適合圖像密集型的動畫，而svg不適合大量使用，例如制作飄雪等
canvas完全依賴腳本繪制作，而svg可直接使用矢量轉存生成。
動效制作手法6：Flash->Canvas
除
去上面幾種常見的手法，Flash轉Canvas的方法也是今年特別火爆的一種形式。既然提到曾經輝煌的Flash，那產出物必須離不開炫酷這個形容詞：
通過Flash cc制作復雜又精細的動畫，導成Canvas文件，動畫中的交互操作，依賴Create.js的腳步庫完成。
動效制作手法7：video
用視頻輸出非常特別的動效。關于video的魅力我們用吳亦凡H5頁面的例子，相信大家瞬間就可以明白了吧^^。
動效制作手法8：JavaScript
其實，只要是涉及到交互反饋的動畫，小至滾屏翻頁，大到重力感應等都需要js進行處理腳步的編寫。也就是說，所有的動畫特效都離不開Javascript同學的支持。市面上有很多特別的Javascript腳本庫，例如three.js，細細運用，就可以做出非同凡響的動畫效果。
最后我們再以一個簡單的表格來匯總這H5動效常見的制作手法，希望讀完本文的小伙伴們都可以在下次遇見新動畫效果時，第一時間挖掘出它背后的制作原理，好好
運用這8大手法，人人都是優秀的動效設計師。（表格中所闡述的性能損耗和實現成本僅作參考，具體動畫效果還需要具體分析，才可得知到底使用哪種方式是最適
合的。）
感謝你的閱讀，本文由騰訊ISUX版權所有
Android應用項目開發過程中，為了實現各種效果，可以使用動畫，增加畫面效果。此篇文檔介紹小Android系統中的動畫機制和各種開發者可以自己實現的方式。
動畫實現有兩種方式：第一種是xml格式文件定義實現，第二種方式是在代碼中進行實現。
逐幀動畫經常使用XML資源文件方式進行定義和聲明：
補間動畫只需要定義動畫開始與結束兩個關鍵幀，并指定動畫變化的時間與方式等 。主要有四種基本的效果：透明度、縮放、位移、旋轉。
在xml文件形式定義時，xml文件中標簽名分別如下所示：
在Java代碼中，對應的類分別為AlphaAnimation，ScaleAnimation，TranslateAnimation，RotateAnimation，此處省略不再贅述。
插值器主要是用來定義動畫變化過程中的變化速率的一個工具。在android中提供了很多類型的插值器，比如：
屬性動畫是補間動畫的增強升級版，之所以提出屬性動畫，原因是補間動畫有一些缺點，主要是：
相較于補間動畫，屬性動畫的使用范圍不在局限于view，同時還可以根據需要實現各種效果。
Animator是屬性動畫的基類，是一個抽象類。該抽象類有兩個重要的具體實現類，分別是：ValueAnimator和ObjectAnimator類。另外還會使用到Evaluator，AnimatorSet等類。
Evaluator稱之為估值器，其作用類似于之前的插值器。
AnimatorSet主要用于實現多種動畫的組合，形成組合動畫。常見的方法：
將作用對象的屬性值從初始值以整數型數值的形式過渡到結束值。有兩種實現方式：代碼形式和xml文件形式。
以xml格式為例：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<animator
android:valueFrom="0"
android:valueTo="100"
android:valueType="intType"
android:duration="3000"
android:startOffset ="1000"
android:fillBefore = "true"
android:fillAfter = "false"
android:fillEnabled= "true"
android:repeatMode= "restart"
android:repeatCount = "0"
android:interpolator="@android:anim/accelerate_interpolator"/>
<!--初始值-->
<!--結束值-->
<!--變化值類型 ：floatType & intType-->
<!--動畫持續時間（ms），必須設置，動畫才有效果-->
<!--動畫延遲開始時間（ms）-->
<!--動畫播放完后，視圖是否會停留在動畫開始的狀態，默認為true-->
<!--動畫播放完后，視圖是否會停留在動畫結束的狀態，優先于fillBefore值，默認為false-->
<!--是否應用fillBefore值，對fillAfter值無影響，默認為true-->
<!--選擇重復播放動畫模式，restart代表正序重放，reverse代表倒序回放，默認為restart|-->
<!--重放次數（所以動畫的播放次數=重放次數+1），為infinite時無限重復-->
<!--插值器，即影響動畫的播放速度,下面會詳細講-->
</set> ObjectAnimator的原理是直接對對象的屬性值進行改變操作，從而實現動畫效果 。該類繼承自ValueAnimator類，即底層的動畫實現機制是基于ValueAnimator類 。以xml形式定義為例：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<ObjectAnimator
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType"
android:duration = "800"
android:propertyName="alpha"/>
</set> 注意，以XML方式，res的文件夾名稱必須是animator，否則無法引用。
此文轉載自知乎：千鋒HTML5學院
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
