摘要：是使用簡(jiǎn)單函數(shù)創(chuàng)建動(dòng)畫的一個(gè)簡(jiǎn)單的庫(kù)?；A(chǔ)知識(shí)提供了創(chuàng)建動(dòng)畫的最簡(jiǎn)單的。他用于分割動(dòng)畫為兩個(gè)集合，并按順序執(zhí)行。如下動(dòng)畫被分為兩步，通過方法實(shí)現(xiàn)分割使用創(chuàng)建復(fù)雜動(dòng)畫在本教程中，我們已經(jīng)寫了很多基本的動(dòng)畫來了解各個(gè)方法。

原文鏈接，請(qǐng)移步creating-css-animations-using-move-js

第一次翻譯，如有誤解，請(qǐng)移步原文

在網(wǎng)站上，CSS3 的過渡和動(dòng)畫是當(dāng)前創(chuàng)建輕量級(jí)動(dòng)畫的首選方法。不幸的是，很多開發(fā)者發(fā)現(xiàn)他們自己的語法和復(fù)雜和混亂的。如果這聽起來像你自己，對(duì)你來說，或許Move.js是完美的方案。Move.js是使用簡(jiǎn)單函數(shù)創(chuàng)建 CSS3 動(dòng)畫的一個(gè)簡(jiǎn)單的JavaScript庫(kù)。本教程將探討Move.js的基礎(chǔ)知識(shí)，并提供一個(gè)在線demo。

基礎(chǔ)知識(shí)

Move.js 提供了創(chuàng)建 CSS3 動(dòng)畫的最簡(jiǎn)單的 JavaScript API。讓我們假設(shè)有一個(gè)帶類 box 的 div 元數(shù)，當(dāng)鼠標(biāo) 移動(dòng)到 div 上面的時(shí)候我們想從左側(cè)移動(dòng)元素100個(gè)像素。在這種情況下，我們的代碼如果所示：

.box {
  -webkit-transition: margin 1s;
  -moz-transition: margin 1s;
  -o-transition: margin 1s;
  transition: margin 1s;
}
.box:hover {
  margin-left: 100px;
}

使用 Move.js 我們可以簡(jiǎn)單調(diào)用 set()方法實(shí)現(xiàn)同樣的結(jié)果，如下：

move(".box")
  .set("margin-left", 100)
  .end();

入門

首先，訪問 Move.js GitHub page并下載最新的包，提取并拷貝 Move.js 文件到你的工作目錄。接下來，在你的html 頁(yè)面中引入該文件。完成后的頁(yè)面應(yīng)該如下：

  
    
     
  
  
    Play
    

    
  

我們 已經(jīng)定義了一個(gè)類為 box 的 div 元數(shù)和一個(gè)ID為playButton的a鏈接以用于我們的demo。讓我們創(chuàng)建一個(gè)styles.css文件并添加下面的樣式。注意下面的樣式對(duì)于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頁(yè)面看起來應(yīng)該如下圖：

現(xiàn)在，讓我們寫下第一個(gè)Move.js片段。我們需要附加一個(gè)onclick事件處理程序到palyButton上，并在單擊的時(shí)候使其向右移動(dòng)。事件處理程序的JavaScript代碼如下，這段代碼添加 transform:translateX(300px) 到 box 元數(shù)上：

document.getElementById("playButton").onclick = function(e) {
  move(".box")
    .x(300)
    .end();
};

添加Move.js代碼后的完整代碼如下：

HTML

  
    
     
  
  
    Play
    

    
    
  

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()方法?，F(xiàn)在，讓我們了解Move.js的其他方法。

set()方法用于設(shè)置元素的css屬性，他帶有兩個(gè)參數(shù)：css屬性和屬性值。示例用法：

.set("background-color", "#CCC")
.set("margin-left", 500)
.set("color", "#222")

add()方法用來增加其已經(jīng)設(shè)置的屬性值。該方法必須數(shù)值型值，以便用來增加。該方法必須有兩個(gè)參數(shù)：屬性值和其增量：

.add("margin-left", 200)

在前面的代碼片段調(diào)用后，會(huì)在其值的基礎(chǔ)上增加200px。

sub()是add()的逆過程，他接受兩個(gè)相同的參數(shù)，但其值將從屬性值中減去。

.sub("margin-left", 200)

