hujung hadapan web
tutorial js
Panduan pengenalan untuk mencipta animasi CSS3 dengan Move.js_JavaScript
Panduan pengenalan untuk mencipta animasi CSS3 dengan Move.js_JavaScript
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:
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)
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])
Kaedahtranslate() 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能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1387
52
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Jun 01, 2022 pm 07:15 PM
Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".
Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3
Apr 25, 2022 pm 04:52 PM
Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".
Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!
Jun 10, 2022 pm 01:00 PM
Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.
Bagaimana untuk menetapkan kelajuan putaran animasi dalam css3
Apr 28, 2022 pm 04:32 PM
Dalam CSS3, anda boleh menggunakan atribut "animation-timing-function" untuk menetapkan kelajuan putaran animasi Atribut ini digunakan untuk menentukan cara animasi akan melengkapkan kitaran dan menetapkan lengkung kelajuan animasi. animation-timing-function: nilai atribut kelajuan;}".
Adakah kesan animasi css3 mempunyai ubah bentuk?
Apr 28, 2022 pm 02:20 PM
Kesan animasi dalam css3 mempunyai ubah bentuk; anda boleh menggunakan "animasi: atribut animasi @keyframes ..{..{transform: transformation attribute}}" untuk mencapai kesan animasi ubah bentuk Atribut animasi digunakan untuk menetapkan gaya animasi, dan atribut transform digunakan untuk menetapkan gaya ubah bentuk.
