DSLR 用户界面不必平淡无奇；它们可以成为创新设计的画布，将功能性与引人入胜的美感相融合，从而丰富摄影体验。
在本文中，我们将分享设计交互式现代 UI 原型的技巧，从调节对焦和亮度到缩放效果与拍照。借助 ProtoPie 的强大能力，探索 DSLR 界面的全新方法！
概览
创建 DSLR 界面原型
设置对焦和亮度
创建放大和缩小效果
拍摄照片
浏览图库
图片控制组件
隔空投送弹窗
使用 ProtoPie 设计令人惊艳的相机界面
创建 DSLR 界面原型
我们的教程将带你踏上一段设计交互式 iOS 风格原型的旅程，为相机 UI 设计注入新鲜、现代的活力。立即开始教程，将你的界面概念转化为如下 DSLR UI 演示那样的动态现实。
设置对焦和亮度
为了创建与 iOS 相机类似的对焦和亮度设置，我们创建了 focus 容器，其中包含黄色方框和代表亮度滑块的太阳图标。
在相机容器上应用 Tap 触发器，以移动并淡入 focus 容器，显示用户当前对焦的位置。提前使用停止响应可确保在快速点击时动画不会互相干扰。
在太阳图标上使用 a** Drag **触发器，使太阳沿垂直方向移动。该值会链式关联到相机容器中白色和
black叠层的不透明度，从而创建亮度调节效果。向下拖动会变暗，向上拖动会变亮。
设置对焦和亮度
相机对焦。
创建放大和缩小效果
要创建缩放效果，我们只需对相机对象进行放大和缩小。
在 Camera 上使用 a** Pinch **触发器，以其原点为基准进行缩放。我们只设置了最小值，以防图像缩小到小于屏幕。
在
Camera的宽度上应用 a** Detect** 触发器，以调整缩放指示器（顶部中央的“1x”）。它使用以下公式实现：format(Camera.width / 500, "#.0") + "x"
创建放大和缩小效果。
相机变焦。
拍摄照片
在 DSLR 相机中，快门按钮通常是实体按键，因此在这个模型中我们用右侧的灰色圆圈替代了它。如果你想将原型连接到真实的实体按钮，当然也可以通过 ProtoPie Connect。
在
shutter button上应用 **Tap **触发器，以停止后方容器中的相机，并将其动画切换到前方。它们是pictures内的picture 1 container和picture 2 container。
理论上，即使拍摄多张照片，我们也只存储一张图像。另一个容器会被移到后方，其中的相机会再次开始捕捉。如果再次拍照，它会停止后方容器中的相机并将其动画切换到前方。
这样只用两个项目就能创建无限动画。对于此演示，存储一张图像就足够了，但如果你需要更多，可以添加更多图片容器。
拍摄照片。
图像捕捉。
浏览图库
pictures 包含你拍摄的图像。点击它时，我们会将其动画过渡到图库视图。类似地，返回箭头将执行相反操作。
在
pictures上使用 Tap 触发器，通过缩放和移动动画打开图库。如果图库已打开，则会打开图片详情。在
back chevron上 Apple a** Tap** 触发器以反转前一步。如果图片详情已打开，则返回图库；否则关闭图库并返回首页。
浏览图库。
图片库。
图片控制组件
Picture Controls 组件是在用户在图库中选择图片时进入视图的对象。
在
share按钮上应用 a** Tap** 触发器，向当前场景发送“share”并打开隔空投送弹窗。在
heart按钮上使用 Tap 触发器，在空心和实心图标之间切换
图片控制。
隔空投送弹窗
当用户点击图片控制中的分享图标时，会出现隔空投送弹窗。
在主场景中使用 Receive 触发器，将
Airdrop Modal组件上移，使其进入视口。在弹窗上应用 Drag 触发器，使其上下移动
Touch Up 触发器会在其不在顶部位置时让它向下移动
将隔空投送弹窗的 Y 位置与底层遮罩的不透明度进行链式关联，以便在弹窗打开时创建变暗背景。
隔空投送弹窗。
在 Airdrop Modal 组件内部，我们处理分享动画的逻辑。
在 Memoji 上添加 a** Tap** 触发器，通过淡入并将
loader对象旋转 360 度、同时将Status文本改为“正在发送”来启动发送动画。旋转完成后，我们将文本改为“已发送”并设为蓝色，同时淡出 loader 对象。将 loader 对象的旋转与左右遮罩进行链式关联，以创建圆形进度条效果。
分享动画。
隔空投送一张图片。
就是这样！🥧
Pie 的整体结构非常直观。欢迎你亲自深入研究Pie 文件，看看每个部分究竟如何运作，或者尝试制作你自己的版本！
使用 ProtoPie 设计令人惊艳的相机界面
为相机界面设计注入现代、动态的感觉。ProtoPie 让你的设计创意更轻松落地。你可以轻松模拟交互、测试用户体验并完善作品。免费开始，探索你的创意潜能！
