创建骨架屏加载动画

简介

骨架屏 UI 加载动画会呈现实际 UI 的轮廓，并让用户了解内容加载到屏幕上大约需要多长时间。骨架屏 UI 会为加载信息使用中性/灰色调的占位元素。通过 ProtoPie 的一组 Jump 和 Opacity 响应，可以轻松实现这种效果。完成本教程后，你将学会如何制作一个看起来很逼真的骨架屏 UI。

你将学到什么

在本课中，你将学习如何：

1. 使用 Tap 触发器和 Jump 响应在加载场景与已加载场景之间切换

2. 使用 Opacity 响应为骨架加载器添加闪烁效果

最后，你将能够做出这样的效果！

[起始 Pie 文件] [完成的 Pie 文件]

分步说明

1. 跳转到骨架加载器场景

　1. 在主场景 （场景 1） 中，在 "Social App" 图层上添加一个 Tap 触发器。

　2. 在 Tap 触发器下添加一个 Jump 响应。将 Jump 设置为骨架加载器场景 （场景 2）。将过渡设置为 Pop 以获得应用启动效果（你也可以根据原型添加任意过渡效果）。

💡 为什么使用 Jump 响应？

ProtoPie 基于场景工作。当我们想从一个场景切换到另一个场景时，请使用 Jump 响应。

2. 跳转到已加载内容场景

　1. 在骨架加载器场景 （场景 2） 中，添加一个 Start 触发器

　2. 在 Start 触发器下添加一个 Jump 响应。将 Jump 设置为已加载内容场景 （场景 3）。将过渡设置为 Fade 以获得信息淡入效果。另外，添加 3 秒延迟，因为我们希望信息在几秒后再加载出来。

💡 为什么要添加 3 秒延迟？

为了模拟加载效果。

3. 为骨架加载器添加闪烁效果

　1. 前往骨架加载器场景 （场景 2）

　2. 在 Skeleton 1 图层的 Start 触发器下添加一个 Opacity 响应，并将不透明度设置为 100。之后按以下步骤操作：

　3. 将 Opacity 响应再复制两次。并将这两个新的 Opacity 响应分别设置到 Skeleton 2 和 Skeleton 3 图层上。

　4. 复制现有的三个 Opacity 响应。将这三个新响应的 Start Delay 设置为 0.5。将 Opacity 设置为 50。

💡 Opacity 响应在做什么？

闪烁效果本质上是不透明度数值在 100 和 50 之间反复变化。Opacity 响应会重复将图层不透明度设置为 100，再回到 50。这有助于我们在屏幕上实现信息加载效果。

完成了！

感谢你的学习与跟进。现在你可以通过这些简单技巧实现骨架屏加载 UI 效果。快去亲自试试看吧！

[这篇内容有帮助吗？告诉我们！]