如何为球形SKNode创建非粒子类型的轨迹效果？

嘿，我来帮你搞定这个轨迹效果！你想要的那种跟随球形节点移动的连续轨迹，用SKShapeNode来实现是最贴合需求的——比粒子系统更精准可控。下面是具体的实现思路和代码示例：

本质就是用SKShapeNode维护一条动态更新的路径：每帧记录球形节点的当前位置，把新的点添加到路径中，再同步更新SKShapeNode的path属性，就能得到跟随节点移动的轨迹了。

1. 基础元素准备 #

先创建你的球形节点和轨迹节点，同时设置好样式（颜色、线宽等）：

import SpriteKit

class GameScene: SKScene {
    // 你的球形节点
    private let ballNode = SKShapeNode(circleOfRadius: 20)
    // 轨迹节点
    private let trailNode = SKShapeNode()
    // 存储轨迹点的数组，用来维护路径
    private var trailPoints = [CGPoint]()
    // 可选：限制轨迹最大点数，避免路径过长拖慢性能
    private let maxTrailPoints = 50
    
    override func didMove(to view: SKView) {
        // 配置球形节点
        ballNode.fillColor = .systemBlue
        ballNode.position = CGPoint(x: size.width/2, y: size.height/2)
        addChild(ballNode)
        
        // 配置轨迹节点样式
        trailNode.strokeColor = .systemGray
        trailNode.lineWidth = 3
        trailNode.lineCap = .round
        trailNode.lineJoin = .round
        addChild(trailNode)
    }
}

2. 每帧更新轨迹 #

在update(_:)方法里，获取球形节点的当前位置并更新轨迹路径：

override func update(_ currentTime: TimeInterval) {
    // 这里模拟球形节点的移动，你可以替换成自己的移动逻辑（比如触摸控制、物理运动）
    let randomMove = SKAction.moveBy(x: CGFloat.random(in: -5...5), y: CGFloat.random(in: -5...5), duration: 0)
    ballNode.run(randomMove)
    
    // 获取当前球的位置
    let currentPoint = ballNode.position
    
    // 添加新的轨迹点
    trailPoints.append(currentPoint)
    
    // 超过最大点数时，移除最早的点，保持轨迹长度可控
    if trailPoints.count > maxTrailPoints {
        trailPoints.removeFirst()
    }
    
    // 更新轨迹路径
    if trailPoints.count > 1 {
        let path = CGMutablePath()
        path.move(to: trailPoints[0])
        
        // 方式1：直线连接（简单直接）
        for point in trailPoints.dropFirst() {
            path.addLine(to: point)
        }
        
        // 方式2：平滑曲线（可选，更自然的轨迹）
        // for i in 1..<trailPoints.count {
        //     let midPoint = CGPoint(x: (trailPoints[i-1].x + trailPoints[i].x)/2, y: (trailPoints[i-1].y + trailPoints[i].y)/2)
        //     if i == 1 {
        //         path.move(to: trailPoints[i-1])
        //     } else {
        //         path.addQuadCurve(to: midPoint, control: trailPoints[i-1])
        //     }
        // }
        // if trailPoints.count > 1 {
        //     path.addLine(to: trailPoints.last!)
        // }
        
        trailNode.path = path
    }
}

3. 可选：实现渐隐轨迹 #

如果你想要轨迹慢慢消失的效果，可以换一种思路：每帧创建一个短的轨迹段节点，给它添加淡出动画后自动移除：

// 替换上面的update方法，实现渐隐轨迹
private var previousBallPosition: CGPoint?

override func update(_ currentTime: TimeInterval) {
    // 模拟移动
    let randomMove = SKAction.moveBy(x: CGFloat.random(in: -5...5), y: CGFloat.random(in: -5...5), duration: 0)
    ballNode.run(randomMove)
    
    // 创建单段轨迹节点
    let segmentNode = SKShapeNode()
    segmentNode.strokeColor = .systemGray
    segmentNode.lineWidth = 3
    segmentNode.lineCap = .round
    
    let path = CGMutablePath()
    path.move(to: previousBallPosition ?? ballNode.position)
    path.addLine(to: ballNode.position)
    segmentNode.path = path
    
    addChild(segmentNode)
    
    // 记录当前位置作为下一段的起点
    previousBallPosition = ballNode.position
    
    // 让轨迹段渐隐并自动移除
    let fadeOut = SKAction.fadeOut(withDuration: 1.0)
    let remove = SKAction.removeFromParent()
    segmentNode.run(SKAction.sequence([fadeOut, remove]))
}

• 如果你的球形节点是用SKSpriteNode实现的（不是SKShapeNode），只需要把ballNode.position换成精灵节点的位置即可，逻辑完全通用。
• 可以通过调整trailNode的strokeColor（比如用带透明度的颜色）、lineWidth等属性，让轨迹更贴合你截图里的效果。

内容的提问来源于stack exchange，提问作者Umesh Y