作業：利用 viewDidLoad 客製 App 畫面

想了很久不知道要做什麼，最後決定走一個浪漫路線～

這次作業使用了：

1. 以CAGradientLayer製作漸層背景
2. 加入繪製的圖案並做成動畫
3. 以SpriteKit製作粒子特效
4. 以AVFoundation SDK播放音樂
5. 播放背景音樂
6. 加入gif動畫

先上成品：

完整聲音版：

ViewDidLoad作業

這次依然參考了眾多大神的文章：

利用 CAGradientLayer 製作漸層

#82 利用 CABasicAnimation & CAShapeLayer 繪製線條動畫

利用 UIImageView 實現多張圖片連續播放的動畫

利用 SpriteKit Particle File 製造下雪的粒子效果

利用 AVPlayerLooper 重覆播放音樂和影片

一頁程式，一頁城市

建立漸層：

let gradientLayer = CAGradientLayer()
        gradientLayer.frame = view.frame
        gradientLayer.colors = [CGColor(red: 0, green: 0, blue: 0, alpha: 1), CGColor(red: 0, green: 0, blue: 1, alpha: 1), CGColor(red: 1, green: 1, blue: 1, alpha: 1)]
        //漸層比例
        gradientLayer.locations = [0.23, 0.8, 1]
        view.layer.addSublayer(gradientLayer)

應該看得出來用了黑藍白三個顏色做漸層，但有學到比較特別的部分是漸層的比例，效果如下：

然後是看起來很像螢火蟲的特效，是用SpriteKit Particle File做出來的，我是選用fireflies

let skView = SKView(frame: view.frame)
        view.insertSubview(skView, at: 1)
        let scene = SKScene(size:skView.frame.size)
        skView.allowsTransparency = true
        scene.anchorPoint = CGPoint(x: 0.5, y: 0.2)
        scene.backgroundColor = UIColor.clear
        let emitterNode = SKEmitterNode(fileNamed: "firefiles")
        scene.addChild(emitterNode!)
        skView.presentScene(scene)

加入草的剪影：

let grassView = UIImageView(image: UIImage(named: "草"))
grassView.contentMode = .scaleAspectFill
grassView.clipsToBounds = false
grassView.frame = CGRect(x: 0, y: view.bounds.height - 200, width: view.bounds.width, height: 200)
view.addSubview(grassView)

加入情侶剪影，想說挑戰一下用UIBezierPath畫，結果碰到一個大問題，就是情侶中間有一塊透明的圖不知道怎麼處理，最後只好求救Peter，程式碼：

//情侶色塊的中間透明
        path.move(to: CGPoint(x: 207, y: 256))
        path.addQuadCurve(to: CGPoint(x: 202, y: 319), controlPoint: CGPoint(x: 229, y: 289))
        path.addCurve(to: CGPoint(x: 207, y: 256), controlPoint1: CGPoint(x: 185, y: 296), controlPoint2: CGPoint(x: 209, y: 266))
        
        let emptyDraw = CAShapeLayer()
        emptyDraw.path = path.cgPath
        emptyDraw.lineWidth = 1
        emptyDraw.strokeColor = Color.black.cgColor
        //path以外部分填滿顏色（這一行是關鍵）
        emptyDraw.fillRule = .evenOdd
        coupleDraw.addSublayer(emptyDraw)

可以參考：

運用 evenOdd 的 fillRule 實現空心的裁切(遮罩)效果

情侶的Path程式碼就不貼了，太冗長～

然後就碰到了第二個問題，螢火蟲特效會被情侶擋住，如下：

又再次求救Peter😂

原來只要把程式碼改一下就行了

原本：
view.addSubview(coupleImage)
改成：
view.insertSubview(coupleImage, belowSubview: skView)

加毛玻璃：

//毛玻璃
        let blurView = UIVisualEffectView()
        blurView.frame = CGRect(x: 0, y: view.bounds.height * 0.35, width: view.bounds.width, height: 150)
        blurView.backgroundColor = UIColor.white
        blurView.alpha = 0.2
        view.addSubview(blurView)

加上文字：

//文字lable
        let lable = UILabel(frame: CGRect(x: 0, y: view.bounds.height * 0.35, width: view.bounds.width, height: 150))
        //字體路徑及註冊
        let fontUrl = Bundle.main.url(forResource: "Running_Script", withExtension: "ttf")! as CFURL
        CTFontManagerRegisterFontsForURL(fontUrl, .process, nil)
        lable.text = " 世界上最浪漫的事\n      就是有你的陪伴"
        lable.numberOfLines = 0
        lable.textColor = .white
        lable.font = UIFont(name: "HanWangShinSuMedium", size: 25)
        view.addSubview(lable)

加上心跳線，也是先用UIBezierPath畫路徑，再加上動畫的程式碼：

//心跳線加入動畫
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0
        animation.toValue = 1
        animation.duration = 4
        animation.repeatCount = .greatestFiniteMagnitude
        heartBeat.add(animation, forKey: nil)
        //縮放位移調整位置
        let heartView = UIView(frame: CGRect(x: 0, y: 0, width: 130, height: 130))
        heartView.layer.addSublayer(heartBeat)
        view.addSubview(heartView)
        heartView.transform = CGAffineTransform(translationX: 220, y: 270).scaledBy(x: 0.3, y: 0.3)

最後加入流星雨gif圖：

//流星雨gif
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height * 0.35))
        let animatedImage = UIImage.animatedImageNamed("6081.gif_wh300-", duration: 2.5)
        imageView.image = animatedImage
        view.addSubview(imageView)

就完成了！

附上Github：

GitHub - al6al60212/viewDidLoadWork