在網站上，CSS3 的過渡和動畫是當前建立輕量級動畫的首選方法。不幸的是，很多開發人員發現他們自己的文法和複雜和混亂的。如果這聽起來像你自己，對你來說，或許Move.js是完美的方案。Move.js是使用簡單函數建立 CSS3 動畫的一個簡單的JavaScript庫。本教程將探討Move.js的基礎知識，並提供一個線上demo。
基礎知識
Move.js 提供了建立 CSS3 動畫的最簡單的 JavaScript API。讓我們假設有一個帶類 box 的 div 元數，當滑鼠 移動到 div 上面的時候我們想從左側移動元素100個像素。在這種情況下，我們的代碼如果所示：
.box { -webkit-transition: margin 1s; -moz-transition: margin 1s; -o-transition: margin 1s; transition: margin 1s;}.box:hover { margin-left: 100px;}
使用 Move.js 我們可以簡單調用 set()方法實現同樣的結果，如下：
move('.box') .set('margin-left', 100) .end();
入門
首先，訪問 Move.js GitHub page並下載最新的包，提取並拷貝 Move.js 檔案到你的工作目錄。接下來，在你的html 頁面中引入該檔案。完成後的頁面應該如下：
<!DOCTYPE html><html> <head> <title>Move.js Demo</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <a href="#" id="playButton">Play</a> <div class="box"></div> <script type="text/javascript" src="js/move.js"></script> </body></html>
我們 已經定義了一個類為 box 的 div 元數和一個ID為playButton的a連結以用於我們的demo。讓我們建立一個styles.css檔案並添加下面的樣式。注意下面的樣式對於Move.js來說不是必須的：
.box { margin: 10px; width: 100px; height: 100px; background: #7C9DD4; box-shadow: 5px 5px 0px #D1D1D1;}#playButton { display: block; font-size: 20px; margin: 20px 10px; font-weight: bold; color: #222; text-decoration: none;}
我們的html頁面看起來應該如下圖：
現在，讓我們寫下第一個Move.js片段。我們需要附加一個onclick事件處理常式到palyButton上，並在單擊的時候使其向右移動。事件處理常式的JavaScript代碼如下，這段代碼添加 transform:translateX(300px) 到 box 元數上：
document.getElementById('playButton').onclick = function(e) { move('.box') .x(300) .end();};
添加Move.js代碼後的完整代碼如下：
HTML
<!DOCTYPE html><html> <head> <title>Move.js Demo</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <a href="#" id="playButton">Play</a> <div class="box"></div> <script type="text/javascript" src="js/move.js"></script> <script type="text/javascript"> document.getElementById('playButton').onclick = function(e){ move('.box') .x(300) .end(); }; </script> </body></html>
CSS
.box { margin-left: 10px; width: 100px; height: 100px; background: #7C9DD4; box-shadow: 5px 5px 0px #D1D1D1;}#playButton { display: block; font-size: 20px; margin: 20px 10px; font-weight: bold; color: #222; text-decoration: none;}
Move.js的方法
在前面的demo中，我們看到了x()方法。現在，讓我們瞭解Move.js的其他方法。
set(prop, val)
set()方法用於設定元素的css屬性，他帶有兩個參數：css屬性和屬性值。樣本用法：
.set('background-color', '#CCC').set('margin-left', 500).set('color', '#222')
add(prop, val)
add()方法用來增加其已經設定的屬性值。該方法必須數值型值，以便用來增加。該方法必須有兩個參數：屬性值和其增量：
.add('margin-left', 200)
在前面的程式碼片段調用後，會在其值的基礎上增加200px。
sub(prop, val)
sub()是add()的逆過程，他接受兩個相同的參數，但其值將從屬性值中減去。
.sub('margin-left', 200)
rotate(deg)
正如名稱所暗示的，該方法通過提供的數值作為參數來旋轉元素。當方法被調用的時候通過附加到元素的 transform 屬性上。下面的代碼旋轉元素90deg：
.rotate(90)
這段代碼將添加如下css到元素上：
transform:rotate(90deg)
duration(n)
通過該方法，你可以設定動畫的播放時間。例如：如下代碼，2秒鐘將元素從左側往右移動200px：
.set('margin-left', 200).duration('2s')
另一例子，下面的代碼。Move.js在2秒鐘內將會修改元素的margin屬性，設定背景色，同時將元素旋轉90度。
.set('margin-left', 200).set('background-color', '#CCC').rotate(90).duration('2s')
translate(x[, y])
translate()方法用於修改元素的預設位置，使用提供的座標作為參數，如果僅設定一個參數，將作為x座標，如果提供了第二個參數，將作為y座標：
.translate(200, 400)
x() and y()
x()方法用於調整元素的x座標，y()方法用於調整元素的y座標。兩個方法的參數可以是正數也可以是負數，如下：
.x(300).y(-20)
skew(x, y)
skew()用於調整一個相對於x和y軸的角度。該方法可以被分為skewX(deg)和skewY(deg)兩個方法：
.skew(30, 40)
scale(x, y)
該方法用於放大或壓縮元素的大小，按照提供的每一個值，將調用transform的scale方法：
.scale(3, 3)
ease(fn)
如果你使用過CSS3過渡，你就瞭解ease函數作用在transition屬性上。他指定了過渡的行為。每個 ease 函數是 in、out、in-out、snap、cubic-bezeir等。這些函數可以通過Move.js提供的ease()方法得到調用。例如：
.ease('in').x(400).ease('cubic-bezier(0,1,1,0)').x(400)
end()
該方法用於Move.js程式碼片段的結束，他標識動畫的結束。技術上，該方法觸發動畫的播放。該方法接受一個可選的callback回掉函數。代碼如下：
move('.box') .set('background-color', 'red') .duration(1000) .end(function() { alert("Animation Over!"); });
delay(n)
正如方法所暗示的，該方法提供一個時間的數值作為動畫的延時。如下：
move('.box') .set('background-color', 'red') .delay(1000) .end();
then()
該方法是Move.js中一個最重要的函數。他用於分割動畫為兩個集合，並按順序執行。如下動畫被分為兩步，通過then()方法實現分割：
move('.box') .set('background-color', 'red') .x(500) .then() .y(400) .set('background-color', 'green') .end();
## 使用Move.js建立複雜動畫 ##
在本教程中，我們已經寫了很多基本的 動畫來瞭解各個方法。接下來，我們使用Move.js可以很容易的建立複雜的動畫。該demo闡述了Move.js的大部分內容，在demo page
上我們建立了動畫的描述，代碼如下：
move('.square') .to(500, 200) .rotate(180) .scale(.5) .set('background-color', '#FF0551') .set('border-color', 'black') .duration('3s') .skew(50, -10) .then() .set('opacity', 0) .duration('0.3s') .scale(0.1) .pop() .end();
結論
希望本篇教程能帶給你關於Move.js是什麼的清晰的認識和如何建立CSS3動畫。使用Movejs能協助你在一個地方正確的組織所有的動畫代碼。在任何時候你想修複一個動畫，你就知道他在那裡。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
