Question

我正在使用绿色摇滚来为svg clippath制作动画，并且它适用于一个clippath和硬编码变量。现在我需要添加更多clippaths，我需要每个clippaths独立动画。因此，我需要构建某种功能来检测哪个圈子被碾过/掏出，然后调用时间轴，传递正确的参数（clippath和叠加圈）。我敢肯定我可以用'这个'做到这一点，但我仍然处在'这'让我的大脑融化的地步。这是我正在研究的codepen。

http://codepen.io/kathryncrawford/pen/JYvdzx

HTML

  <svg class="svg-graphic" width="500" height="500" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
  <clipPath id="clippath">
  <circle id="clip1" cx="200" cy="200" r="2.5"/>
  <circle id="clip2" cx="400" cy="200" r="3.2"/>  
  </clipPath>
</defs>
<image class="svg-image1" xlink:href="http://lorempixel.com/300/300/" width="300" height="300" x="80" y="80"/>
<circle id="circle1"  fill="#CC66FF" cx="200" cy="200" r="30"/>

<image class="svg-image2" xlink:href="http://lorempixel.com/300/300/" width="300" height="300" x="380" y="80"/>
<circle id="circle2" fill="#CC66FF" cx="400" cy="200" r="30"/>

JS

var clip = document.getElementById("clip1");
var circles = document.getElementById("circle1");

circles.addEventListener("mouseenter", expand);
circles.addEventListener("mouseleave", contract);

var tl = new TimelineMax({paused: true});
tl.to(clip, 0.5, {
    attr: {
      r: 120
    },
    transformOrigin: "50% 50%",
    ease: Power4.easeInOut
  })
  .to(circles, 0.5, {alpha:0, ease:Power4.easeInOut}, '-0.1');

function expand() {
  tl.play();
}

function contract() {
  tl.reverse();
}

Answer 1

好吧， this 是我能够通过你的笔来创造的。

以下是改变了：

在 HTML 中，我删除了circle HTML元素中存在的每个clipPath HTML元素上设置的唯一 ID ，即{{ 1}}的孩子。相反，我已将所有这些clipPath代码设为circle类。
其他clip元素是所述circle的兄弟元素，即与clipPath元素位于同一级别，已被赋予clipPath类。
至于circle元素，我做了类似的事情。从中删除了唯一的 ID ，而是为他们提供了一个共同的image类。
这是HTML完成的。
在HTML中，由于已删除了唯一的 ID ，例如svg-image，#circle1，#circle2和#svg-image1，我已将其删除也可以从 CSS 中应用与新创建的类完全相同的规则，分别是#svg-image2和.circle。
在 JavaScript 中，.svg-image和clip元素以及circle元素的总数首先存储在变量clip中，分别为clips和circles。
最初创建的numClips空数组。
然后有一个循环被启动，直到timelines的长度，并做两件事：
- numClips顾名思义，应该创建一个createTimeline实例，它与您之前的实例类似，即它添加了两个补间，一个用于为当前的TimelineMax设置动画opacity元素（请记住，我们在循环中，我们通过circle使用当前circle元素的引用），另一个用于为当前circles[i]设置动画r元素。
- clip用于收听每个assignListeners元素上的mouseenter和mouseleave个事件。
最后，circle和expand方法用于播放或撤消当前时间轴实例。（同样，我们有collapse的引用，应该在悬停或使用timeline参考时播放。

<强> HTML：

timelines[i]

<强> CSS：

<svg class="svg-graphic" width="500" height="500" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
  <defs>
    <clipPath id="clippath">
      <circle class="clip" cx="200" cy="200" r="20" />
      <circle class="clip" cx="400" cy="200" r="20" />
      <circle class="clip" cx="600" cy="200" r="20" />
    </clipPath>
  </defs>
  <image class="svg-image" xlink:href="http://lorempixel.com/300/300/" width="300" height="300" x="80" y="80" />
  <circle class="circle" fill="#CC66FF" cx="200" cy="200" r="20" />
  <image class="svg-image" xlink:href="http://lorempixel.com/300/300/" width="300" height="300" x="380" y="80" />
  <circle class="circle" fill="#CC66FF" cx="400" cy="200" r="20" />
  <image class="svg-image" xlink:href="http://lorempixel.com/300/300/" width="300" height="300" x="680" y="80" />
  <circle class="circle" fill="#CC66FF" cx="600" cy="200" r="20" />
</svg>

<强> JavaScript的：

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0  
}

.circle{        
  position: absolute;
  margin: 0;
  z-index: 1;
  clip-path: url("#clippath");
}

.svg-image {
  z-index: 3;
  clip-path: url(#clippath);
}

svg{
    overflow: visible;
}

.svg-graphic {
  position: absolute;
}

.imgContainer {
  position: relative;
  width: 800px;
  height: 800px;
}

希望这有帮助。

检测哪个元素被鼠标悬停并传递给函数

1 个答案: