Question

我有一组two.js形状。当用户将鼠标悬停在某个形状上时，我希望该形状旋转。

http://merhoo.github.io/secrets.html

与CSS动画有关的问题：如果我将：hover动画应用于svg形状，它将以某种方式影响形状的位置，将其移动到左上角。

因此，我试图将mouseover事件绑定到每个孩子以使其旋转。

var shapes = makeFlowers();

for (var r = 0; r < rows; r++) {
  for (var c = 0; c < cols; c++) {
    ...
    var shape = pickFlower();
    shape.translation.set(hi * two.width, vi * two.height);
    two.add(shape);
  }
}
two.update();

for (var f in flowers) {
  var flower = flowers[f];
  $(flower._renderer.elem)
    .click(function(e) {
      flower.fill = "blue";
    })
}

那么，如何在two.js中将鼠标悬停/鼠标悬停动画应用于形状？

Answer 1

将单独的事件处理程序/动画添加到two.js对象的两个问题（哈哈）。

第一个我还是不明白：它只会将事件处理程序添加到循环中的最后一个形状。也许是因为它在html中显示为一个svg，所以onclick会应用于一个或所有路径。似乎是Two.js部分的错误。
如this post中所述，对于浏览器来说，通过动画转换SVG的路径非常繁重。如果将动画应用于SVG的容器，则不会对路径中的每个点都应用转换。

解决方案：

为每行创建一个div，并为每个单元格填充一个div

for (var r = 0; r < rows; r++) {
  var rowId = "row" + r;
  var row = $("<div/>").addClass("row").attr("id", rowId).appendTo('body');
  for (var c = 0; c < cols; c++) {
    var cellId = "cell" + ((r * rows) + c);
    $(row).append('<div class="cell" id="' + cellId + '"></div>');
  }
}

为每个单元格创建一个2的实例，并在其中添加形状

$(".cell").each(function (index, object) {
  var two = new Two({
    width: size + padding,
    height:size + padding
  }).appendTo(object);
  var shape = pickFlower(shapes);
  shape.translation.set(two.width / 2, two.height / 2);
  two.add(shape);
  two.update();
});

使用CSS将悬停动画添加到div

.cell:hover {
  animation: loaderAnim 5s ease-in-out infinite normal forwards;
  padding: 0;
  margin: 0;
}


@keyframes loaderAnim {
  0% {
    transform:rotate(0deg);
  }
  50% {
    transform:rotate(90deg);
  }
  100% {
    transform:rotate(0deg);
  }
}

注意：

请勿尝试结合制作div并将两个加到div上。 div可能不会添加到html，然后它将向div中添加多个两个实例，以及其他时髦的东西

如何在Two.js中为形状添加事件？

1 个答案: