内容概览

• 创建数码单反界面原型
• 对焦与亮度设置
• 制作变焦效果
• 捕获照片
• 导航到照片图库
• 照片控制组件
• 隔空投送
• 使用 ProtoPie 设计超越传统的相机交互界面

创建数码单反界面原型

对焦与亮度设置

• 在相机容器上点击，从而产生单击触发动作时，focus 容器将会随之移动和渐显，以便显示和提示用户当前的焦点位置。在此需要用停止反应动作来确保用户快速点击时呈现的动画效果不会被相互干扰。
• 在太阳图标上应用拖拽触发动作可以使太阳图标能在垂直方向上移动。相机容器内有两个分别名为 white和 black 的覆盖层，太阳图标移动时产生变化的位置值就关联到这两个覆盖层的不透明值上，从而创造出亮度调整的效果——向下拖动时画面会变暗，向上拖动时画面会变亮。

对焦及亮度设置

相机对焦

制作变焦效果

• 在相机容器上应用缩放触发动作，使其基于其原点进行缩放。在此我们需要设置一个最小值，以避免图像变得比屏幕还小、产生不真实的体验效果。
• 将一个监听触发动作应用到Camera（相机）容器的宽度上以便调整缩放倍率显示，即调整位于顶部中央的 “1x” 字样。这里用到了这个表达式：format(Camera.width / 500, "#.0") + "x"

制作变焦效果

相机变焦效果

捕获照片

• 在shutter button（快门按键）上应用单击触发动作来停止位于后部容器里的相机，并将其以动画展现的方式调入前部，即可实现这样的效果。注意这里的 pictures 中包含了 picture 1 container 和 picture 2 container 这两个容器。

捕获照片

照片图库

导航到照片图库

• 在pictures容器上应用单击触发动作，配合缩放和移动的动画来呈现打开照片图库的过程，如果照片图库已经打开，则这一操作将打开所点击图片的大图。
• 在back chevron（返回按钮）上应用单击触发动作来实现回到上一画面。如果当前打开的是大图，则返回照片图库，如果当前显示的是照片图库，则这一操作会关闭照片图库并回到前面的相机模式中。

导航到照片图库

照片图库

照片控制组件

• 在share（分享）按钮上应用单击触发动作，使其发送 “share” 消息到当前场景并打开隔空投送。
• 在 heart（心形） 按钮上应用单击触发动作，使其在空心和实心之间切换。

照片控制

隔空投送

• 在主场景中使用接收触发动作来向上弹出 Airdrop Modal 组件，使其位于可视范围内。
• 在隔空投送模式显示组件上应用拖拽触发动作，使其可以上下拖动。
• 抬起触发动作可以使拖拽动作结束、手指抬起时，让已经下滑到一半的隔空投送组件继续下滑到隐藏位置。
• 联动触发动作使隔空投送组件出现时，其后面背景上的图像根据组件的垂直方向位置来设置自身的不透明度，以呈现出根据组件下滑位置来渐变的深色背景。

隔空投送

• 在头像图标上添加了单击触发动作，触发时使 loader 对象渐显并旋转360度，同时将 Status 对象的显示文字改为 “Sending”。在旋转完成后，又将文字改为蓝色的 “Sent” 字样，并同时淡出 loader 对象。
• 联动触发动作用于控制和关联 loader 对象的旋转与左右遮罩之间的关系，以此营造出环形进度条的效果。

共享的动效逻辑

隔空投送一张照片

以上就是全部内容！🥧

使用 ProtoPie 设计超越传统的相机交互界面