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

【问题标题】：Swift: How to convert a particle network JS animation to iOSSwift：如何将粒子网络 JS 动画转换为 iOS
【发布时间】：2017-09-30 02:55:32
【问题描述】：

我发现了这个 javascript 动画： JS animation

我真的很想知道如何转换这样的动画以在我的 Swift iOS 应用程序中使用它。有人对可能的事情有经验吗？我找到了 spritekit 之类的东西，但我真的找不到关于此的正确信息/教程。

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

希望有人能帮助我，在此先感谢！

【问题讨论】：

使用 CGPaths 帮助设置您的网络，然后您可以沿路径运行 SKActions
@Knight0fDragon 感谢您的反应，我之前搜索了 CGPaths 的信息，但我真的不知道如何从中形成吸吮网络。 SKActions 不是问题，但你能帮我启动网络吗？或者你有什么例子吗？找不到太多关于它的信息...
您在 CGPath 中添加与您提供的网络完全相同的点
你是想在那个链接或类似的东西中制作那个精确的动画吗？
@TheValyreanGroup 对我来说不必精确，但我希望它是类似的东西。最重要的是 dat 点的网络是用线连接的，在链接中像这样移动

标签： javascript ios swift animation sprite-kit

【解决方案1】：

使用 customView 将他们的 js 代码升级为 swift。希望这是答案。当您以这种方式使用他们的代码时，请注意版权。这只是一个演示。

具体来说，这里需要圆形类来表示它们的点。在storyboard中，给MyView分配一个UIView，就可以得到结果了。

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()
    }
}

}

【讨论】：

【解决方案2】：

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

【讨论】：