按钮与交互-使用按钮触发操作

在本节中,我们将介绍一个重要且简单的元素,即按钮。这个小元素可以改变整个UX。我们将使用该按钮来缩放我们的3D模型。此外,我们将尝试更改手机的壁纸。对于您的型号,如果您有不同的材质或颜色,您也可以更改它。

下载按钮和互动

要学习本教程,您需要Xcode 10。您可以下载Final Xcode项目,以帮助您与自己的进度进行比较。

设置

现在,您可以更改项目名称并添加应用程序图标。在设置页面中,将显示名称更改为角度AR或所需名称。在资产目录中,将应用程序图标从assets文件夹拖放到选定的插槽中。

主要故事板

我们在屏幕上放置一些按钮。使用模板,主故事板附带一个ARSCNView,我们无法在其上放置按钮。首先,删除ARSCNView并放置UIView。拥有UIView,允许我们放置这3个按钮并添加约束。这是按钮的约束:

按钮

约束

PlaceScreen

左:46点 / 底部:28点

加号按钮

水平中心 / 底部:28点

减号按钮

右:46点 / 底部:28点

放置按钮后放回ARSCNView,并将约束条件设置为0,即四边。确保约束视图的每一侧而不是安全区域。取消选中Constrain到边距。在布局中,将ARSCNView放在View下方,否则按钮将不会显示。

约束

IBAction为

现在我们有了按钮,我们需要给它们功能。通过单击右上角带有双圆圈的图标启用助理编辑器。您将看到我们同时拥有主故事板和代码。在swift文件中,您将看到一个与之前的ARSCNView链接的IBOutlet。由于我们删除了那个,将新的ARSCNView链接到该Outlet

让我们通过按住Control创建3个IBAction 并拖动ARSCNView Outlet 声明正下方的每个按钮。

选择:IBAction将它们命名为:plusButtonTapped,minusButtonTapped和placeScreenButtonTapped类型:UIButton

IBActions

类变量

2个第一个按钮的目的是能够调整我们的3D模型的大小。问题是iPhoneNode的声明是渲染器方法的局部变量。解决方案是声明另一个变量并使其成为与iPhoneNode相同的节点。在根级别和渲染器内声明变量iPhoneXNode,将2个变量匹配在一起。

var iPhoneXNode = SCNNode()

把这一行放在最后。

iPhoneXNode = iPhoneNode

iPhoneNodeChild

变换

IBAction的括号内,您可以放置​​指定按钮的功能。对于plusButtonTapped,声明一个常量,这是一个缩放操作,并将数量设置为2x,持续时间为2秒。让iPhoneXNode运行此操作。对minusButtonTapped重复相同的步骤,但不是将模型缩放2x,而是将其更改为0.5。

@IBAction func plusButtonTapped(_ sender: UIButton) {
    let scalePlus = SCNAction.scale(by: 2, duration: 2)
    iPhoneXNode.runAction(scalePlus)
}

@IBAction func minusButtonTapped(_ sender: UIButton) {
    let scaleMinus = SCNAction.scale(by: 0.5, duration: 2)
    iPhoneXNode.runAction(scaleMinus)
}

切换材质

对于最后一个按钮,我们将更改3D模型的漫反射材质。在我们的例子中,这意味着我们正在改变iPhone的屏幕。调用节点并访问其漫反射材质。然后,转到art.scnassets并找到不同的屏幕。对我们来说,它是AR-Screen.png

@IBAction func placeScreenButtonTapped(_ sender: Any) {
    iPhoneXNode.geometry?.firstMaterial?.diffuse.contents = UIImage(named: "art.scnassets/AR-Screen.png")
}

结论

在本节中,我们学习了如何在Storyboard中放置按钮并约束它们。此外,我们将它们连接到代码,这样我们就可以提供功能。到目前为止,您可以使用按钮执行许多令人惊叹的事情。

原文: https://designcode.io/arkit-buttons

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券