本文最初由 Graeme Fulton 和 Prilly 为 Prototypr.io 撰写。
这 12 个短视频将带你使用 ProtoPie 的一些基础功能，完成一个深色模式切换开关的创建。
下载深色模式切换原型并亲自试一试。
#1：太阳切换
第一步只是将太阳从左侧移动到右侧。这是我们的第一个交互，它将为后续切换被点击后发生的其余事件提供 “框架” 。
#2：旋转太阳
在这一部分中，我们将向你展示如何旋转太阳。这将是一个为界面增添个性的微交互。
#3：缩放形状
让我们使用 Scale 和 Opacity 两种响应。我们希望在切换交互中实现的效果之一是太阳旋转变成月亮，反之亦然。为此，我们需要改变太阳的缩放比例。
#4：让太阳消失并重新出现
在这里，我们将向你展示如何让太阳消失并重新出现。我们将使用 Opacity 响应以及我们已有的两个 Conditions。
#5：旋转月亮
和太阳的做法类似，我们需要为月亮创建交互。这几乎就像把两个 Conditions 中的响应互换一下。
#6：缩放月亮
在这一步中，我们将像处理太阳那样让月亮进行缩放。这是你第一次看到完整比例的月亮！
#7：结合透明度的缩放
在进入其他部分之前，我们将改变月亮的透明度并完成形变错觉。
接下来，在让切换从浅色到深色、再从深色回到浅色的过程中，我们将看看如何创建一些颜色过渡。我们会看到，加入一些小细节如何让我们的切换更具特色。
#8：颜色过渡
为背景添加颜色过渡能在切换时为用户提供更多反馈。既然我们让太阳变成月亮，那么背景也从浅色变为深色、再反向变化就再合适不过了。
#9：更多颜色过渡
既然我们已经添加了背景颜色过渡，那么固定矩形也相应改变颜色就很合理了。
#10：椭圆颜色
为了完成我们的颜色过渡，我们将遵循与之前类似的步骤。
让我们通过最后的润色，让这个切换按钮真正与众不同。
#11：弹簧动画
每朵云都会用编号表示（即云 1、云 2 和云 3）。我们将为每朵云实现相同的交互。
#12：组合弹簧动画
最后，我们将让星星动起来！这里的交互与上一段视频中移动云朵非常相似。
喜欢这些教学视频吗？欢迎查看我们自己的 ProtoPie School，你可以在这里免费获取从 A 到 Z 学习如何使用 ProtoPie 的内容。
