Skip to main content

Client-Animation

Das Animations-Feature Client-Animation ermöglicht Ihnen, Visualisierungen schnell und unkompliziert zu animieren. Die Animation verläuft dabei unabhängig vom Taskzyklus der Visualisierungstask VISU_TASK. Der nötige Rechenaufwand für die Animation wird direkt im Client ausgeführt.

Hinweis

0_Sample_ProjectBeispielprojekt für das Client-Animation-Feature

Bewegung

Ein Visualisierungselement kann beispielsweise eine Sollposition anfliegen, dynamisch rotieren oder in fließenden Übergängen erscheinen.

Animierbare Eigenschaft

Bewegung

Absolute Bewegung, Bewegung, X, Y

Die angegebene Sollposition wird angeflogen.

Absolute Bewegung, Innere Rotation

Absolute Bewegung, Äußere Rotation

Die Rotation erfolgt animiert vom vorherigen zum neuen Winkel.

Auch Gruppen, Frames und native Steuerelementen können rotieren.

Überlagerung

Visualisierungselemente und native (systemeigene) Steuerelemente können von Elementen oder Dialogelementen überlagert oder übereinander platziert werden.

_cds_img_element_overlay.png

Zeitanimation

. Zeitanimation

  • Dialoge werden mit fließenden Übergängen ein- oder ausgeblendet.

  • Elemente werden mit fließenden Übergängen ein- oder ausgeblendet. Die Sichtbarkeit eines Visualisierungselements können Sie mit Hilfe der Eigenschaft Zustandsvariable, Unsichtbarkeit steuern.

  • Menüs werden reibungslos eingeflogen.

  • Framevisualisierungen wechseln reibungslos, mit fließenden Übergängen ein- und ausgeblendet.

Bildanimation

Bilder im Grafikformat GIF oder als SVG-Vektorgrafik werden zur Laufzeit als Animation interpretiert und bewegt dargestellt.

Client-Animation aktivieren

Voraussetzung: Das CODESYS-Projekt enthält eine Applikation mit einer Visualisierung.

  1. Öffnen Sie in der Ansicht Geräte den Visualisierungsmanager.

  2. Aktivieren Sie die Option Client-Animationen und Überlagerungen systemeigener Elemente unterstützen.

    Anmerkung

    Diese Option wird angezeigt, wenn CODESYS WebVisu-Clients oder CODESYS TargetVisu-Clients unterhalb des Visualisierungsmanagers eingefügt wurden. Die CODESYS TargetVisu-Clients müssen diese Funktion jedoch unterstützen.

    Die Visualisierungselemente verfügen über die Eigenschaft Animationsdauer und In den Vordergrund bringen. Die Client-Animation ist nun aktiviert.

Visualisierungselement konfigurieren

Ein Visualisierungselement wird automatisch animiert, wenn zur Laufzeit mindestens eine animierbaren Eigenschaft ihren Wert ändert. Die Dauer der Animation ist dabei nicht 0 und wurde in der Eigenschaft Animationsdauer konfiguriert. Die Berechnung der Animation erfolgt vom Client.

Voraussetzung: Die Client-Animation ist aktiviert.

  1. Selektieren Sie ein Visualisierungselement.

  2. Selektieren Sie in der zugehörigen Ansicht Eigenschaften die Eigenschaft Animationsdauer und geben Sie den Wert 500 ein.

    Die Animation wird 500 Millisekunden dauern.

  3. Deklarieren Sie, beispielsweise im Schnittstelleneditor der Visualisierung, die Positionsvariablen.

    Schnittstelleneditor

    VAR
    iXPosition : INT;
    iYPosition : INT;
END_VAR

  4. Selektieren Sie die Eigenschaft Absolute Bewegung, Bewegung, X und weisen Sie die Variable iXPosition zu.

  5. Selektieren Sie die Eigenschaft Absolute Bewegung, Bewegung, Y und weisen Sie die Variable iYPosition zu.

  6. Programmieren Sie eine Eingabekonfiguration, die beispielsweise einen Positionsänderung bewirkt.

    Eigenschaft Eingabekonfiguration, OnMouseClick: ST-Code ausführen.

    ST-Code ausführen

    iXPosition := 100;
iYPosition := 100;

  7. Übersetzen, starten und laden Sie die Applikation.

    Die Applikation mit Visualisierung läuft. Wenn der Benutzer auf das Visualisierungselement klickt, wird die Sollposition dynamisch angeflogen.

In diesem Abschnitt: