Axure: Wie macht man einen kreisförmigen Timer?

Question

Ich mag gerne wissen, wie diese Animation auf Axure 8

Dank zu machen!

Answer 1

Sie könnten das animierte gif verwenden. Aber statt direkt anzuzeigen, können Sie es auf den ausgewählten Zustand anwenden. Sie fügen eine Aktion hinzu, um das Bild auszuwählen, und das gif wird gestartet.

Fügen Sie einen Timer hinzu und setzen Sie ihn zurück, wenn Sie fertig sind. Sehen Sie dieses schnelle und schmutzige Beispiel. https://www.dropbox.com/s/4hceqrbsbvyri8k/Circular-Timer.rp?dl=0

Answer 2

Hier ist eine andere Lösung mit einem anderen Ansatz. Nämlich eine lächerliche Menge an zeitgesteuerten Animationen: https://www.dropbox.com/s/52cuq8opsmquni0/Circular-Loader-Animated.rp?dl=0

Zwei haben Kreise können animiert werden. Jede Hälfte hat den Rotationsursprung auf das gemeinsame Zentrum gesetzt. Eine Form umfasst die erste Hälfte der Animation.

Keine sehr zuverlässige Lösung, nur ein Beweis, was mit den neuen Animationsfunktionen möglich ist.

Answer 3

Ich begann erst vor kurzem mit Axure spielen so kann es einen besseren Weg, dies zu tun, aber hier ist, was ich kam mit:

2 Ringe erstellen:

• mit 2 Kreisen starten , eine etwas kleiner als die andere. Zentrieren Sie eine über die andere, wählen Sie beide und drücken Sie die Schaltfläche "Subtrahieren" im Stil-Fenster, um im Wesentlichen ein Loch in den größeren Kreis zu schneiden. Voila, ein Ring.
• Kopieren Sie den Ring und fügen Sie ihn ein, so dass Sie mit 2 arbeiten. Füllen Sie einen Ring mit Ihrer gewünschten inaktiven Statusfarbe (z. B. grau) und füllen Sie den anderen mit Ihrem gewünschten Status (sagen wir, hellblau).
• töten die Form Umriss oder die gleiche Farbe wie die Füllung über genau die Hälfte jeden Kreis

Cut diese Ringe in Halb

• Platz ein Rechteck bilden (für dieses Beispiel I meine Mine vertikal halbiert, aber auch horizontal). Verwenden Sie die gleiche Schaltfläche "subtrahieren", um die Hälfte jedes Rings zu entfernen. Sie sollten links mit 1 grauen Halbring und 1 blau sein.

Knüpfen Sie neue Vollringe aus zwei Halbringen

• Kopieren und jede Hälfte Ring einfügen, so dass Sie mit 2 grau und 2 blauen Halbringen sind links.
• Drehen Sie 1 von jeder Farbe Halbringe 180 Grad
• Richten Sie die grauen Halbringe aus, damit Sie haben, was wie 1 ganzer grauer Ring aussieht.Mach das gleiche mit dem Blau. Gruppiere sie alle für den Moment.
• Benennen Sie jeden Halbring im Gliederungsfenster, um später die Übersicht zu erleichtern (links grau, rechts grau, links blau, rechts blau).

Richten Sie die Ringe & den Auftrag

• Setzen Sie den resultierenden grauen Ring direkt über die blauen gesetzt, so dass alles, was Sie sehen können der graue Ring ist.
• Gruppieren Sie die Ringe und legen Sie die Reihenfolge wie folgt im Gliederungsfenster fest: von oben nach unten: Rechts grau, rechts blau, links grau, links blau.

Jetzt kommt der spaßige Teil

• den rechten grauen Halbring wählen und gehen Sie auf Eigenschaften. Ich bin mit „On Load“ aber aussuchen, was für Sie arbeitet und den folgenden Fall ein: rechts grau 180 Grad, im Uhrzeigersinn, Anker rechts, Animate

• Drehen - linear, 1000 ms

• Warten 1000ms
• ausblenden rechts grau (keine Animation)
• links dreht grau 180 Grad, im Uhrzeigersinn, Anker rechts, Animate - linear, 1000 ms

das Endergebnis ist der richtige grau Halbring dreht sich um und enthüllt den blauen Ring darunter, aber es scheint, als würde das Blau den grauen Raum füllen. Sobald diese Hälfte endet, ist sie um 180 Grad gedreht und endet auf der linken Seite, sie verschwindet und der linke graue Halbring beginnt seine Rotation. Da wir es hinter dem rechten blauen Halbring platzieren, versteckt es sich hinter ihm, während es sich bewegt und den Rest des blauen Rings enthüllt.

Wie ich bereits erwähnt habe, bin ich ziemlich neu bei Axure. Wenn jemand Vorschläge hat, wie dies effizienter zu tun ist, sind sie mehr als willkommen!