# ✏️ 17주차 \[8기\] B반 스터디

## 🗓2023-05-13

**참여자** : 리지, vetto, 송준

**진행자** : vetto

## \[금주의 실험🔥\] CoreAnimations

### 👨‍🔬 실험 1: Layer Based Drawing 해보기

<img src ="https://s3.ap-northeast-2.amazonaws.com/media.yagom-academy.kr/resources/usr/6131c8fa2e11413823f8dd7f/20220225/621887f4536b5e1551d11266.png" width="300">

- 아래가 볼록한 모양의 컵이 있습니다.
- 컵에는 음료가 담길 수 있습니다.
- 컵 안에는 빨대가 하나 들어있습니다.

### 트러블 슈팅

- 컵 바닥 호 그리기

path.addQuadCurve(to: , controlPoint: )

addQuadCurve를 활용해 to에 끝지점, controlPoint에 중간 지점을 넣어 그려줌
[계산해주는 사이트](https://www.desmos.com/calculator/lvdgnyhkvy?lang=ko)

- 빨대 끝 부분 동그랗게 그리기
`path.lineCapStyle` 에 round 값을 주어도 layer의 값이 변하지 않는 문제가 있었는데, path에 주는것이 아니라 layer 자체의 lineCap 스타일을 변화시키니 정상적으로 작동하였음.

let path = UIBezierPath()
path.lineWidth = 15
strawLayer.lineWidth = path.lineWidth
strawLayer.lineCap = .round

- Mask
어떤 부분을 제외하고 보여주고 싶을 때, 그 부분을 투명처리해서 가리고 보여줄 수 있게 사용할 수 있는 Layer 계층

- 컵 path와 동일하게 구현
- drinksLayer.mask에 넣어줌
- mask의 path 값을 조절하여 음료 양 조절

## 개인 작품

### 송준
<details><summary>소스코드</summary>

func makeCupPath() {
        let cupPath = UIBezierPath()
        
        cupPath.move(to: CGPoint(x: width * 0.15, y: height * 0.15))
        cupPath.addLine(to: CGPoint(x: width * 0.35, y: height * 0.75))
        cupPath.stroke()
        
        cupPath.move(to: CGPoint(x: width * 0.85, y: height * 0.15))
        cupPath.addLine(to: CGPoint(x: width * 0.65, y: height * 0.75))
        cupPath.stroke()
        
        cupPath.addQuadCurve(to: CGPoint(x: width * 0.35, y: height * 0.75),
                             controlPoint: CGPoint(x: width * 0.5, y: height * 0.825))
        cupPath.stroke()
        
        self.layer.addSublayer(cupShapeLayer)
        cupShapeLayer.path = cupPath.cgPath
    }

:fire: `addQuadCurve`메서드를 사용할 경우 `to` 부분에 시작점을 넣지 않고 끝나는 지점을 넣어줘야 한다. (addLine도 마찬가지)
</details>

### vetto

<details>
<summary>소스코드</summary></summary>

func drawCup() {
    let cupPath = UIBezierPath()
        
    cupPath.move(to: CGPoint(x: 180, y: 200))
    cupPath.addLine(to: CGPoint(x: 200, y: 350))
    cupPath.addLine(to: CGPoint(x: 240, y: 350))
    cupPath.addLine(to: CGPoint(x: 260, y: 200))
    cupPath.stroke()
        
    cupLayer.frame = self.view.frame
    cupLayer.path = cupPath.cgPath
    cupLayer.strokeColor = UIColor.lightGray.cgColor
    cupLayer.fillColor = UIColor.clear.cgColor
    cupLayer.lineWidth = 10
    self.view.layer.addSublayer(cupLayer)
}

func drawStraw() {
    let strawPath = UIBezierPath()
        
    strawPath.lineCapStyle = .round
    strawPath.move(to: CGPoint(x: 220, y: 340))
    strawPath.addLine(to: CGPoint(x: 250, y: 190))
    strawPath.addLine(to: CGPoint(x: 270, y: 160))
    strawPath.stroke()
        
    strawLayer.frame = self.view.frame
    strawLayer.path = strawPath.cgPath
    strawLayer.strokeColor = UIColor.darkGray.cgColor
    strawLayer.fillColor = UIColor.clear.cgColor
    strawLayer.lineWidth = 10
    self.view.layer.addSublayer(strawLayer)
}

</details>

### 리지

<details>
<summary>소스 코드</summary></summary>

final class DrinksView: UIView {
    
    let edgeOfCupsLayer = CAShapeLayer()
    let strawLayer = CAShapeLayer()
    let drinksLayer = CAShapeLayer()
    let maskingLayer = CAShapeLayer()

    func makeCup() {
        let path = UIBezierPath()
        path.lineWidth = 15
        
        path.move(to: CGPoint(x: 100, y: 200))
        path.addLine(to: CGPoint(x: 130, y: 500))
        path.addQuadCurve(to: CGPoint(x: 250, y: 500), controlPoint: CGPoint(x: 190, y: 515.6))
        path.addLine(to: CGPoint(x: 280, y: 200))
        
        edgeOfCupsLayer.strokeColor = UIColor.systemGray4.cgColor
        edgeOfCupsLayer.fillColor = UIColor.clear.cgColor
        edgeOfCupsLayer.lineWidth = path.lineWidth
        
        self.layer.addSublayer(edgeOfCupsLayer)
        edgeOfCupsLayer.path = path.cgPath

    }
    
    func makeStraw() {
        let path = UIBezierPath()
        path.lineWidth = 10
        
        path.move(to: CGPoint(x: 340, y: 120))
        path.addLine(to: CGPoint(x: 250, y: 210))
        path.addLine(to: CGPoint(x: 150, y: 480))
        
        strawLayer.strokeColor = UIColor.gray.cgColor
        strawLayer.fillColor = UIColor.clear.cgColor
        strawLayer.lineWidth = path.lineWidth
        strawLayer.lineCap = .round
        
        self.layer.addSublayer(strawLayer)
        strawLayer.path = path.cgPath
        
    }
    
    func makeMasking() {
        let path = UIBezierPath()
    
        path.move(to: CGPoint(x: 100, y: 300))
        path.addLine(to: CGPoint(x: 130, y: 500))
        path.addQuadCurve(to: CGPoint(x: 250, y: 500), controlPoint: CGPoint(x: 190, y: 515.6))
        path.addLine(to: CGPoint(x: 280, y: 300))
       
        maskingLayer.path = path.cgPath
        drinksLayer.mask = maskingLayer
    }
    
    func makeDrinks() {
        let path = UIBezierPath()
    
        path.move(to: CGPoint(x: 100, y: 200))
        path.addLine(to: CGPoint(x: 130, y: 500))
        path.addQuadCurve(to: CGPoint(x: 250, y: 500), controlPoint: CGPoint(x: 190, y: 515.6))
        path.addLine(to: CGPoint(x: 280, y: 200))
        
        drinksLayer.strokeColor = UIColor.clear.cgColor
        drinksLayer.fillColor = UIColor.brown.cgColor
        
        self.layer.addSublayer(drinksLayer)
        drinksLayer.path = path.cgPath
    }

}
class ViewController: UIViewController {
    
    let drinkView = DrinksView()

    override func viewDidLoad() {
        super.viewDidLoad()
       
        view.addSubview(drinkView)
        drinkView.makeCup()
        drinkView.makeStraw()
        drinkView.makeMasking()
        drinkView.makeDrinks()
    }
}

</details>

###### tags: `toyo`