与Clojurescript嗡创建动画 [英] Creating animations with Clojurescript Om

问题描述

我一直在四处寻找如何在嗡创建动画，我试图创建具有中等成功的RaphaelJs组件。我得到我想要的动画，但由于某些原因庵呈现SVG元素的多个实例。

I've been looking around for how to create animations in Om, I've tried creating a RaphaelJs component with moderate success. I get the animation I want, but for some reason Om renders multiple instances of the SVG element.

望着在GitHub上庵夹用途例如动画的setInterval 来改变要进行动画处理，这是不太理想的值。

Looking at the animation example in the Om github folder uses setInterval to change the values you want to animate, which is less than ideal.

我知道了CSSTransitionGroup插件，但它看起来像你只能在CSS定义preSET动画之间翻转，你不能决定做这样的事情渲染路径和其形状与它后面随机计时。请随时纠正我，如果你可以用它动态定义动画。

I'm aware of the CSSTransitionGroup addon, but it looks like you can only flip between preset animations defined in the CSS, you can't decide to do something like rendering a path and having a shape following it with randomised timings. Please feel free to correct me if you can dynamically define animations using it.

有没有人有执行简单的动画中的任何很好的例子？只是平移或旋转造型简洁会给我如何从那里开始解决它的想法。

Does anyone have any good examples of performing simple animations? Just translating or rotating simple shapes would give me an idea of how to start tackling it from there.

推荐答案

您可以使用CSSTransitionGroup动画立场/运动，方向和其他视觉属性，如不透明度，颜色，边框和阴影（也许使用的keyframes ）以上的复杂的黑客的。这种方法的主要限制是它只允许你安装的动画，只有通过CSS定义动画组件卸载，然后。

You can use CSSTransitionGroup to animate position/movement, orientation and other visual properties like opacity, color, borders or shadows (perhaps using keyframes) or more complex hacks. The major limitation of this approach is that it only allows you to animate mounting and unmounting of components and then only through animation defined in CSS.

如果您需要安装自己一生中的动画组件或您希望对你能有什么动画更细粒度的控制，你可能要采取另一种方法的like我在这个code 做的。

If you need to animate components during their mounted lifetime or you want more fine-grained control over what you can animate, you might want to take another approach like what I do in this code.

这是你将如何使用从嗡CSSTransitionGroup。

对于这个工作，你需要使用作出反应的与-插件版本（例如反应与 - 插件-0.12.1。 JS 或反应与 - 插件 - 0.12.1.min.js ）。

For this to work, you need to use the with-addons version of React (eg react-with-addons-0.12.1.js or 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)))

然后使用它，你可以这样做：

Then to use it, you can do:

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

现在切换可见？动画我的分量被安装和卸载。如果要禁用无论是进入或离开动画：

Now toggle visible? to animate my-component being mounted and unmounted. If you want to disable either the enter or leave animation:

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

您也可以动画添加或删除自/至项目列表：

You can also animate adding or removing from/to lists of items:

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

或者使用的地图，也许是这样的：

Or using map, perhaps something like:

(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来包括。例如，如果你离开了离开动画，那么您的组件可能没有获得卸载的阵营将挂起等待动画来完成。简单的解决方法是使用禁用它 {：离开虚假} ，也可以在你的CSS休假动画

Note that unless you disable one of the animations, you need to include both in the CSS. For example, if you leave out the leave animation, then your component may not get unmounted as React will hang waiting for the animation to complete. Simple fix is to disable it using {:leave false} or to include the leave animation in your CSS.

另外有一个问题需要注意的：这个<一个href=\"https://facebook.github.io/react/docs/animation.html#animation-group-must-be-mounted-to-work\">will只有当孩子的前过渡组安装动画子组件。如果孩子和过渡组被安装在相同的时间，那么他们将不会被动画。这可能是一个有点尴尬的时候。例如，上面的code段将无法运行动画没有（时可见？...）因为没有切换，孩子将被安装在同一时间过渡小组。此外，集结所有下面的例子中效果最好，如果列表的数据 - 不是prepopulated而是安装后填充。出于这个原因，CSSTransitionGroups最适合code，它的意见/组件或被用户修改数据列表之间切换，但在页面加载动画元件的初始显示是行不通的。

One other gotcha to be aware of: this will only animate child components if the transition group is mounted before the children. If the children and the transition group are mounted at the same time, then they won't be animated. This can be a bit awkward sometimes. For example, the above code snippets would not animate without the (when visible? ...) as without toggling, the child would be mounted at the same time as the transition group. Also, the build-all example below works best if list-of-data is not prepopulated but instead populated after mounting. For this reason, CSSTransitionGroups work best for code that switches between views/components or lists of data that gets modified by the user, but doesn't work for animating initial display of components on page load.

也许是这样的：

(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-跨组直接

Finally, if you do not wish to use a helper function, you can use css-trans-group directly:

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

或者，如果使用的子组件的列表（例如，通过地图或集结所有）

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

我还没有使用的<一个href=\"https://facebook.github.io/react/docs/animation.html#low-level-api-reacttransitiongroup\">low-level TransitionGroup API 。更多信息可以在阵营CSSTransitionGroup页。

这篇关于与Clojurescript嗡创建动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！