点击按钮时形状变换的图标

这里的想法是在按钮中使用 SVG 图标，并在点击按钮时将该图标替换为另一个图标。按钮点击通常意味着已经采取了某个操作，因此切换图标可以成为一个不错的 UI 技巧，以显示上下文的变化并确认操作已完成。

一个可能的用例可能是下载按钮。按钮中的图标最初可能表示按钮将触发下载，但在点击按钮后会变为勾号。

查看 CodePen 上 Geoff Graham (@geoffgraham) 的笔 点击按钮时 MorphSVG。

让我们创建一个实现这种模式的代码片段，以便我们可以在其他类似的上下文中使用它。

要求

虽然我们将此归类为 SVG 代码片段，但我们将依赖 GSAP 的 TweenMax，这是一个专门用于动画 SVG 的 JavaScript 库，以及 MorphSVG，它是 TweenMax 的一个组件。

是的，SVG 确实对动画提供了原生支持，这将允许我们实现相同的效果。但是，随着SMIL 支持在未来的 WebKit 和 Blink 浏览器版本中逐渐减少，并且它在 IE 和 Edge 中完全不支持，GSAP 成为一个更有吸引力的替代方案。

让我们启动它们，并构建一个模式吧！

步骤 1：选择 SVG 形状

我们将用一个形状替换另一个形状。用于此代码片段的形状来自 IcoMoon，它提供了大量的免费矢量图标，但你也可以自己制作。无论哪种方式，准备好你的形状，让我们将它们添加到按钮元素内的 HTML 中。

<!-- The button element (we could have used `<button>`) -->
<a class="button" href="#">
  
  <!-- The main SVG where both shapes will be drawn -->
  <svg id="icons" class="button-icons" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    
    <!-- The download icon -->
    <path id="download" class="icon" d="M28 16h-5l-7 7-7-7h-5l-4 8v2h32v-2l-4-8zM0 28h32v2h-32v-2zM18 10v-8h-4v8h-7l9 9 9-9h-7z"></path>
    
    <!-- The checkmark icon -->
    <path id="checkmark" class="icon" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
  </svg>

  <!-- The button text -->
  <!-- The ID will be used to swap the text with JavaScript -->
  <span id="button-text">Download</span>

</a>

步骤 2：设置按钮和 SVG 的样式

接下来我们可以设置 CSS。我们示例中的大多数样式都是特定于演示的。以下是在使此功能正常工作时必要的最小要求。

请注意，关键部分是默认情况下隐藏我们要进行形状变换的形状。我们这样做是因为我们需要 DOM 中的两个形状才能让 MorphSVG 将一个形状替换为另一个形状，但我们不能同时显示两个形状。这意味着我们隐藏了第二个形状，并让 MorphSVG 发挥它的魔力，在需要时将其显示出来。

/* The main SVG */
.button-icons {
  width: 1.25em;
}

/* The individual icons */
.icon {
  fill: #fff;
}

/* We hide the checkmark by default */
#checkmark {
  visibility: hidden;
}

步骤 3：强大的 MorphSVG！

这是 TweenMax 和 MorphSVG 发挥作用的地方。下面提供了示例的完整代码，但它遵循以下一般脚本

• 定义一些变量作为开始，这样我们就可以在整个代码中引用它们，而无需每次都写出来
• icons：完整的 SVG 元素
• button：包含我们形状的按钮（或链接）
• buttonText：按钮内的文本
• buttonTL：用于将下载图标替换为勾号图标的 MorphSVG 命令
• 嘿，JavaScript，请注意按钮被点击，并在交替点击时向前和向后播放 MorphSVG 动画。
• 哦，对了，嘿 JavaScript，当按钮被点击时，也请切换按钮文本。
• 谢谢你，JavaScript

// We're going to select some things and make them variables
var select = function(s) {
  return document.querySelector(s);
},
  icons = select('#icons'),
  button = select('.button'),
  buttonText = document.getElementById("button-text")

// Morph the Download icon into the Checkmark icon
var buttonTl = new TimelineMax({paused:true});
buttonTl.to('#download', 1, {
  morphSVG:{shape:'#checkmark'},
  ease:Elastic.easeInOut
})

// On button click, play the animation
button.addEventListener('click', function() {
  if (buttonTl.time() > 0) {
    buttonTl.reverse();
    
  } else {
    buttonTl.play(0);
  }
})

// On button click, swap out the button text
button.addEventListener('click', function() {  
  if (button.classList.contains("saved")) {
    button.classList.remove("saved");
    buttonText.innerHTML = "Download";
  } else {
    button.classList.add("saved");
    buttonText.innerHTML = "Saved!";
  }
}, false);

演示

以下是我们已经介绍过的代码的演示

查看 CodePen 上 Geoff Graham (@geoffgraham) 的笔 点击按钮时 MorphSVG。

参考资料

• GreenSock MorphSVG: 使用此插件的文档。
• SVG 形状变换的工作原理: Chris 使用 SMIL 发布了相同的概念，并为这种模式提供了良好的基础。
• 开心/悲伤的笔: Chris Gannon 的演示，它帮助构建了这种模式的动画。