Eine Einführungsanleitung zum Erstellen von CSS3-Animationen mit Move.js

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Unsere HTML-Seite sollte so aussehen:

201572284630175.jpg (787×186)

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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)

Die Methode

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

Nach dem Login kopieren

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)

Nach dem Login kopieren

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)

Nach dem Login kopieren

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)

Nach dem Login kopieren

Dieser Code fügt dem Element das folgende CSS hinzu:

transform:rotate(90deg)

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

übersetzen(x[, y])

Die

translate()-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)

Nach dem Login kopieren

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)

Nach dem Login kopieren

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)

Nach dem Login kopieren

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)

Nach dem Login kopieren

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)

Nach dem Login kopieren

end()

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

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

Nach dem Login kopieren

delay(n)

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

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

Nach dem Login kopieren

then()

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

结论

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