qooxdoo - qooxdoo : 沿其中心旋转按钮

Question

我有一个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 ?
});

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

Answer 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