Erstellen von Animationen mit Clojurescript Om

Question

Ich habe gesucht, wie man Animationen in Om erstellt, ich habe versucht, eine RaphaelJs-Komponente mit mäßigem Erfolg zu erstellen. Ich bekomme die gewünschte Animation, aber Om rendert aus irgendeinem Grund mehrere Instanzen des SVG-Elements.

am animation example in the Om github folder der Suche verwendet setInterval die Werte, die Sie animieren möchten sich ändern, die weniger als ideal ist.

Ich bin mir der CSSTransitionGroup-Erweiterung bewusst, aber es sieht so aus, als könnten Sie nur zwischen voreingestellten Animationen wechseln, die im CSS definiert sind. Sie können sich nicht dazu entschließen, einen Pfad zu erstellen und eine Form mit zufälligen Timings zu erhalten . Bitte zögern Sie nicht mich zu korrigieren, wenn Sie Animationen dynamisch damit definieren können.

Hat jemand gute Beispiele für die Durchführung einfacher Animationen? Einfach nur einfache Formen zu übersetzen oder zu drehen, würde mir eine Idee geben, wie ich von dort aus anfangen könnte.

Answer 1

Sie können CSSTransitionGroup verwenden, um Position/Bewegung, Orientierung und andere visuelle Eigenschaften wie Deckkraft, Farbe, Ränder oder Schatten zu animieren (möglicherweise unter Verwendung von keyframes) oder mehr complex hacks. Die Haupteinschränkung dieses Ansatzes besteht darin, dass Sie nur das Mounten und Unmounten von Komponenten und dann nur die in CSS definierte Animation animieren können.

Wenn Sie Komponenten während der Laufzeit aktualisieren möchten oder eine feinere Kontrolle darüber haben möchten, was Sie animieren können, sollten Sie einen anderen Ansatz wählen: like what I do in this code.

So würden Sie CSSTransitionGroup von Om verwenden.

Damit dies funktioniert, müssen Sie die with-addons Version von Reagieren auf (zB react-with-addons-0.12.1.js oder react-with-addons-0.12.1.min.js).

(def css-trans-group (-> js/React (aget "addons") (aget "CSSTransitionGroup"))) 
(defn transition-group 
    [opts component] 
    (let [[group-name enter? leave?] (if (map? opts) 
            [(:name opts) (:enter opts) (:leave opts)] 
            [opts true true])] 
    (apply 
     css-trans-group 
     #js {:transitionName group-name 
      :transitionEnter enter? 
      :transitionLeave leave?} 
     component))) 

Dann, es zu benutzen, die Sie tun können:

(transition-group "example" (when visible? (om/build my-component data))) 

Jetzt visible? schalten und ausgehängt zu animieren my-component montiert ist. Wenn Sie deaktivieren möchten entweder die Eingabe oder Animation verlassen:

(transition-group 
    {:name "example" 
    :enter false} ; Only animate when component gets unmounted, not when mounted 
    (when visible? (om/build my-component data))) 

können Sie auch animieren Hinzufügen oder von/zu Listen von Elementen zu entfernen:

(transition-group "example" (om/build-all my-component list-of-data)) 

Oder Karte verwenden, vielleicht so etwas wie:

(transition-group "example" (map #(dom/li %) list-of-data)) 

Sie müssen auch die korrekten CSS hinzufügen:

.example-enter { 
    opacity: 0.01; 
    transition: opacity .5s ease-in; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
} 

.example-leave { 
    opacity: 1; 
    transition: opacity .5s ease-in; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
} 

Beachten Sie, dass Sie, wenn Sie eine der Animationen deaktivieren, beide in das CSS einschließen müssen. Wenn Sie beispielsweise die leave Animation weglassen, wird Ihre Komponente möglicherweise nicht ausgehängt, da React nicht mehr reagiert und auf den Abschluss der Animation wartet. Eine einfache Lösung ist es, sie mit {:leave false} zu deaktivieren oder die Leave-Animation in Ihr CSS aufzunehmen.

Eine andere gotcha zu beachten: will only animate child components if the transition group is mounted before the children. Wenn die untergeordneten Elemente und die Übergangsgruppe gleichzeitig bereitgestellt werden, werden sie nicht animiert. Dies kann manchmal etwas peinlich sein. Zum Beispiel würden die obigen Code-Snippets ohne die (when visible? ...) nicht animiert werden, da ohne Umschalten das Kind zur gleichen Zeit wie die Übergangsgruppe eingehängt würde. Auch das folgende Beispiel funktioniert am besten, wenn nicht vorbelegt ist, sondern nach der Montage ausgefüllt wird. Aus diesem Grund funktionieren CSSTransitionGroups am besten für Code, der zwischen Sichten/Komponenten oder Listen mit Daten wechselt, die vom Benutzer geändert werden, aber nicht für die Animation der Erstanzeige von Komponenten beim Laden der Seite.

Vielleicht so etwas wie:

(transition-group "view-selection" 
    (condp = current-view 
    "home" (om/build home-page data) 
    "blog" (om/build blog-page data) 
    "about" (om/build about-page data) 
    :else (om/build error-404-page data))) 

-

Schließlich, wenn Sie eine Hilfsfunktion nicht verwenden möchten, können Sie css-trans-group direkt verwenden:

(css-trans-group 
     #js {:transitionName "example"} 
     (when visible? (om/build my-component data))))) 

Oder, wenn mit eine Liste von Kindkomponenten (z. B. durch map oder build-all):

(apply 
     css-trans-group 
     #js {:transitionName "example"} 
     (om/build-all my-component list-of-data)))) 

Ich habe die low-level TransitionGroup API noch nicht verwendet. Weitere Informationen finden Sie unter React CSSTransitionGroup page.

Answer 2

Schauen Sie in einen ClojureScript-Port von https://github.com/chenglou/react-tween-state oder https://github.com/chenglou/react-state-stream?

TransitionGroup bietet nur Hilfefunktionen für die Verbindung mit bestimmten Lebenszyklusereignissen. Es hat theoretisch nichts mit Animation zu tun. Wenn Sie eine tatsächliche Animation API möchten, werfen Sie einen Blick auf die zwei Dinge, die ich oben gemacht habe. Die Readmes sollten genügend Informationen für den Rest liefern.