[🧩 Creative Coding] 줄에 매달려 흔들리는 상자 만들기 (feat. Interactive Developer)

🍎 iOS/UI

[🧩 Creative Coding] 줄에 매달려 흔들리는 상자 만들기 (feat. Interactive Developer)

Fomagran 💻 2021. 11. 23. 23:12

728x90

안녕하세요 Foma 💻 입니다!

오늘은 줄에 매달려 흔들리는 상자를 만들어 볼건데요.

이건 제가 존경하는 개발자이기도 한 인터랙티브 디벨로퍼 김종민님의 유튜브 채널에 올라온 튜토리얼 중 하나인데요.

예전부터 이런 창의적인 코딩, 예술적인 코딩을 하고싶은 욕심이 많았었는데 이번 기회에 김종민님을 따라서 구현해보려고 합니다.

위 영상을 보며 나름 제 방식대로 Swift를 사용해서 구현해보았습니다.

바로 시작할게요~

View

먼저 상자와 빨간 점을 UIView로 세팅해줍니다.

(저는 상자 가운데에 제 이름을 넣어서 보여줄 거기 때문에 label도 넣었습니다.)

 let square:UIView = {
        let view:UIView = UIView()
        view.backgroundColor = .systemCyan
        return view
    }()
    
    let redDot1:UIView = {
        let view:UIView = UIView()
        view.backgroundColor = .clear
        return view
    }()
    
    let redDot2:UIView = {
        let view:UIView = UIView()
        view.backgroundColor = .clear
        return view
    }()
    
    let label:UILabel = {
        let label:UILabel = UILabel()
        label.text = "Fomagran"
        label.font = .systemFont(ofSize: 18, weight: .bold)
        label.textColor = .white
        return label
    }()

1. 상자 움직이기

상자를 터치해서 움직이게 하려면 어떻게 해야할까요?

바로 팬제스쳐라는 것을 이용해주어야 합니다.

상자에 아래와 같이 팬제스쳐를 달아줍니다.

private func setPanGesture() {
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(self.dragSquare(_:)))
        square.addGestureRecognizer(panGesture)
    }

상자를 드래그 했을 때 아래와 같이 실행시켜주면

    @objc func dragSquare(_ sender: UIPanGestureRecognizer) {
        let transition = sender.translation(in: square)
        let newX = square.center.x + transition.x
        let newY = square.center.y + transition.y
        square.center = CGPoint(x: newX, y: newY)
        sender.setTranslation(CGPoint.zero, in: square)
    }

상자를 움직일 수 있게 됩니다.

2. 상자를 터치한 부분 빨간 점으로 표시하기

위 영상을 보면 상자를 터치한 부분에 빨간 점이 생기고 선이 생겨서 매달려 움직이죠?

그렇다면 어떻게 상자를 가장 처음에 터치한 부분을 알아낼 수 있을까요?

바로 처음 드래그를 시작할 때 위치를 알아내면 됩니다.

UIPanGestureRecognizer를 이용해서 드래그가 시작될 때 위치를 알아냅니다.

