qooxdoo : 沿其中心旋转按钮答案

【问题标题】：qooxdoo : Rotate Button along its centerqooxdoo : 沿其中心旋转按钮
【发布时间】：2013-05-06 06:46:24
【问题描述】：

我有一个qx.ui.form.Button。当我单击按钮时，我希望它沿其中心旋转 180 度（即倒置）。（我正在处理qx.Desktop）

var btn = new qx.ui.form.Button(null, "myproject/button.png");
btn.addListener("click", function () {
  // which function should I use ?
});

旋转应该有动画，即顺时针旋转。

【问题讨论】：

标签： qooxdoo

【解决方案1】：

qooxdoo 没有在小部件层本身构建转换，但它提供了一种动画/旋转 dom 元素的方法。因此，您必须获取按钮的容器元素并在其上启动动画：

var el = btn.getContainerElement().getDomElement();
qx.bom.element.Animation.animate(el, {
  duration: 1000, timing: "ease", keep: 100, keyFrames : {
    0: {rotate: "0deg"},       // ["0deg"] for flipping effect
    100 : {rotate : "180deg"}  // ["180deg"] for flipping effect
  }
});

查看 animate 函数的文档以了解此代码的工作原理： http://demo.qooxdoo.org/current/apiviewer/#qx.bom.element.Animation~animate

这里是一个运行中的示例： http://tinyurl.com/cnbebyn

【讨论】：

非常接近我想要的。如果我想顺时针旋转而不是翻转效果怎么办？这个动画会不支持旧版 IE 吗？