animation - Crear animaciones con Clojurescript Om

svg

Question

He estado buscando cómo crear animaciones en Om, he intentado crear un componente de RaphaelJs con un éxito moderado. Obtengo la animación que quiero, pero por algún motivo Om representa varias instancias del elemento SVG.

Al mirar el ejemplo de animación en la carpeta Om github, se usa setInterval para cambiar los valores que desea animar, lo cual es menos que ideal.

Conozco el complemento CSSTransitionGroup, pero parece que solo se puede alternar entre las animaciones predefinidas definidas en el CSS, no se puede decidir hacer algo como renderizar un camino y tener una forma que lo siga con sincronizaciones aleatorias. Por favor, siéntete libre de corregirme si puedes definir dinámicamente animaciones usándolo.

¿Alguien tiene buenos ejemplos de realizar animaciones simples? Simplemente traducir o rotar formas simples me daría una idea de cómo empezar a abordarlo desde allí.

Answer 1

¿Desea examinar un puerto ClojureScript de https://github.com/chenglou/react-tween-state o https://github.com/chenglou/react-state-stream ?

TransitionGroup no proporciona nada más que ayudantes para conectar algunos eventos del ciclo de vida. Teóricamente no tiene nada que ver con la animación. Si desea una API de animación real, eche un vistazo a las dos cosas que hice anteriormente. Los readmes deberían proporcionar suficiente información para el resto.

Answer 2

Puede usar CSSTransitionGroup para animar la posición / movimiento, la orientación y otras propiedades visuales como la opacidad, el color, los bordes o las sombras (quizás usando fotogramas clave ) o hacks más complejos . La principal limitación de este enfoque es que solo le permite animar el montaje y desmontaje de los componentes y solo a través de la animación definida en CSS.

Si necesita animar los componentes durante su vida útil montada o si desea un control más detallado sobre lo que puede animar, es posible que desee tomar otro enfoque, como lo que hago en este código .

Así es como usaría CSSTransitionGroup de Om.

Para que esto funcione, debe usar la versión de react-with-addons-0.12.1.js react-with-addons-0.12.1.min.js (por ejemplo, react-with-addons-0.12.1.js o 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)))

Entonces para usarlo, puedes hacer:

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

Ahora alternar visible? para animar my-component montado y desmontado. Si desea deshabilitar la animación de entrada o salida:

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

También puede animar agregar o eliminar de / a listas de elementos:

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

O usando un mapa, tal vez algo así como:

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

También necesita agregar el CSS correcto:

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

Tenga en cuenta que a menos que desactive una de las animaciones, debe incluir ambas en el CSS. Por ejemplo, si omite la animación de la leave , es posible que su componente no se desmonte, ya que React se colgará esperando a que se complete la animación. Una solución simple es deshabilitarlo usando {:leave false} o incluir la animación leave en su CSS.

Otro tema que debe tener en cuenta: esto solo animará los componentes secundarios si el grupo de transición se monta antes que los niños . Si los elementos secundarios y el grupo de transición se montan al mismo tiempo, no se animarán. Esto puede ser un poco incómodo a veces. Por ejemplo, los fragmentos de código anteriores no se animarían sin (when visible? ...) ya que sin alternar, el niño se montaría al mismo tiempo que el grupo de transición. Además, el siguiente ejemplo build-all funciona mejor si la list-of-data no se rellena previamente, sino que se rellena después del montaje. Por esta razón, CSSTransitionGroups funciona mejor para el código que cambia entre vistas / componentes o listas de datos que el usuario modifica, pero no funciona para animar la visualización inicial de los componentes en la carga de la página.

Quizás algo como:

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

-

Finalmente, si no desea usar una función auxiliar, puede usar css-trans-group directamente:

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

O, si utiliza una lista de componentes secundarios (por ejemplo, a través de un map o build-all ):

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

Todavía no he usado la API de bajo nivel TransitionGroup . Se puede encontrar más información en la página React CSSTransitionGroup .