#4客製 App 畫面

使用功能

1. 利用AVPlayerLooper 重覆播放影片
2. 利用CAShapeLayer 繪製線條動畫
3. 利用 CAGradientLayer 加入間曾
4. 利用 mask 將漸層套在星星裡
5. 利用 UIImageView 實現多張圖片連續播放的動畫（gif）

一.加入音樂

//把音效下載下來放入檔案播放
        let url = Bundle.main.url(forResource: "音效", withExtension: "mp3")!
        let playerItem = AVPlayerItem(url: url)
        player.replaceCurrentItem(with: playerItem)
        player.play()

將音樂，影片，文字檔等素材加到 iOS App，然後透過 URL 讀取

二.加入四個不同背景

//製作四個不同情景的背景
        let back1 = UIImage(named: "瑪利歐背景1.jpeg")
        let backgroung1 = UIImageView(image: back1)
        backgroung1.frame = CGRect(x: 0, y: 50, width: 400, height: 200)
        
        view.addSubview(backgroung1)
        
        
        let back2 = UIImage(named: "瑪利歐背景2.jpeg")
        let backgroung2 = UIImageView(image: back2)
        backgroung2.frame = CGRect(x: 0, y: 250, width: 400, height: 200)
        
        view.addSubview(backgroung2)
        let back3 = UIImage(named: "瑪利歐背景3.jpeg")
        let backgroung3 = UIImageView(image: back3)
        backgroung3.frame = CGRect(x: 0, y: 450, width: 400, height: 200)
        view.addSubview(backgroung3)
        let back = UIImage(named: "瑪利歐背景.jpeg")
        let backgroung = UIImageView(image: back)
        backgroung.frame = CGRect(x: 0, y: 650, width: 400, height: 200)
        
        view.addSubview(backgroung)

三.加入瑪利歐GIF

//瑪利歐gif
        let marioimageview = UIImageView(frame: CGRect(x: 10, y: 90, width: 100, height: 104))
        marioimageview.image = UIImage.animatedImageNamed("animated-8-bit-super-mario-image-0002-", duration: 1)
        
      backgroung.addSubview(marioimageview)

四.繪製星星

//畫星星
        let path = UIBezierPath()
           path.move(to: CGPoint(x: 6, y: 96))
        path.addLine(to: CGPoint(x: 57, y: 112))
           path.addLine(to: CGPoint(x: 86, y:  156))
           path.addLine(to: CGPoint(x: 119, y: 109))
           path.addLine(to: CGPoint(x: 168, y: 96))
           path.addLine(to: CGPoint(x: 135, y: 56))
           path.addLine(to: CGPoint(x: 136, y: 7))
           path.addLine(to: CGPoint(x:87 , y: 21))
           path.addLine(to: CGPoint(x: 40, y: 5))
           path.addLine(to: CGPoint(x: 38, y: 60))
           path.close()
           
        let starLayer = CAShapeLayer()
           starLayer.path = path.cgPath

五.加入漸層，並用mask在星星形狀內

//星星漸層(用漸層畫圖就不能用任何邊框和顏色)
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 160)
        gradientLayer.colors = [UIColor.yellow.cgColor, UIColor.white.cgColor]
         backgroung1.layer.addSublayer(gradientLayer)
        gradientLayer.mask = starLayer

完整程式碼

import UIKit
import AVFoundation


class ViewController: UIViewController {
    let player = AVPlayer()

    override func viewDidLoad() {
        super.viewDidLoad()
        //把音效下載下來放入檔案播放
        let url = Bundle.main.url(forResource: "音效", withExtension: "mp3")!
        let playerItem = AVPlayerItem(url: url)
        player.replaceCurrentItem(with: playerItem)
        player.play()
        
        //製作四個不同情景的背景
        let back1 = UIImage(named: "瑪利歐背景1.jpeg")
        let backgroung1 = UIImageView(image: back1)
        backgroung1.frame = CGRect(x: 0, y: 50, width: 400, height: 200)
        
        view.addSubview(backgroung1)
        
        
        let back2 = UIImage(named: "瑪利歐背景2.jpeg")
        let backgroung2 = UIImageView(image: back2)
        backgroung2.frame = CGRect(x: 0, y: 250, width: 400, height: 200)
        
        view.addSubview(backgroung2)
        let back3 = UIImage(named: "瑪利歐背景3.jpeg")
        let backgroung3 = UIImageView(image: back3)
        backgroung3.frame = CGRect(x: 0, y: 450, width: 400, height: 200)
        view.addSubview(backgroung3)
        let back = UIImage(named: "瑪利歐背景.jpeg")
        let backgroung = UIImageView(image: back)
        backgroung.frame = CGRect(x: 0, y: 650, width: 400, height: 200)
        
        view.addSubview(backgroung)
        //瑪利歐gif
        let marioimageview = UIImageView(frame: CGRect(x: 10, y: 90, width: 100, height: 104))
        marioimageview.image = UIImage.animatedImageNamed("animated-8-bit-super-mario-image-0002-", duration: 1)
        
      backgroung.addSubview(marioimageview)
        //畫星星
        let path = UIBezierPath()
           path.move(to: CGPoint(x: 6, y: 96))
        path.addLine(to: CGPoint(x: 57, y: 112))
           path.addLine(to: CGPoint(x: 86, y:  156))
           path.addLine(to: CGPoint(x: 119, y: 109))
           path.addLine(to: CGPoint(x: 168, y: 96))
           path.addLine(to: CGPoint(x: 135, y: 56))
           path.addLine(to: CGPoint(x: 136, y: 7))
           path.addLine(to: CGPoint(x:87 , y: 21))
           path.addLine(to: CGPoint(x: 40, y: 5))
           path.addLine(to: CGPoint(x: 38, y: 60))
           path.close()
           
        let starLayer = CAShapeLayer()
           starLayer.path = path.cgPath
      
        //星星漸層(用漸層畫圖就不能用任何邊框和顏色)
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 160)
        gradientLayer.colors = [UIColor.yellow.cgColor, UIColor.white.cgColor]
         backgroung1.layer.addSublayer(gradientLayer)
        gradientLayer.mask = starLayer
        
        
          
                
                
               
                
                
            }
        }

              

成品

客制app畫面

GitHub - gawer521n52/-app