Panduan pengenalan untuk mencipta animasi CSS3 dengan Move.js

Di tapak web, peralihan dan animasi CSS3 kini merupakan kaedah pilihan untuk mencipta animasi ringan. Malangnya, ramai pembangun mendapati kompleks sintaks mereka sendiri dan mengelirukan. Jika ini terdengar seperti anda, mungkin Move.js ialah penyelesaian yang sesuai untuk anda. Move.js ialah perpustakaan JavaScript mudah untuk mencipta animasi CSS3 menggunakan fungsi mudah. Tutorial ini akan meneroka asas Move.js dan menyediakan demo dalam talian.

Pengetahuan asas

Move.js menyediakan API JavaScript yang paling mudah untuk mencipta animasi CSS3. Katakan kita mempunyai div dengan kotak kelas dan kita mahu mengalihkan elemen 100 piksel dari kiri apabila tetikus bergerak ke atas div. Dalam kes ini, kod kami akan kelihatan seperti ini:

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

Salin selepas log masuk

Menggunakan Move.js kita boleh memanggil kaedah set() untuk mencapai hasil yang sama, seperti berikut:

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

Salin selepas log masuk

Bermula

Pertama, lawati halaman Move.js GitHub dan muat turun pakej terbaharu dan salin fail Move.js ke direktori kerja anda. Seterusnya, masukkan fail ini dalam halaman html anda. Halaman yang lengkap sepatutnya kelihatan seperti ini:

<!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>

Salin selepas log masuk

Kami telah menentukan elemen div dengan kotak kelas dan pautan dengan ID playButton untuk demo kami. Mari kita cipta fail styles.css dan tambahkan gaya berikut. Ambil perhatian bahawa gaya berikut tidak diperlukan untuk 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;
}

Salin selepas log masuk

Halaman html kami sepatutnya kelihatan seperti ini:

201572284630175.jpg (787×186)

Sekarang, mari tulis coretan Move.js kami yang pertama. Kami perlu melampirkan pengendali acara onclick pada playButton dan mengalihkannya ke kanan apabila diklik. Kod JavaScript pengendali acara adalah seperti berikut Kod ini menambahkan transform:translateX(300px) pada elemen kotak:

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

Salin selepas log masuk

Kod lengkap selepas menambah kod Move.js adalah seperti berikut:

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

Kaedah Move.js

Dalam demo sebelumnya, kami melihat kaedah x(). Sekarang, mari kita fahami kaedah lain Move.js.
set(prop, val)

Kaedah

set() digunakan untuk menetapkan atribut css elemen. Ia memerlukan dua parameter: atribut css dan nilai atribut. Contoh penggunaan:

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

Salin selepas log masuk

tambah(prop, val)

Kaedah add() digunakan untuk menambah nilai atribut yang telah ditetapkan. Kaedah ini mesti mempunyai nilai berangka untuk digunakan untuk kenaikan. Kaedah ini mesti mempunyai dua parameter: nilai atribut dan kenaikannya:

.add('margin-left', 200)

Salin selepas log masuk

Selepas coretan kod sebelumnya dipanggil, 200px akan ditambahkan pada nilainya.
sub(prop, val)

sub() ialah proses songsang add(). Ia menerima dua parameter yang sama, tetapi nilainya akan ditolak daripada nilai atribut.

.sub('margin-left', 200)

Salin selepas log masuk

putar(deg)

Seperti namanya, kaedah ini memutarkan elemen dengan memberikan nilai berangka sebagai parameter. Dengan melampirkan pada sifat transformasi elemen apabila kaedah dipanggil. Kod berikut memutarkan elemen 90deg:

.rotate(90)

Salin selepas log masuk

Kod ini akan menambah css berikut pada elemen:

transform:rotate(90deg)

Salin selepas log masuk

tempoh(n)

Dengan kaedah ini, anda boleh menetapkan masa main balik animasi. Contohnya: Kod berikut mengalihkan elemen 200px dari kiri ke kanan dalam masa 2 saat:

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

Salin selepas log masuk

Contoh lain, kod di bawah. Move.js akan mengubah suai atribut margin elemen, menetapkan warna latar belakang dan memutar elemen 90 darjah dalam masa 2 saat.

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

Salin selepas log masuk

terjemah(x[, y])

Kaedah

translate() digunakan untuk mengubah suai kedudukan lalai elemen, menggunakan koordinat yang disediakan sebagai parameter Jika hanya satu parameter ditetapkan, ia akan digunakan sebagai koordinat x Jika parameter kedua disediakan akan digunakan sebagai koordinat y:

.translate(200, 400)

Salin selepas log masuk

x() dan y()

Kaedah x() digunakan untuk melaraskan koordinat x unsur, dan kaedah y() digunakan untuk melaraskan koordinat y bagi elemen. Parameter kedua-dua kaedah boleh positif atau negatif, seperti berikut:

.x(300)
.y(-20)

Salin selepas log masuk

condong(x, y)

skew() digunakan untuk melaraskan sudut berbanding paksi x dan y. Kaedah ini boleh dibahagikan kepada dua kaedah: skewX(deg) dan skewY(deg):

.skew(30, 40)

Salin selepas log masuk

skala(x, y)

Kaedah ini digunakan untuk membesarkan atau memampatkan saiz elemen Untuk setiap nilai yang disediakan, kaedah skala transformasi akan dipanggil:

.scale(3, 3)

Salin selepas log masuk

kemudahan(fn)

Jika anda telah menggunakan peralihan CSS3, anda tahu bahawa fungsi kemudahan berfungsi pada atribut peralihan. Dia menentukan tindakan peralihan. Setiap fungsi kemudahan adalah masuk, keluar, masuk-keluar, snap, cubic-bezeir, dsb. Fungsi ini boleh dipanggil melalui kaedah ease() yang disediakan oleh Move.js. Contohnya:

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

Salin selepas log masuk

end()

该方法用于Move.js代码片段的结束，他标识动画的结束。技术上，该方法触发动画的播放。该方法接受一个可选的callback回掉函数。代码如下：

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

Salin selepas log masuk

delay(n)

正如方法所暗示的，该方法提供一个时间的数值作为动画的延时。如下：

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

Salin selepas log masuk

then()

该方法是Move.js中一个最重要的函数。他用于分割动画为两个集合，并按顺序执行。如下动画被分为两步，通过then()方法实现分割：

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

Salin selepas log masuk

## 使用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();

Salin selepas log masuk

结论

希望本篇教程能带给你关于Move.js是什么的清晰的认识和如何创建CSS3动画。使用Movejs能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。