正如名稱所暗示的，該方法通過提供的數(shù)值作為參數(shù)來旋轉(zhuǎn)元素。當(dāng)方法被調(diào)用的時(shí)候通過附加到元素的 transform 屬性上。下面的代碼旋轉(zhuǎn)元素90deg：

.rotate(90)

這段代碼將添加如下css到元素上：

transform:rotate(90deg)

通過該方法，你可以設(shè)置動(dòng)畫的播放時(shí)間。例如：如下代碼，2秒鐘將元素從左側(cè)往右移動(dòng)200px：

.set("margin-left", 200)
.duration("2s")

另一例子，下面的代碼。Move.js在2秒鐘內(nèi)將會(huì)修改元素的margin屬性，設(shè)置背景色，同時(shí)將元素旋轉(zhuǎn)90度。

.set("margin-left", 200)
.set("background-color", "#CCC")
.rotate(90)
.duration("2s")

translate()方法用于修改元素的默認(rèn)位置，使用提供的坐標(biāo)作為參數(shù)，如果僅設(shè)置一個(gè)參數(shù)，將作為x坐標(biāo)，如果提供了第二個(gè)參數(shù)，將作為y坐標(biāo)：

.translate(200, 400)

x()方法用于調(diào)整元素的x坐標(biāo)，y()方法用于調(diào)整元素的y坐標(biāo)。兩個(gè)方法的參數(shù)可以是正數(shù)也可以是負(fù)數(shù)，如下：

.x(300)
.y(-20)

skew()用于調(diào)整一個(gè)相對(duì)于x和y軸的角度。該方法可以被分為skewX(deg)和skewY(deg)兩個(gè)方法：

.skew(30, 40)

該方法用于放大或壓縮元素的大小，按照提供的每一個(gè)值，將調(diào)用transform的scale方法：

.scale(3, 3)

如果你使用過CSS3過渡，你就了解ease函數(shù)作用在transition屬性上。他指定了過渡的行為。每個(gè) ease 函數(shù)是 in、out、in-out、snap、cubic-bezeir等。這些函數(shù)可以通過Move.js提供的ease()方法得到調(diào)用。例如：

.ease("in").x(400)
.ease("cubic-bezier(0,1,1,0)").x(400)

該方法用于Move.js代碼片段的結(jié)束，他標(biāo)識(shí)動(dòng)畫的結(jié)束。技術(shù)上，該方法觸發(fā)動(dòng)畫的播放。該方法接受一個(gè)可選的callback回掉函數(shù)。代碼如下：

move(".box")
  .set("background-color", "red")
  .duration(1000)
  .end(function() {
    alert("Animation Over!");
  });

正如方法所暗示的，該方法提供一個(gè)時(shí)間的數(shù)值作為動(dòng)畫的延時(shí)。如下：

move(".box")
  .set("background-color", "red")
  .delay(1000)
  .end();

該方法是Move.js中一個(gè)最重要的函數(shù)。他用于分割動(dòng)畫為兩個(gè)集合，并按順序執(zhí)行。如下動(dòng)畫被分為兩步，通過then()方法實(shí)現(xiàn)分割：

move(".box")
  .set("background-color", "red")
  .x(500)
  .then()
  .y(400)
  .set("background-color", "green")
  .end();

## 使用Move.js創(chuàng)建復(fù)雜動(dòng)畫 ##

在本教程中，我們已經(jīng)寫了很多基本的 動(dòng)畫來了解各個(gè)方法。接下來，我們使用Move.js可以很容易的創(chuàng)建復(fù)雜的動(dòng)畫。該demo闡述了Move.js的大部分內(nèi)容，在demo page上我們創(chuàng)建了動(dòng)畫的描述，代碼如下：

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();

希望本篇教程能帶給你關(guān)于Move.js是什么的清晰的認(rèn)識(shí)和如何創(chuàng)建CSS3動(dòng)畫。使用Movejs能幫助你在一個(gè)地方正確的組織所有的動(dòng)畫代碼。在任何時(shí)候你想修復(fù)一個(gè)動(dòng)畫，你就知道他在那里。
請(qǐng)檢查這篇文章的source code，并閱讀下面使用css和js的有關(guān)動(dòng)畫的資源

CSS3 Animations 101: What are Animations?

The Animation Keyframe Gotcha

CSS3 Animation and the JavaScript API