Swift：如何将粒子网络JS动画转换为iOS？

Question

我发现了这个JavaScript动画：JS动画 我非常想知道如何将类似的动画转换为可以在我的Swift iOS应用中使用的动画。有人有类似的经验吗？我找到了像SpriteKit这样的东西，但我真的找不到正确的信息/教程。

也许有人知道我应该做什么/查找什么？

希望有人能帮我，提前感谢！

- Vano

---

使用CGPaths来帮助设置您的网络，然后您可以沿着路径运行SKActions。 - Knight0fDragon

@Knight0fDragon 感谢您的回复，我之前搜索了CGPaths的信息，但我真的不知道如何从中形成这样一个网络。SKActions不是问题，但您能帮助我启动网络或提供任何示例吗？找不到太多相关资料... - Vano

你可以向你的CGPath添加与你提供的网络完全相同的点。 - Knight0fDragon

你是想要制作那个链接中的精确动画还是类似的东西？ - TheValyreanGroup

@TheValyreanGroup 不必完全相同，但希望它能够类似。最重要的是，点的网络与线相连，就像链接中移动的那样。 - Vano

Answer 1

使用自定义视图将他们的js代码升级到Swift。希望这是答案。在此方式中使用他们的代码时要注意版权问题，仅供演示。

具体来说，这里需要圆形类来表示它们的点。在故事板中，将一个UIView分配给MyView，即可得到结果。

class Circle : NSObject {
var position: CGPoint!
var speed : CGPoint!
init(position: CGPoint, speed: CGPoint) {
    super.init()
    self.position = position
    self.speed = speed
}
}

class MyView : UIView{
var balls: [Circle] = []

override func  didMoveToSuperview() {
    super.didMoveToSuperview()
    clearsContextBeforeDrawing = true
    contentMode = .redraw
    clipsToBounds = false
    func randomValue () -> CGFloat {
      let upperBound : UInt32 = 1000;
      return (CGFloat(arc4random_uniform(upperBound))) / CGFloat(upperBound);
    }
    let array = (0..<Int(bounds.width*bounds.height / (65*65))).map { _ in
        Circle.init(position: CGPoint.init(x: bounds.width * randomValue() , y: bounds.height * randomValue()), speed: CGPoint.init(x: randomValue() * 2 - 1 , y:randomValue() * 2 - 1) ) }
    balls.append(contentsOf: array)
 let    displayLink =  CADisplayLink.init(target: self, selector: #selector(update(_:)))
    displayLink.add(to: RunLoop.main, forMode: RunLoop.Mode.default)
}

@objc  func update(_ sender : CADisplayLink){
    self.setNeedsDisplay()
}

override func draw(_ rect: CGRect) {
    super.draw(rect)
    let ctx = UIGraphicsGetCurrentContext()!
    _ = (0..<(balls.count)).map{
        let circle =  balls[$0]
        if (circle.position.x > rect.size.width + 50 || circle.position.x < -50) {
            circle.speed.x = -circle.speed.x;
        }
        if (circle.position.y > rect.size.height + 50 || circle.position.y < -50) {
            circle.speed.y = -circle.speed.y;
        }
        circle.position.x += circle.speed.x;
        circle.position.y += circle.speed.y;
    }
    let color = UIColor.init(red: 0, green: 0x1c / 255 , blue: 0x33 / 255, alpha: 1.0).cgColor
    ctx.setFillColor(color )
    ctx.fill(rect)

    _ = (0..<(balls.count)).map{
        let ball = balls[$0];
        ctx.beginPath()
        let color = UIColor.init(red: 0x44 / 255 , green: 0x8f / 255 , blue: 0xda / 255, alpha: 0.4).cgColor
        ctx.setFillColor(color)
        ctx.addArc( center: ball.position , radius: 3.0, startAngle: 0, endAngle: .pi * 2, clockwise: false)
        ctx.fillPath()
        ctx.beginPath();
        var index2 = balls.count - 1
        while (index2 > $0 ){
            let ball2 = balls[index2];
            let dist =   hypot(ball.position.x - ball2.position.x  , ball.position.y - ball2.position.y );
            if (dist < 100) {
                ctx.setStrokeColor(UIColor.init(red: 0x44 / 255, green: 0x8f / 255, blue: 0xda / 255, alpha: 1.0).cgColor )
                ctx.setAlpha( 1 - (dist > 100 ? 0.8 : dist / 150) )
                ctx.setLineWidth(2);
                ctx.move(to: CGPoint.init(x: 0.5 + ball.position.x, y: 0.5 + ball.position.y))
                ctx.addLine(to:  CGPoint.init(x: 0.5 + ball2.position.x, y: 0.5 + ball2.position.y))
            }
            index2 -= 1;
        }
        ctx.strokePath()
    }
}

}

- E.Coms

Answer 2

使用SpriteKit，为了制作您提供的链接中的动画，我会创建一个循环来生成N个随机放置在场景上的点（SKSpriteNodes）。然后递归地将每个点移动到新的随机位置。然后，在场景的update()函数中，循环遍历所有点并运行一些计算，以确定点X是否在场景上的任何其他点的距离内，并在这两个点之间创建一个CGPath。如果没有，则删除该CGPath。

- TheValyreanGroup