使用Clojurescript Om创建动画

Question

我一直在寻找如何在Om中创建动画，我已经尝试创建了一个RaphaelJs组件，并取得了一定的成功。我得到了我想要的动画，但是由于某种原因，Om呈现了SVG元素的多个实例。

​

​

查看animation example in the Om github folder时，使用setInterval来更改要设置动画的值，这并不理想。

我知道CSSTransitionGroup插件，但它看起来你只能在CSS中定义的预设动画之间切换，你不能决定做一些事情，比如渲染一个路径，然后让一个形状跟随它并随机计时。如果你可以使用它动态定义动画，请随时纠正我。

有没有人有简单动画的好例子？只要平移或旋转简单的形状就可以让我知道如何从那里开始处理它。

Answer 1

您可以使用CSSTransitionGroup设置位置/移动、方向和其他视觉属性的动画效果，如不透明度、颜色、边框或阴影(可能使用keyframes)或更多complex hacks。这种方法的主要限制是，它只允许您以动画的方式安装和卸载组件，然后只能通过CSS中定义的动画。

如果您需要在组件挂载的生命周期内为其设置动画，或者希望对可以设置动画的内容进行更细粒度的控制，则可能需要采用另一种方法like what I do in this code。

这就是您在Om.中使用CSSTransitionGroup的方式

要实现这一点，你需要使用React的with-addons版本(例如react-with-addons-0.12.1.js或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)))

然后，您可以执行以下操作来使用它：

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

现在切换visible?以设置正在挂载和卸载的my-component的动画。如果要禁用enter或leave动画：

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

您还可以以动画形式在项目列表中添加或删除项目：

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

或者使用map，可能是这样的：

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

您还需要添加正确的CSS:

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

请注意，除非禁用其中一个动画，否则需要在CSS中同时包含这两个动画。例如，如果省略leave动画，则组件可能无法卸载，因为React将挂起，等待动画完成。简单的解决方法是使用{:leave false}禁用它，或者在CSS中包含leave动画。

另一个需要注意的陷阱是:这个will only animate child components if the transition group is mounted before the children。如果同时挂载子对象和过渡组，则不会设置它们的动画。这有时可能有点尴尬。例如，上面的代码片段在没有(when visible? ...)的情况下将不会有动画效果，因为如果不切换，子对象将与转换组同时挂载。此外，如果list-of-data不是预先填充的，而是在挂载后填充的，则下面的build-all示例效果最好。因此，CSSTransitionGroups最适用于在视图/组件或用户修改的数据列表之间切换的代码，但不适用于页面加载时组件的初始动画显示。

可能是这样的：

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

-

最后，如果您不希望使用助手函数，可以直接使用css-trans-group：

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

或者，如果使用子组件列表(例如通过map或build-all)：

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

我还没有用过low-level TransitionGroup API。更多信息可以在React CSSTransitionGroup page上找到。

Answer 2

注意查看https://github.com/chenglou/react-tween-state或https://github.com/chenglou/react-state-stream的ClojureScript端口

TransitionGroup只提供了一些帮助程序来挂钩一些生命周期事件。从理论上讲，它与动画无关。如果你想要一个真正的动画API，看看我上面做的两件事。readmes应该为其余部分提供足够的信息。