Question

使用Anime.js我想在悬停时变形SVG。我可以用一个来完成这个工作，但我很难弄清楚如何使相同的脚本适用于页面上的多个元素。 JSFiddle

<a class="link" href="#">
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
    <path class="shape-from" fill="#000000" d="M21.062 21.062H78.94V78.94H21.06z"/>
    <path class="shape-to" fill="#000000" d="M65.62 67.548l-44.558 11.39L32.858 37.41l46.08-16.348z"/>
    <path class="shape-morph" fill="#000000" d="M21.062 21.062H78.94V78.94H21.06z"/>
  </svg>
</a>

因此，当您将鼠标悬停在.link上时，它应该会让孩子.shape-morph并将其设置为.shape-to的值。然后在mouseleave上反向。

$('.link').mouseenter(function() {
  var shapeMorph = $(this).find('.shape-morph');
  var shapeTo = $(this).find('.shape-from').attr('d');
  anime({
    targets: shapeMorph,
    d: shapeTo,
    easing: 'easeOutElastic',
    duration: 1000
  });
});
$('.link').mouseleave(function() {
  var shapeMorph = $(this).find('.shape-morph');
  var shapeFrom = $(this).find('.shape-from').attr('d');
  anime({
    targets: shapeMorph,
    d: shapeFrom,
    easing: 'easeOutElastic',
    duration: 1000
  });
});

我遇到的另一个问题是，当它变形时，偶尔会有一个奇怪的闪烁，有人知道如何解决这个问题吗？

Answer 1

我需要将mouseenter / mouseleave置于each内并通过函数发送正确的目标和路径：JSFiddle

var path1 = 'M21.062 21.062H78.94V78.94H21.06z'
var path2 = 'M35.062 21.062H60.94V78.94H21.06z'

function animateMe(el, path) {
  anime.remove(el);
  anime({
    targets: el,
    d: path,
    easing: 'easeOutElastic',
    duration: 1000
  });
};

function enterLink(el, path) {
  animateMe(el, path2);
};

function leaveLink(el, path) {
  animateMe(el, path1);
};

$('.link').each(function() {
  $(this).on('mouseenter', function(e) {
    enterLink($(this).find('.shape-morph').get(0));
  });
  $(this).on('mouseleave', function(e) {
    leaveLink($(this).find('.shape-morph').get(0));
  });
});

使用相对目标悬停动画SVG

1 个答案: