搜尋
首頁web前端js教程用Move.js配合創建CSS3動畫的入門指引_JavaScript

在網站上,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
css怎么隐藏元素但不占空间css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

css3如何实现鼠标点击图片放大css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3什么是自适应布局css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”,是指可以自动识别屏幕宽度、并做出相应调整的网页布局;这样的网页能够兼容多个不同的终端,而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的,能够为使用不同终端的用户提供很好的用户体验。

css3动画效果有变形吗css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。

css3怎么设置动画旋转速度css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中,可以利用“animation-timing-function”属性设置动画旋转速度,该属性用于指定动画将如何完成一个周期,设置动画的速度曲线,语法为“元素{animation-timing-function:速度属性值;}”。

css3线性渐变可以实现三角形吗css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形;只需创建一个45度的线性渐变,设置渐变色为两种固定颜色,一个是三角形的颜色,另一个为透明色即可,语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

一文了解CSS3中的新特性 ::target-text 选择器一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器,聊聊该选择器的作用和使用方法,希望对大家有所帮助!

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。