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

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

下载按钮和互动

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

设置

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

主要故事板

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

放置按钮后放回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