0

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

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

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

所以我试图将鼠标悬停事件绑定到每个孩子，让他们旋转。

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 中的形状？

4

1 回答 1

0

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

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

解决方案：

  1. 为每一行创建一个 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();
});

  3. 使用 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. 可能不会添加到 html 中，然后div它会将多个两个实例添加到 div 以及其他时髦的东西
于 2019-01-12T20:54:24.190 回答