iOS - Programmatically Animation

오늘은 버튼을 누르면 레이블이 움직이는(레이블의 height 앵커 값이 바뀌는) 실습을 했다 

 

option+ cmd+ 엔터 = preview 창띄우기

option + cmd + p = 미리보기 돌리기

 

 view.backgroundColor = UIColor(named: "MY_PINK")
        
        let someView = UIView()
        
        someView.backgroundColor = .white
        someView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(someView)
        someView.layer.cornerRadius = 8
        NSLayoutConstraint.activate([
            someView.widthAnchor.constraint(equalToConstant: 100),
            someView.heightAnchor.constraint(equalToConstant: 50),
            someView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
           //someView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
            //someView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor)
            //버튼을 누를때 마다 바텀 앵커를 바꾼다.
        ]) // 배열로 담아 is active  = ture 한번에
        
            someViewBottomConstraint = NSLayoutConstraint(item: someView, attribute: .bottom, relatedBy: .equal, toItem: self.view.safeAreaLayoutGuide, attribute: .bottom, multiplier: 1.0, constant: 0)
            someViewBottomConstraint?.isActive = true
        //safeAreaLayoutGuide 는 화면상 노치같이 시스템에 가려질 수 있는 부분을 자체적으로 마진을 띄우는것. 다음같이 bottom 에 대한 safeArea 는 홈버튼 자리를 띄고 생성
            someViewBottomConstraint?.constant = -100

 

 

다음은 움직이는 레이블의 오토레이 아웃이다 

배경색, 그리고 trans 어쩌고 한다음 view 추가, 둥글게 만들고 , 앵커값 잡아주기(배열로 넣어 일일이 is active = true 안함)

height 앵커는 바뀌는 값이므로 변수 선언하고, NS~ 의 인자값을 초기 바텀 앵커의 초기 위치? 설정 

아래서 위로 올라감으로 -값이 더해진다

 

 

let moveViewUpBtn = UIButton(type: .system)
        moveViewUpBtn.translatesAutoresizingMaskIntoConstraints = false
        moveViewUpBtn.backgroundColor = .white
        moveViewUpBtn.setTitle("올리기", for: .normal)
        //폰트 크기
        moveViewUpBtn.titleLabel?.font = UIFont.boldSystemFont(ofSize: 30)
        moveViewUpBtn.setTitleColor(.black, for: .normal)
        // 패딩값 레이블 크기와 글자의 간격
        moveViewUpBtn.contentEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
        moveViewUpBtn.layer.cornerRadius = 10
        // 버튼을 누를때 동작
        moveViewUpBtn.addTarget(self, action: #selector(moveViewUp), for: .touchUpInside)
        self.view.addSubview(moveViewUpBtn)
        
        moveViewUpBtn.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        moveViewUpBtn.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 150).isActive = true

 

버튼 만들기 

 

// constant 값 바꾸는 메소드
    // 버튼 하나 만들어서 버튼 누를때마다 이 메소드 호출하면 됨.
    @objc fileprivate func moveViewUp() {
        someViewBottomConstraint?.constant -= 100
       //버튼 움직임 표현 
        UIViewPropertyAnimator(duration: 10, curve: .easeOut, animations: { [weak self] in
            guard let self = self else {return}
            self.view.layoutIfNeeded()
        }).startAnimation()
      
    }

 

anim 메소드 

인자로는 애니메이션 지속시간, 종류 등이 있다. 

 

다음 버튼을 한번 누를때마다 아래 view가 100만큼 올라감