使用Move.js創建CSS3動畫

MASAILA 發布于2019-08-21 12:13 / 1712人閱讀

摘要：是使用簡單函數創建動畫的一個簡單的庫。基礎知識提供了創建動畫的最簡單的。他用于分割動畫為兩個集合，并按順序執行。如下動畫被分為兩步，通過方法實現分割使用創建復雜動畫在本教程中，我們已經寫了很多基本的動畫來了解各個方法。

原文鏈接，請移步creating-css-animations-using-move-js

第一次翻譯，如有誤解，請移步原文

在網站上，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 頁面中引入該文件。完成后的頁面應該如下：



  
    Move.js Demo
     
  
  
    Play

我們已經定義了一個類為 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



  
    Move.js Demo
     
  
  
    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()方法。現在，讓我們了解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的有關動畫的資源

CSS3 Animations 101: What are Animations?

The Animation Keyframe Gotcha

CSS3 Animation and the JavaScript API

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87505.html

move.js操作CSS3動畫

摘要：是一款簡單的支持動畫的庫，對于對的操作不是很熟悉的人來說，使用提供的方法操作動畫更簡單方便。要想使用提供的方法，首先應在我們的頁面中引入使用操作動畫樣式注意的位置應該在中，并且緊放在的標簽的上一行，放在其他地方將會出錯。 move.js是一款簡單的支持CSS3動畫的JavaScript庫，對于對CSS3的操作不是很熟悉的人來說，使用move.js提供的方法操作CSS3動畫更簡單方便。 ...

novo 2019-08-20 12:30 評論0 收藏0
move.js操作CSS3動畫

摘要：是一款簡單的支持動畫的庫，對于對的操作不是很熟悉的人來說，使用提供的方法操作動畫更簡單方便。要想使用提供的方法，首先應在我們的頁面中引入使用操作動畫樣式注意的位置應該在中，并且緊放在的標簽的上一行，放在其他地方將會出錯。 move.js是一款簡單的支持CSS3動畫的JavaScript庫，對于對CSS3的操作不是很熟悉的人來說，使用move.js提供的方法操作CSS3動畫更簡單方便。 ...

ethernet 2019-08-01 15:58 評論0 收藏0
【譯】常見的10個JavaScript動畫函數庫

摘要：四是一個很小的函數庫，能簡單而優雅的支持五用動畫徽章的方式激活你的網站圖標。你可以自定義動畫類型位置背景顏色和文本顏色六一個簡單的文本動畫插件，結合了一些極好的函數庫，目的是為應用動畫的任何文本提供一個簡單易用的插件。一、Snap.svg SVG是一種創建交互式動畫非常棒的方式，獨立的分辨率的矢量圖形在任何大小的屏幕上看起來效果都很好。Snap.svg庫使操作SVG變得更jQuer...

Mr_zhang 2019-08-21 10:29 評論0 收藏0
可能是最全的前端動效庫匯總

摘要：非常的龐大，而且它是完全為設計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一。可能是創建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現實生活中的物理運動碰撞慣性動畫庫。收集日期為2019-02-28，★代表當時的該項目在github的star數量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫，是許多基礎動...

afishhhhh 2019-05-23 16:24 評論0 收藏0
GitHub 值得收藏的前端項目[每月更新...]

摘要：也是一款優秀的響應式框架站點所使用的一套框架為微信服務量身設計的一套框架一組很小的，響應式的組件，你可以在網頁的項目上到處使用一個可定制的文件，使瀏覽器呈現的所有元素，更一致和符合現代標準。 GitHub 值得收藏的前端項目整理與收集的一些比較優秀github項目，方便自己閱讀，順便分享出來，大家一起學習，本篇文章會持續更新，版權歸原作者所有。歡迎github star與fork 預...

maxmin 2019-08-29 16:07 評論0 收藏0