使用 Clojurescript Om 创建动画 [英] Creating animations with Clojurescript Om

问题描述

我一直在寻找如何在 Om 中创建动画，我尝试创建一个 RaphaelJs 组件并取得了一定的成功.我得到了我想要的动画，但由于某种原因 Om 渲染了 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.

查看 Om 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 中定义的预设动画之间进行切换，您无法决定执行诸如渲染路径并在随机时间跟随它的形状之类的操作.如果您可以使用它动态定义动画，请随时纠正我.

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.

如果您需要在组件的挂载生命周期内对其进行动画处理，或者您希望对可以进行动画处理的内容进行更细粒度的控制，您可能需要采用另一种方法 就像我在这段代码中所做的.

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.

这就是您将如何使用 Om 中的 CSSTransitionGroup.

为此，您需要使用 React 的 with-addons 版本(例如 react-with-addons-0.12.1.js 或 react-with-addons-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)))

现在切换 visible? 以动画 my-component 正在安装和卸载.如果您想禁用进入或离开动画:

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 中同时包含这两个动画.例如，如果您省略了 leave 动画，那么您的组件可能无法卸载，因为 React 将挂起等待动画完成.简单的解决方法是使用 {:leave false} 禁用它或在 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.

另一个需要注意的问题:这个 只有在过渡组安装在子组件之前时才会为子组件设置动画.如果孩子和过渡组同时安装，则它们不会被动画化.这有时可能有点尴尬.例如，上面的代码片段在没有 (when visible? ...) 的情况下不会动画，因为没有切换，孩子将与过渡组同时安装.此外，如果 list-of-data 未预先填充，而是在安装后填充，则下面的 build-all 示例效果最佳.出于这个原因，CSSTransitionGroups 最适用于在视图/组件或用户修改的数据列表之间切换的代码，但不适用于在页面加载时为组件的初始显示设置动画.

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-trans-group:

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

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

Or, if using a lists of child components (eg through map or build-all):

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

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

I have not yet used the low-level TransitionGroup API. More information can be found on the React CSSTransitionGroup page.

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