Swift：如何将粒子网络JS动画转换为iOS [英] Swift: How to convert a particle network JS animation to iOS

问题描述

我找到了这个javascript动画：
JS动画

I found this javascript animation: JS animation

我真的想知道如何将这样的动画转换为在我的Swift iOS应用程序中使用它。
有没有人有可能的经验？我发现像spritekit这样的东西，但我真的找不到关于这个的正确信息/教程。

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!

推荐答案

使用customView将其js代码升级为swift。希望这是答案。以这种方式使用代码时要小心版权。它仅用于演示。

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.

详细信息，此处需要使用圆圈类来表示他们的观点。在故事板中，为UView分配一个UIView，你可以得到结果。

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

}

这篇关于Swift：如何将粒子网络JS动画转换为iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！