Ein Beispiel für die zweidimensionale Animationsproduktion mit H5+JS

Heute stelle ich ein Plug-in two.js vor, das im Internet nicht häufig verwendet wird. Als ich anfing zu lernen, stellte ich fest, dass es im Internet kein geeignetes Tutorial gab. Ich werde die grundlegende Bedienung hier veröffentlichen

two.js ist eine Webseite. Zweidimensionale Zeichensoftware kann verschiedene benutzerdefinierte Animationseffekte in einem bestimmten Bereich erzeugen.

Die Download-URL lautet wie folgt:

Klasse1:

1: Verwendung:

Fügen Sie zuerst die js-Datei in die Seite ein:

    <script src="js/two.js" type="text/javascript" charset="utf-8"></script>

Öffnen Sie die Webkonsolenkonsole und geben Sie Two If ein Array ein zurückgegeben wird, beweist es, dass es wirksam geworden ist, wie in der Abbildung gezeigt:

Erstellen Sie ein Div als Auswahl

<div id="draw-shapes"></div>
        <style type="text/css">
            #draw-shapes{
                border: 1px  solid blue;
                width: 400px;
                height: 300px;
                background-color: green;
            }            </style>

Wählen Sie das obige Div in JS aus

var elem = document.getElementById('draw-shapes');//选中页面上的div

Zweitens: Erstellen Sie Raum und Formen im Raum:

Erstellen Sie nach Abschluss der obigen Vorgänge eine Zweidimensionalität Raumoperation

  = { width: , height:  }; 

 two =  Two().appendTo(elem);

Grafiken erstellen:

var circle = two.makeCircle(72, 100, 50);//创建圆形（x坐标，y坐标，半径）var rect = two.makeRectangle(213, 100, 100, 100);//创建矩形（x，y，宽，高）

Drei: Grafikattribute anpassen:

circle.fill = ;circle.stroke = ; circle.linewidth = ;circle.opacity = ;= = = = ;
　　　　 rect.noStroke();//去掉边线

Viertens: Auf Webseite projizieren:

Put Um den generierten Raum und die Grafiken auf die Webseite zu projizieren, müssen Sie die folgenden Befehle eingeben:

two.update();

Der Effekt auf der Webseite ist wie in der Abbildung dargestellt

5: Die Funktion und Einrichtung von Gruppen:

Gruppen können zusammengeführt werden Mehrere Grafiken in einer Gruppe, und eine Gruppe kann die gleichen Attribute und Effekte festlegen

Nachdem Sie die Grafiken erstellt haben, können Sie den folgenden Code ausführen:

var group = two.makeGroup(circle, rect);

Put zwei Grafiken in einer Gruppe

// 可以对组内所有形状进行属性设定group.translation.set(two.width / 2, two.height / 2);//让一个组内所有的形状位移，使中心保持在二维空间的什么位置group.rotation = Math.PI;//旋转group.scale = 0.75;//缩放        
        group.linewidth = 7;//统一设置线宽

Gruppieren Sie mit dem obigen Befehl. Führen Sie den gleichen Vorgang für alle Formen innerhalb von

Das obige Bild zeigt die Wirkung der beiden Formen nach der Operation.

Das ist alles für heute. Das nächste Mal werde ich ausführlich erklären, wie man Animationseffekte erstellt.

Wenn Sie es gelernt haben, denken Sie daran, es zu mögen!

Das obige ist der detaillierte Inhalt vonEin Beispiel für die zweidimensionale Animationsproduktion mit H5+JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!