使用Clojurescript Om创建动画

Question

我一直在寻找如何在Om中创建动画,我尝试创建一个成功的RaphaelJs组件.我得到了我想要的动画,但由于某种原因,Om渲染了SVG元素的多个实例.

望着在庵github上文件夹的动画例如使用setInterval改变要进行动画处理,这是不太理想的值.

我知道CSSTransitionGroup插件,但看起来你只能在CSS中定义的预设动画之间切换,你不能决定做一些像渲染路径和跟随随机时序的形状.如果您可以使用它动态定义动画,请随时纠正我.

有没有人有任何表演简单动画的好例子？只是翻译或旋转简单的形状会让我知道如何从那里开始处理它.

Answer 1

您可以使用CSSTransitionGroup为位置/移动,方向和其他视觉属性(如不透明度,颜色,边框或阴影(可能使用关键帧)或更复杂的黑客)设置动画.这种方法的主要限制是它只允许您设置组件的安装和卸载动画,然后只允许通过CSS中定义的动画.

如果您需要在装载生命周期内为组件设置动画,或者您希望对可以设置动画的内容进行更细粒度的控制,则可能需要采用另一种方法,就像我在此代码中所做的那样.

这就是你如何使用Om的CSSTransitionGroup.

为此,您需要使用with-addonsReact版本(例如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正在安装和卸载的动画.如果要禁用输入或离开动画:

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

或使用地图,可能是这样的:

(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中包含离开动画来禁用它.

另一个需要注意的是:如果在子项之前安装了过渡组,则只会为子组件设置动画.如果孩子和过渡组同时安装,那么它们将不会被动画化.有时这可能有点尴尬.例如,如果(when visible? ...)没有切换,上面的代码片段就不会生成动画,子节点将与转换组同时挂载.此外,build-all如果list-of-data没有预先填充,而是在安装后填充,则下面的示例效果最佳.因此,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))))

我还没有使用过低级的TransitionGroup API.可以在React CSSTransitionGroup页面上找到更多信息.