动画：在iOS上为主持人护照注入生命

How Airbnb enabled hosts and guests to connect and introduce themselves through the Host Passport.

Airbnb如何通过主人护照使主人和客人联系并互相介绍。

作者：Anne Lu

Introduction

介绍

In May 2023 we introduced the Host Passport as part of our Summer Release. We wanted to give Hosts a way to introduce themselves, and start building a more personal connection with their guests. To that end, we created the Host Passport, which appears in the bottom corner of each Private Room listing result with a photo of the Host on the cover. Guests can tap it to fully open the Host Passport and learn more about the Host and get a sense for the real live person they would be staying with.

2023年5月，我们在我们的夏季发布中引入了主人护照。我们希望给主人们提供一种介绍自己并与客人建立更亲密联系的方式。为此，我们创建了主人护照，它出现在每个私人房间列表结果的底部角落，并带有主人的照片封面。客人可以点击它完全打开主人护照，了解更多关于主人的信息，并对他们将要与之同住的真实人物有所了解。

The Passport animation

护照动画

The Host Passport offers Hosts a way to introduce themselves and set guest expectations, and allows guests to quickly start discovering who they could be sharing a space with.

主机护照为主机提供了一种介绍自己和设置客人期望的方式，同时允许客人快速开始发现他们可能与之共享空间的人。

Delivering this animation with high pixel accuracy, fluidity, high performance, and a spark of delight led us to encounter and solve many novel technical issues unique to each client platform that we support. While the Host Passport appears in the web, Android, and iOS apps, this article focuses specifically on the iOS implementation.

为了以高像素精度、流畅性、高性能和愉悦的体验提供此动画，我们遇到并解决了许多针对我们支持的每个客户端平台独特的技术问题。虽然主人护照出现在Web、Android和iOS应用程序中，但本文重点介绍了iOS的实现。

Implementing the Host Passport on iOS

在iOS上实现主机护照

While we’ve almost entirely switched over to SwiftUI when it comes to building new components and screens in our app, we opted to use UIKit for the passport animation. We did this for a couple of reasons. Firstly, at the time of this writing, SwiftUI does not have APIs supporting custom transitions and navigation patterns, so our screen navigation and transition layer remains in UIKit. And secondly, while keyframe timing was introduced for SwiftUI animations with iOS 17, our versio...