그리곤 빨간점1의 색을 빨간색으로 바꿔줍니다.

 @objc func dragSquare(_ sender: UIPanGestureRecognizer) {
        if sender.state == .began {
            let location = sender.location(in: view) //드래그를 시작한 위치
            redDot1.center = location
            redDot1.backgroundColor = .red
            ...

이렇게 하면 아래와 같이 드래그를 시작할 때 지점이 빨간색으로 표시됩니다.

2. 두 번째 빨간점 드래그 위치에 표시하기

상자를 터치한 부분에 빨간 점을 표시했다면 드래그를 하는 위치에 따라 표시되는 빨간 점도 보여줘야겠죠?

드래그가 바뀔 때의 위치를 알아내어 빨간점2의 위치를 바꿔줍니다.

 @objc func dragSquare(_ sender: UIPanGestureRecognizer) {
        if sender.state == .began {
            let location = sender.location(in: view) //드래그를 시작한 위치
            redDot1.center = location
            redDot1.backgroundColor = .red
          }else if sender.state == .changed {
            redDot2.center = sender.location(in: view)
            redDot2.backgroundColor = .red
            ...

그럼 아래와 같이 드래그를 하면 처음 위치와 드래그를 하는 위치에 따라 빨간점 두 개가 표시됩니다.

3. 빨간 점 두 개 선으로 잇기

이제 빨간 점 두 개를 선으로 이어줘야겠죠?

선을 만들어 주기 위해선 CAShapeLayer로 만들어줘야 합니다.

private var line = CAShapeLayer()

아래와 같이 시작과 끝을 지정해주고 선으로 이어줍니다.

 private func addLine(start: CGPoint,end:CGPoint) {
        line.removeFromSuperlayer()
        let linePath = UIBezierPath()
        linePath.move(to: start)
        linePath.addLine(to: end)
        line.path = linePath.cgPath
        line.strokeColor = UIColor.red.cgColor
        line.lineWidth = 1
        view.layer.addSublayer(line)
    }

빨간점1과 빨간점2의 중앙 부분을 선으로 이어줍니다.

 @objc func dragSquare(_ sender: UIPanGestureRecognizer) {
        if sender.state == .began {
            let location = sender.location(in: view) //드래그를 시작한 위치
            redDot1.center = location
            redDot1.backgroundColor = .red
          }else if sender.state == .changed {
            redDot2.center = sender.location(in: view)
            redDot2.backgroundColor = .red
            addLine(start: redDot1.center,end:redDot2.center)
            ...

아래와 같이 선으로 두 개의 점이 이어집니다.

4. 드래그가 끝나면 선과 점 사라지게 하기

드래그가 끝나는 순간에는 선과 점이 사라져야겠죠?

빨간점 두 개와 선의 색을 바꿔주는 메서드를 구현해줍니다.

 private func changeColor(_ color:UIColor) {
        redDot1.backgroundColor = color
        redDot2.backgroundColor = color
        line.strokeColor = color.cgColor
    }

dragSquare 메소드에 드래그가 끝났을 때 색을 투명색으로 바꿔줍니다.

 @objc func dragSquare(_ sender: UIPanGestureRecognizer) {
	...
    
    }else if sender.state == .ended {
            changeColor(.clear)
            ...

5. 특정 길이 이상 늘어나면 빨간점1 움직이기

선을 잡아당기다가 특정 길이 이상 늘어나면 빨간점 1을 움직이게 만들어 줄건데요.

먼저 두 개의 점의 길이를 알아내야겠죠?

아래와 같이 두 개의 점의 길이를 알아냅니다.

 private func getTwoPointDistance(_ point1:CGPoint,_ point2:CGPoint) -> CGFloat {
        let xDist:CGFloat = point2.x - point1.x
        let yDist:CGFloat = point2.y - point1.y
        return sqrt((xDist * xDist) + (yDist * yDist))
    }

dragSquare 메서드에서 드래그가 변할 때에 아래와 같이 두 개의 점의 길이를 알아낸 뒤

특정 길이 이상 늘어나면 빨간점2의 위치로 빨간점1의 위치를 변경하겠습니다.

        }else if sender.state == .changed {
            redDot2.center = sender.location(in: view)
            redDot2.backgroundColor = .red
            addLine(start: redDot1.center,end:redDot2.center)
            let distance:CGFloat = getTwoPointDistance(redDot1.center,redDot2.center)
            if distance > 100 {
                redDot1.center = redDot2.center
            }

아래와 같이 보면 상자가 움직이는게 매우 어색하죠?

UIView.animate를 사용하면 움직임을 훨씬 부드럽게 바꿀 수 있습니다.

  if distance > 100 {
                UIView.animate(withDuration: 0.5) {
                    self.redDot1.center = self.redDot2.center
                }

6. 선 끊김 현상 해결하기

하지만 위에서 애니메이션을 적용했을 때 부드러워지긴 하지만 빨간점1이 이동 중에 잠깐 선이 끊기는 현상이 발생했습니다.

그 이유는 애니메이션 적용하면 바뀌는 값에 따라 선이 연결되지 않기 때문입니다.

애니메이션이 바뀌는 값에 따라 선을 연결하려면 어떻게 해야할까요?

바로 CADisplayLink를 사용해주면 됩니다.

CADisplayLink는 화면이 업데이트 될 때마다 호출되는 NSObject인데요.

아래와 같이 선언해주시고

var displayLink:CADisplayLink?

디스플레이링크를 생성해 주는 메서드를 구현해줍니다.

private func createDisplayLink() {
        let displaylink = CADisplayLink(target: self,selector: #selector(displayLinkLoop))
        displaylink.add(to: .current,forMode:.common)
        displayLink = displaylink
    }

그리고 애니메이션이 실행되기 직전에 디스플레이 링크를 생성해 줍니다.

          if distance > 100 {
                createDisplayLink()
                UIView.animate(withDuration: 0.5) {
                    self.redDot1.center = self.redDot2.center
                }

그리고 디스플레이링크를 출력해보면

@objc func displayLinkLoop(displaylink: CADisplayLink) {
        print(displaylink)

화면이 업데이트 될 때마다 아래와 같이 디스플레이 링크가 호출됩니다.

이것을 이용해서 애니메이션을 사용하지 않고 부드럽게 빨간점1을 이동시키겠습니다.

빨간점2의 위치를 기억할 goal을 만들어줍니다.

var goal = CGPoint()

아래와 같이 디스플레이링크를 생성하기 직전에 goal의 위치를 빨간점2의 중앙으로 세팅합니다.

 if distance > 100 {
                goal = redDot2.center
                createDisplayLink()
            }

그리고 디스플레이 링크를 호출하는 메서드에 아래와 같이 goal의 위치가 될 때까지 선으로 연결해줍니다.

    @objc func displayLinkLoop(displaylink: CADisplayLink) {
        if round(redDot1.center.x) == round(goal.x) && round(redDot1.center.y) == round(goal.y){
            displaylink.invalidate()
            line.strokeColor = UIColor.clear.cgColor
            return
        }
        if round(redDot1.center.x) != round(goal.x) {
            redDot1.center.x += redDot1.center.x < goal.x ? 1: -1
        }

        if round(redDot1.center.y) != round(goal.y) {
            redDot1.center.y += redDot1.center.y < goal.y ? 1 : -1
        }
        
        addLine(start: redDot1.center,end: redDot2.center)
    }
}

그럼 아래와 같이 애니메이션을 이용하지 않고 빨간 점1의 위치를 부드럽게 이동시킬 수 있습니다.

7. 빨간점1의 위치에 따라 상자 움직이기

이제 빨간점1의 위치에 따라서 상자를 움직여보는 것을 구현하겠습니다.

빨간점1의 위치는 맨 처음 드래그가 시작된 곳의 위치죠?

고로 빨간점1의 중앙과 상자의 중앙의 차이를 계산해야 합니다.

빨간점1과 상자의 차이를 기록할 gap을 만들어줍니다.

private var gap:CGPoint = CGPoint()

그리고 드래그가 시작될 때 상자와 빨간 점의 위치를 계산해서 gap에 저장해줍니다.

 if sender.state == .began {
            let location = sender.location(in: view)
            gap.x = square.center.x - location.x
            gap.y = square.center.y - location.y

그 다음 디스플레이 링크가 호출될 때 상자의 위치를 차이만큼 더해준 값으로 지정해줍니다.

    @objc func displayLinkLoop(displaylink: CADisplayLink) {
        if round(redDot1.center.x) == round(goal.x) && round(redDot1.center.y) == round(goal.y){
            displaylink.invalidate()
            line.strokeColor = UIColor.clear.cgColor
            return
        }
        if round(redDot1.center.x) != round(goal.x) {
            redDot1.center.x += redDot1.center.x < goal.x ? 1: -1
            square.center.x = redDot1.center.x + gap.x
        }

        if round(redDot1.center.y) != round(goal.y) {
            redDot1.center.y += redDot1.center.y < goal.y ? 1 : -1
            square.center.y = redDot1.center.y + gap.y
        }
        
        addLine(start: redDot1.center,end: redDot2.center)
    }

아래와 같이 빨간점1의 위치에 따라 상자가 움직이게 됩니다.

8. 빨간점1과 빨간점2의 거리두기(옵셔널)

빨간점1이 빨간점2의 위치로 가는 것이 아닌 그 근처로 가게끔 구현하고 싶었는데요.

(이건 하셔도 되고 안하셔도 됩니다.)

이렇게 설명하면 이해가 안되니 왼쪽은 빨간점2의 좌표까지 이동하는 것이고 오른쪽은 빨간점2의 근처까지만 이동하는 것입니다.

상자의 중앙을 기준으로 x,y의 음수와 양수에 따라 범위를 나누고 빨간점2의 위치에 따라 빨간점1의 위치를

구해주었습니다.

아래와 같이 범위에 따라 구할 수 있습니다.

  func getDestinationPoint(p2:CGPoint) -> CGPoint {
        if p2.x <= center.x  {
            //1
            if p2.y <= center.y {
                return CGPoint(x: p2.x+50, y: p2.y+50)
            //3
            }else {
                return CGPoint(x: p2.x+50, y: p2.y-50)
            }
        }else {
            //2
            if p2.y <= center.y {
                return CGPoint(x: p2.x-50, y: p2.y+50)
            //4
            }else {
                return CGPoint(x: p2.x-50, y: p2.y-50)
            }
        }
    }

goal의 위치를 아래와 같이 설정해줍니다.

  if distance > 100 {
                goal = square.getDestinationPoint(p2: redDot2.center)
                createDisplayLink()
            }

9. 상자 회전하기

줄을 당겨 상자를 움직일 때 방향에 따라 상자가 약간씩 회전되는 것을 볼 수 있습니다.

이것 또한 위처럼 범위를 나눠 빨간점 2의 위치에 따라 어느 방향인지 알아낼 수 있었습니다.

범위에 따라 아래와 같이 회전값을 지정해주었습니다.

(5로 지정했지만 원하시는 회전값을 넣으시면 됩니다.)

 func getAngle(p2:CGPoint) -> CGFloat {
        if p2.x <= center.x  {
            //1
            if p2.y <= center.y {
                return 5
            //3
            }else {
                return -5
            }
        }else {
            //2
            if p2.y <= center.y {
                return -5
            //4
            }else {
                return 5
            }
        }
    }

그리고 뷰를 회전할 수 있는 메서드를 만들어주었습니다.

func rotate(degrees: CGFloat) {
        let degreesToRadians: (CGFloat) -> CGFloat = { (degrees: CGFloat) in
            return degrees / 180.0 * CGFloat.pi
        }
        self.transform =  CGAffineTransform(rotationAngle: degreesToRadians(degrees))
    }

아래와 같이 드래그 값이 바뀔 때 빨간점2의 위치에 따라 각도를 구해 회전하고

드래그가 끝날 때 회전을 0도로 만들어 제자리로 돌아오게 구현하였습니다.

@objc func dragSquare(_ sender: UIPanGestureRecognizer) {
        if sender.state == .began {
            let location = sender.location(in: view)
            gap.x = square.center.x - location.x
            gap.y = square.center.y - location.y
            changeColor(.red)
            redDot1.center = location
        }else if sender.state == .changed {
            redDot2.center = sender.location(in: view)
            addLine(start: redDot1.center,end:redDot2.center)
            let distance:CGFloat = getTwoPointDistance(redDot1.center,redDot2.center)
            if distance > 100 {
                goal = square.getDestinationPoint(p2: redDot2.center)
                createDisplayLink()
                let angle:CGFloat = square.getAngle(p2:redDot2.center)
                rotateAndChangeColor(angle: angle, color: .systemRed)
            }
        }else if sender.state == .ended {
            changeColor(.clear)
            rotateAndChangeColor(angle: 0, color: .clear)
        }
    }

회전과 색을 바꿔줄 때 애니메이션을 줘서 부드럽게 만들어 주었습니다.

private func rotateAndChangeColor(angle:CGFloat,color:UIColor) {
        UIView.animate(withDuration: 0.5) {
            self.square.rotate(degrees:angle)
            self.label.rotate(degrees:angle)
            self.changeColor(color)
        }
    }

아래와 같이 줄을 당기는 방향에 따라 상자가 회전하는 것을 볼 수 있습니다.

오늘은 이렇게 인터랙티브 디벨로퍼님의 튜토리얼을 구현해보았는데요.

보기엔 정말 간단하다고 생각했던 것들이 직접 구현하려고 하니 시간도 오래 걸리고 꽤 복잡했습니다.

이 튜토리얼을 통해서 나름 배운 것도 많고 예전부터 하고싶었던 크리에이티브 코딩이라서 구현하고 나니 뿌듯하네요...ㅎㅎ

728x90

저작자표시 비영리