使用Move.js建立CSS3動畫

原文連接,請移步creating-css-animations-using-move-jsjavascript

第一次翻譯,若有誤解,請移步原文css

在網站上,CSS3 的過渡和動畫是當前建立輕量級動畫的首選方法。不幸的是,不少開發者發現他們本身的語法和複雜和混亂的。若是這聽起來像你本身,對你來講,或許Move.js是完美的方案。Move.js是使用簡單函數建立 CSS3 動畫的一個簡單的JavaScript庫。本教程將探討Move.js的基礎知識,並提供一個在線demo。html

基礎知識java

Move.js 提供了建立 CSS3 動畫的最簡單的 JavaScript API。讓咱們假設有一個帶類 box 的 div 元數,當鼠標 移動到 div 上面的時候咱們想從左側移動元素100個像素。在這種狀況下,咱們的代碼若是所示:css3

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

使用 Move.js 咱們能夠簡單調用 set()方法實現一樣的結果,以下:git

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

入門github

首先,訪問 Move.js GitHub page並下載最新的包,提取並拷貝 Move.js 文件到你的工做目錄。接下來,在你的html 頁面中引入該文件。完成後的頁面應該以下:web

<!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來講不是必須的:api

.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頁面看起來應該以下圖:
enter image description here
如今,讓咱們寫下第一個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能幫助你在一個地方正確的組織全部的動畫代碼。在任什麼時候候你想修復一個動畫,你就知道他在那裏。
請檢查這篇文章的source code,並閱讀下面使用css和js的有關動畫的資源

相關文章
相關標籤/搜索