Swift: How to convert a particle network JS animat

问题:

I found this javascript animation: JS animation

I really want to know how I can convert animations like this to use it in my Swift iOS app. Has anybody got experience in likely things? I found things like spritekit, but I really can't find the right info/tutorials about this.

Maybe someone does know what I should do/look up?

Hope anybody can help me, thanks in advance!

回答1:

Use a customView to upgrade their js codes to swift. Hope it is the answer. Beware of the copyright when you use their codes in this way. It's just for a demo.

In details, circle class is needed here to represent their points. In storyboard, assign a UIView to MyView and you can get the result.

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:

Using SpriteKit, To make the animation in that link you provided, I would create a loop that generates N number of dots (SKSpriteNodes) randomly placed on the scene. Then recursively move each dot to a new random location. Then, in the update() function of the scene, loop over all the dots and run some calculations to determine if dot X is within so many points of any other dot on the scene and create a CGPath between those two. And remove that CGPath if is not.