iPhone 15 概览页动画：用 GSAP 重现按钮幻影

在苹果公司备受期待的 iPhone 15 概览页中，按钮动画的精致性令人印象深刻。这些按钮在出现和隐藏时以一种迷人的方式滑动，为用户提供无缝且直观的体验。得益于 GreenSock 的 GSAP（JavaScript 动画库），我们可以轻松地复制这种效果，为我们的项目增添一丝苹果的魔力。

1. 设置 HTML 结构

首先，我们需要设置 HTML 结构来容纳我们的按钮。创建一个简单的按钮元素，如下所示：

<button>按钮</button>

2. 引入 GSAP 库

接下来，我们需要将 GSAP 库导入我们的项目。您可以通过以下方式之一进行操作：

• 通过 CDN：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

• 使用包管理器（如 npm）：

npm install gsap

3. 创建 GSAP 时间线

GSAP 时间线是一种强大的工具，可让我们控制动画的顺序和持续时间。对于这个按钮动画，我们将创建一个时间线来处理按钮的出现和隐藏效果。

const timeline = gsap.timeline({defaults: {ease: "power3.inOut"}});

4. 按钮出现动画

让我们从按钮出现动画开始。我们希望按钮从屏幕底部滑动进入视图。为此，我们可以使用 GSAP 的 from() 方法。

timeline.from(".button", {y: "100%", duration: 0.5});

5. 按钮隐藏动画

接下来，让我们创建按钮隐藏动画。我们希望按钮以与出现动画相反的方式从视图中滑动出去。我们可以使用 GSAP 的 to() 方法。

timeline.to(".button", {y: "-100%", duration: 0.5});

6. 触发动画

现在我们已经设置好了动画，我们需要添加一个触发器来启动它们。最简单的方法是在按钮上添加一个点击事件监听器。

document.querySelector(".button").addEventListener("click", () => {
  timeline.play();
});

7. 优化动画

为了优化动画，我们可以添加一个延迟，使按钮在隐藏后才出现。这将防止按钮快速闪烁，并提供更流畅的用户体验。

timeline.add(gsap.delayedCall(0.5, () => {
  timeline.restart();
}));

结论

通过利用 GSAP 的强大功能，我们已经成功地重现了 iPhone 15 概览页中的按钮动画。这种动画技术不仅美观，而且还可以提升用户体验。随着 GSAP 的广泛使用，我们很可能会在未来的网络和移动应用程序中看到更多令人惊叹的动画效果。