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

Di sebalik tabir: Apa bahasa JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript berjalan dalam penyemak imbas dan persekitaran Node.js dan bergantung pada enjin JavaScript untuk menghuraikan dan melaksanakan kod. 1) menjana pokok sintaks abstrak (AST) di peringkat parsing; 2) menukar AST ke bytecode atau kod mesin dalam peringkat penyusunan; 3) Laksanakan kod yang disusun dalam peringkat pelaksanaan.

Masa Depan Python dan JavaScript: Trend dan RamalanApr 27, 2025 am 12:21 AM

Trend masa depan Python dan JavaScript termasuk: 1. Kedua -duanya akan terus mengembangkan senario aplikasi dalam bidang masing -masing dan membuat lebih banyak penemuan dalam prestasi.

Python vs JavaScript: Persekitaran dan Alat PembangunanApr 26, 2025 am 12:09 AM

Kedua -dua pilihan Python dan JavaScript dalam persekitaran pembangunan adalah penting. 1) Persekitaran pembangunan Python termasuk Pycharm, Jupyternotebook dan Anaconda, yang sesuai untuk sains data dan prototaip cepat. 2) Persekitaran pembangunan JavaScript termasuk node.js, vscode dan webpack, yang sesuai untuk pembangunan front-end dan back-end. Memilih alat yang betul mengikut keperluan projek dapat meningkatkan kecekapan pembangunan dan kadar kejayaan projek.

Adakah JavaScript ditulis dalam C? Memeriksa buktiApr 25, 2025 am 12:15 AM

Ya, teras enjin JavaScript ditulis dalam C. 1) Bahasa C menyediakan prestasi yang efisien dan kawalan asas, yang sesuai untuk pembangunan enjin JavaScript. 2) Mengambil enjin V8 sebagai contoh, terasnya ditulis dalam C, menggabungkan kecekapan dan ciri-ciri berorientasikan objek C. 3) Prinsip kerja enjin JavaScript termasuk parsing, penyusun dan pelaksanaan, dan bahasa C memainkan peranan penting dalam proses ini.

Peranan JavaScript: Membuat Web Interaktif dan DinamikApr 24, 2025 am 12:12 AM

JavaScript adalah di tengah -tengah laman web moden kerana ia meningkatkan interaktiviti dan dinamik laman web. 1) Ia membolehkan untuk menukar kandungan tanpa menyegarkan halaman, 2) memanipulasi laman web melalui Domapi, 3) menyokong kesan interaktif kompleks seperti animasi dan drag-and-drop, 4) mengoptimumkan prestasi dan amalan terbaik untuk meningkatkan pengalaman pengguna.

C dan JavaScript: Sambungan dijelaskanApr 23, 2025 am 12:07 AM

C dan JavaScript mencapai interoperabilitas melalui webassembly. 1) Kod C disusun ke dalam modul WebAssembly dan diperkenalkan ke dalam persekitaran JavaScript untuk meningkatkan kuasa pengkomputeran. 2) Dalam pembangunan permainan, C mengendalikan enjin fizik dan rendering grafik, dan JavaScript bertanggungjawab untuk logik permainan dan antara muka pengguna.

Dari laman web ke aplikasi: Aplikasi pelbagai JavaScriptApr 22, 2025 am 12:02 AM

JavaScript digunakan secara meluas di laman web, aplikasi mudah alih, aplikasi desktop dan pengaturcaraan sisi pelayan. 1) Dalam pembangunan laman web, JavaScript mengendalikan DOM bersama -sama dengan HTML dan CSS untuk mencapai kesan dinamik dan menyokong rangka kerja seperti JQuery dan React. 2) Melalui reaktnatif dan ionik, JavaScript digunakan untuk membangunkan aplikasi mudah alih rentas platform. 3) Rangka kerja elektron membolehkan JavaScript membina aplikasi desktop. 4) Node.js membolehkan JavaScript berjalan di sisi pelayan dan menyokong permintaan serentak yang tinggi.

Python vs JavaScript: Gunakan Kes dan Aplikasi MembandingkanApr 21, 2025 am 12:01 AM

Python lebih sesuai untuk sains data dan automasi, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python berfungsi dengan baik dalam sains data dan pembelajaran mesin, menggunakan perpustakaan seperti numpy dan panda untuk pemprosesan data dan pemodelan. 2. Python adalah ringkas dan cekap dalam automasi dan skrip. 3. JavaScript sangat diperlukan dalam pembangunan front-end dan digunakan untuk membina laman web dinamik dan aplikasi satu halaman. 4. JavaScript memainkan peranan dalam pembangunan back-end melalui Node.js dan menyokong pembangunan stack penuh.

See all articles