Web-Frontend
js-Tutorial
Eine Einführungsanleitung zum Erstellen von CSS3-Animationen mit Move.js_JavaScript
Eine Einführungsanleitung zum Erstellen von CSS3-Animationen mit Move.js_JavaScript
Auf Websites sind CSS3-Übergänge und -Animationen derzeit die bevorzugte Methode zum Erstellen einfacher Animationen. Leider empfinden viele Entwickler ihre eigene Syntax als komplex und verwirrend. Wenn das nach Ihnen klingt, ist Move.js vielleicht die perfekte Lösung für Sie. Move.js ist eine einfache JavaScript-Bibliothek zum Erstellen von CSS3-Animationen mit einfachen Funktionen. In diesem Tutorial werden die Grundlagen von Move.js erläutert und eine Online-Demo bereitgestellt.
Grundkenntnisse
Move.js bietet die einfachste JavaScript-API zum Erstellen von CSS3-Animationen. Nehmen wir an, wir haben ein Div mit einer Klassenbox und möchten das Element 100 Pixel von links verschieben, wenn die Maus über das Div bewegt wird. In diesem Fall würde unser Code so aussehen:
.box {
-webkit-transition: margin 1s;
-moz-transition: margin 1s;
-o-transition: margin 1s;
transition: margin 1s;
}
.box:hover {
margin-left: 100px;
}
Mit Move.js können wir einfach die Methode set() aufrufen, um das gleiche Ergebnis zu erzielen, wie folgt:
move('.box')
.set('margin-left', 100)
.end();
Erste Schritte
Besuchen Sie zunächst die Move.js-GitHub-Seite und laden Sie das neueste Paket herunter. Extrahieren Sie die Move.js-Datei und kopieren Sie sie in Ihr Arbeitsverzeichnis. Als nächstes fügen Sie diese Datei in Ihre HTML-Seite ein. Die fertige Seite sollte so aussehen:
<!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>
Wir haben für unsere Demo ein div-Element mit Klassenbox und einen Link mit der ID playButton definiert. Lassen Sie uns eine Datei „styles.css“ erstellen und die folgenden Stile hinzufügen. Beachten Sie, dass die folgenden Stile für Move.js nicht erforderlich sind:
.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;
}
Unsere HTML-Seite sollte so aussehen:
Jetzt schreiben wir unser erstes Move.js-Snippet. Wir müssen einen Onclick-Ereignishandler an den PlayButton anhängen und ihn beim Klicken nach rechts verschieben. Der JavaScript-Code des Event-Handlers lautet wie folgt: Dieser Code fügt transform:translateX(300px) zum Box-Element hinzu:
document.getElementById('playButton').onclick = function(e) {
move('.box')
.x(300)
.end();
};
Der vollständige Code nach dem Hinzufügen des Move.js-Codes lautet wie folgt:
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-Methode
In der vorherigen Demo haben wir die x()-Methode gesehen. Lassen Sie uns nun die anderen Methoden von Move.js verstehen.
set(prop, val)
set() wird verwendet, um das CSS-Attribut des Elements festzulegen. Sie benötigt zwei Parameter: CSS-Attribut und Attributwert. Beispielverwendung:
.set('background-color', '#CCC')
.set('margin-left', 500)
.set('color', '#222')
add(prop, val)
Die Methode add() wird verwendet, um den bereits festgelegten Attributwert hinzuzufügen. Diese Methode muss einen numerischen Wert haben, um für Inkremente verwendet zu werden. Diese Methode muss zwei Parameter haben: den Attributwert und sein Inkrement:
.add('margin-left', 200)
Nachdem das vorherige Code-Snippet aufgerufen wurde, werden 200 Pixel zu seinem Wert hinzugefügt.
sub(prop, val)
sub() ist der umgekehrte Prozess von add(). Es akzeptiert die gleichen zwei Parameter, aber sein Wert wird vom Attributwert subtrahiert.
.sub('margin-left', 200)
drehen (Grad)
Wie der Name schon sagt, dreht diese Methode ein Element, indem sie einen numerischen Wert als Parameter bereitstellt. Durch Anhängen an die Transformationseigenschaft des Elements, wenn die Methode aufgerufen wird. Der folgende Code dreht das Element um 90 Grad:
.rotate(90)
Dieser Code fügt dem Element das folgende CSS hinzu:
transform:rotate(90deg)
Dauer(n)
Mit dieser Methode können Sie die Wiedergabezeit der Animation festlegen. Beispiel: Der folgende Code verschiebt das Element in 2 Sekunden um 200 Pixel von links nach rechts:
.set('margin-left', 200)
.duration('2s')
Ein weiteres Beispiel, der Code unten. Move.js ändert das Randattribut des Elements, legt die Hintergrundfarbe fest und dreht das Element innerhalb von 2 Sekunden um 90 Grad.
.set('margin-left', 200)
.set('background-color', '#CCC')
.rotate(90)
.duration('2s')
übersetzen(x[, y])
Dietranslate()-Methode wird verwendet, um die Standardposition des Elements zu ändern, wobei die bereitgestellten Koordinaten als Parameter verwendet werden. Wenn nur ein Parameter festgelegt ist, wird dieser als x-Koordinate verwendet wird als Y-Koordinate verwendet:
.translate(200, 400)
x() und y()
Die x()-Methode wird verwendet, um die x-Koordinate des Elements anzupassen, und die y()-Methode wird verwendet, um die y-Koordinate des Elements anzupassen. Die Parameter der beiden Methoden können wie folgt positiv oder negativ sein:
.x(300) .y(-20)
Schiefe(x, y)
skew() wird verwendet, um einen Winkel relativ zur x- und y-Achse anzupassen. Diese Methode kann in zwei Methoden unterteilt werden: skewX(deg) und skewY(deg):
.skew(30, 40)
Skala(x, y)
Diese Methode wird verwendet, um die Größe des Elements zu vergrößern oder zu komprimieren. Für jeden bereitgestellten Wert wird die Skalierungsmethode der Transformation aufgerufen:
.scale(3, 3)
ease(fn)
Wenn Sie CSS3-Übergänge verwendet haben, wissen Sie, dass die Ease-Funktion für das Übergangsattribut funktioniert. Er präzisiert den Akt des Übergangs. Jede Ease-Funktion ist „In“, „Out“, „In-Out“, „Snap“, „Cubic-Bezeir“ usw. Diese Funktionen können über die von Move.js bereitgestellte Methode „ease()“ aufgerufen werden. Zum Beispiel:
.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能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1392
52
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
So implementieren Sie Spitzenränder in CSS3
Sep 16, 2022 pm 07:11 PM
In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".
So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3
Apr 25, 2022 pm 04:52 PM
Implementierungsmethode: 1. Verwenden Sie den Selektor „:active“, um den Status des Mausklicks auf das Bild auszuwählen. 2. Verwenden Sie das Transformationsattribut und die Funktion „scale()“, um den Bildvergrößerungseffekt zu erzielen. Die Syntax „img:active {transform : Skala(x-Achsen-Vergrößerung, y-Achsen-Vergrößerung);}".
Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind!
Jun 10, 2022 pm 01:00 PM
Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.
So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest
Apr 28, 2022 pm 04:32 PM
In CSS3 können Sie das Attribut „animation-timing-function“ verwenden, um die Rotationsgeschwindigkeit der Animation festzulegen. Dieses Attribut wird verwendet, um anzugeben, wie die Animation einen Zyklus abschließt und die Geschwindigkeitskurve der Animation festlegt. Animation-Timing-Funktion: Geschwindigkeitsattributwert;}".
Hat der CSS3-Animationseffekt eine Verformung?
Apr 28, 2022 pm 02:20 PM
Der Animationseffekt in CSS3 verfügt über eine Verformung. Sie können „Animation: Animationsattribut @keyframes ..{..{transform: Transformationsattribut}}“ verwenden, um den Animationsstil festzulegen Das Transformationsattribut wird zum Festlegen des Verformungsstils verwendet.
