Panduan pengenalan untuk mencipta animasi CSS3 dengan Move.js

Rumah

hujung hadapan web

tutorial js

Panduan pengenalan untuk mencipta animasi CSS3 dengan Move.js_JavaScript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:49 PM

css3

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

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

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

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>

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

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

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>

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

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')

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)

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)

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)

Kod ini akan menambah css berikut pada elemen:

transform:rotate(90deg)

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')

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')

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)

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)

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)

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)

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)

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能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan