AMP UI 工作组负责 AMP 的视觉组件和交互以及 AMP 的整体可访问性和体验。这意味着我们经常致力于现有组件的视觉润色，以改善网站用户的体验。因此，网络上的现有 AMP 页面会自动获得改进的用户体验，而部署这些页面的工程团队无需付出任何努力。核心 AMP 团队的工程师 Sepand Parhami 最近致力于为 <amp-lightbox-gallery> 创建更多类似应用的动画体验，展示了这一想法的实际应用。
在 <amp-lightbox-gallery> 中像应用一样轻扫以关闭
在退出灯箱模式时关闭图像时，返回内联图像的过渡是突然的，如下所示
受 Google 相册和 Apple 新闻等应用的启发，Sepand 致力于让这种交互对用户来说更直观、更令人愉悦。在退出灯箱模式时，我们希望用户
- 知道他们何时跨越交互阈值，之后他们将关闭灯箱图像。
- 识别他们正在查看的原始页面中内联图像的位置。
此信息由图像大小和灯箱背景提供，因为图像从灯箱状态移动到其内联位置。您可以在下面看到改进后的体验
改进进入和退出灯箱状态的过渡
我们添加到 <amp-lightbox-gallery> 的另一项视觉润色是对所有进出灯箱模式的图像的过渡进行了改进。通常，内联图像会被裁剪或缩放以聚焦于图像的重要部分，而灯箱视图则显示整个图像。这是一个难以解决的问题，因为它涉及在两个不同位置和大小的图像之间进行插值。
如您在上面看到的，内联资产被裁剪以聚焦于值得在文章中提到的图像的重要方面。但是，当它处于灯箱模式时，您可以看到完整图像。您可以在此处试用此演示 here。
创建一个新的动画库
为了创建上述体验，Sepand 开源了一个 动画库，它可以帮助您将图像从一个位置/大小转换为另一个位置/大小。除了放大之外，这也支持更改图像的“裁剪”，如 object-fit CSS 属性所定义。他在此处分享了他创建此库的经验 here。博客文章重点介绍了他在生成关键帧、迎合 object-fit 和 object-position 等 CSS 属性以及测试其代码时遇到的困难。
查看库（代码、文档、演示）以了解如何在您自己的页面上部署库。它也可通过 npm 获得。
持续采用最佳实践
为了确保我们默认情况下为网站用户提供出色的体验，AMP 团队还一直在增加一项自动为页面上符合特定条件的 <amp-img> 添加灯箱的实验。条件包括图像大小以及是否与它或它的祖先关联了操作。这允许最终用户更好地浏览页面上的图像，而无需开发团队对其代码库进行大规模更改。
上面重点介绍的改进是使用 AMP 的工程团队如何从为 AMP 项目做出贡献的其他团队吸取的经验教训中获益的绝佳示例（例如 Google、Pinterest 和 AliExpress）。随着 AMP 项目通过研究和实验找到逐步改善最终用户体验的方法，我们可以升级扩展程序，以便在不涉及部署 AMP 网站的工程师参与的情况下为最终用户提供改进。
由 Naina Raisinghani，Google AMP 项目产品经理发布