Question

我目前正在ARKit中创建交互式图形，并且一直在使用拉伸的UIBezierPaths来构成构成饼图的2个切片中的每个切片。我现在正尝试将动画添加到贝塞尔曲线路径，以便单击按钮时，弧长会设置动画，并且会增大或缩小以反映新的百分比。我已经看到了使用CAShapeLayer的资源，但是其中许多对我不起作用，因为它们是用Obj-C编写的，或者包含的框架不能用于当今的ARKit。

我当前用于创建图形的2部分的代码是：

func generateGraph(_ node: SCNNode, width: CGFloat, height: CGFloat, percent: Float, name: String, imageAnchor: ARImageAnchor, color1: FirebaseColors, color2: FirebaseColors) {

    let r: Float  = 30.0
    let modelHeight: Float = 0.05
    let modelWidth: Float = 0.05

    let big = UIBezierPath(arcCenter: CGPoint(x: CGFloat(modelWidth/2 + r/8), y: CGFloat(modelHeight/2 + r/8)), radius: CGFloat(r), startAngle: CGFloat(0), endAngle: CGFloat(Double.pi * 2 * Double(percent / 100)), clockwise: true)
    big.addLine(to: CGPoint(x: CGFloat(modelWidth/2 + r/8), y: CGFloat(modelHeight/2 + r/8)))
    big.close()

    let small = UIBezierPath(arcCenter: CGPoint(x: CGFloat(modelWidth/2 + r/8), y: CGFloat(modelHeight/2 + r/8)), radius: CGFloat(r), startAngle: CGFloat(Double.pi * 2 * Double(percent / 100)), endAngle: CGFloat(0), clockwise: true)
    small.addLine(to: CGPoint(x: CGFloat(modelWidth/2 + r/8), y: CGFloat(modelHeight/2 + r/8)))
    small.close()

    let bigShape = SCNShape(path: big, extrusionDepth: 20)
    let smallShape = SCNShape(path: small, extrusionDepth: 20)

    let bigMat = SCNMaterial()
    let smallMat = SCNMaterial()

    bigMat.diffuse.contents = color1.convertToUI
    smallMat.diffuse.contents = color2.converToUI

    let bigNode = SCNNode(geometry: bigShape)
    let smallNode = SCNNode(geometry: smallShape)

    let scaleFactor = 0.001
    bigNode.scale = SCNVector3(scaleFactor, scaleFactor, scaleFactor)
    smallNode.scale = SCNVector3(scaleFactor, scaleFactor, scaleFactor)

    bigNode.eulerAngles.x = .pi / 2
    smallNode.eulerAngles.x = .pi / 2

    let mainNodeToAdd = SCNNode()
    let planeGeometry = SCNPlane(width: width, height: height)
    planeGeometry.firstMaterial?.diffuse.contents = UIColor.white

    mainNodeToAdd.opacity = 0.0
    mainNodeToAdd.geometry = planeGeometry
    mainNodeToAdd.transform = SCNMatrix4MakeRotation(-Float.pi / 2, 1, 0, 0)
    mainNodeToAdd.runAction(self.fadeAction)

    node.addChildNode(mainNodeToAdd)

    bigNode.position = SCNVector3(x: mainNodeToAdd.position.x, y: mainNodeToAdd.position.y + 0.01, z: mainNodeToAdd.position.z)
    smallNode.position = SCNVector3(x: mainNodeToAdd.position.x, y: mainNodeToAdd.position.y + 0.01, z: mainNodeToAdd.position.z)

    node.addChildNode(bigNode)
    node.addChildNode(smallNode)
    bigNode.name = name
    smallNode.name = name
}

如何设置百分比变化的动画，以便我的图形可以在ARKit中使用？

如何在ARKit中为饼图制作动画-Swift

0 个答案: