用Move.js配合創建CSS3動畫的入門指引_JavaScript-js教程-PHP中文網

首頁

web前端

js教程

用Move.js配合創建CSS3動畫的入門指引_JavaScript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:49 PM

css3

在網站上，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頁面看起來應該如下圖：

201572284630175.jpg (787×186)

現在，讓我們寫下第一個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() 和 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能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。