Swift3.0 애니메이션 1~Animate() 메소드 편~

애니메이션을 배우고 싶어서 썼어요!

swift에 어떤 애니메이션과 방법이 있는지 저는 기본적인 것을 광범위하게 소개하고 싶습니다.
결론적으로 나는 이런 애니메이션을 만들 것이다.

Step 1. 애니메이션 방법에 따라 Constraint 설정

view.bounds.center.y 또는 x 축을 사용하여 이동할 수도 있습니다.
이번에는 애니메이션으로 하여금 Constraints의 값을 바꾸게 한다.
우선 색깔이 있는 박스를 한데 배열하고, 모두 아래의 constraint를 더해라
- width
- height
- top
- centerY constraint
다음 그림에 각각 어떤 constraint를 사용하는지 적혀 있습니다.

Step 2. IBOutlet으로 각각 제작된 constraint

    @IBOutlet weak var orangeCenterYConstraint: NSLayoutConstraint!
    @IBOutlet weak var pinkCenterYConstraint: NSLayoutConstraint!
    @IBOutlet weak var greenTopConstraint: NSLayoutConstraint!
    @IBOutlet weak var blueTopConstraint: NSLayoutConstraint!
    @IBOutlet weak var redBox: UIView!

빨간 상자는 불투명도만 바뀌기 때문에 UIView의 Outlet을 제작했습니다.

Step 3. 화면 밖으로 미리 놓고.

화면 밖으로 날아오려면view Will Apper를 화면 밖으로 내놓으세요.또한 빨간색 상자만 불투명도 0으로 설정합니다.viewWillApper()는 화면이 나오기 전에 처리되기 때문에 이 동작을 볼 수 없습니다.

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        //それぞれ画面から出す
        orangeCenterYConstraint.constant += view.bounds.width
        pinkCenterYConstraint.constant += view.bounds.width
        greenTopConstraint.constant += view.bounds.height
        redBox.alpha = 0.0

    }

오렌지색과 핑크색 상자는 센터 Yconnstrant의 값을 증가시키고 화면의 width만 증가시켜 오른쪽에 숨겼다.
초록색은 top Constraint 값을 증가시킵니다.
파란색 상자는 녹색에 끌려 설정 없이도 화면 밖으로 나온다.

Step 4. 애니메이션

viewDidApper() 애니메이션 쓰기를 완료하는 방법입니다.이 경우viewDidLoad()에는 아무것도 쓰지 않습니다!

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)


        UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseOut, animations: {
            self.orangeCenterYConstraint.constant -= self.view.bounds.width
            self.greenTopConstraint.constant -= self.view.bounds.height
            self.view.layoutIfNeeded()

        },completion:nil)


        UIView.animate(withDuration: 1.5, delay: 0.5, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.1, options: .curveEaseIn, animations: {
            self.pinkCenterYConstraint.constant -= self.view.bounds.width
            self.view.layoutIfNeeded()

        //終わったらアニメーションする
        }, completion: {(finished: Bool) in

            UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseOut, animations: {
                self.redBox.alpha = 1
            }, completion: nil)

            UIView.animate(withDuration: 0.5, delay:1.5, options: .curveEaseIn, animations: {
                self.blueTopConstraint.constant += 200
                self.view.layoutIfNeeded()

            }, completion: nil)
        })
    }

5. 설명해 주세요!

animate () UIView 의 기본 코드는 이것입니다.기본 속성:

withDouration→애니메이션에 필요한 시간

delay→애니메이션 지연 시간

options→애니메이션 방법

UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseOut, animations: {

　//　UIViewをアニメーションさせる

},completion:nil)

추가 속성:

usingSpring WithDamping→애니메이션 종료 후 바운드 시간

initial SpringVelocity→애니메이션의 점프 속도

 UIView.animate(withDuration: 1.5, delay: 0.5, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.1, options: .curveEaseIn, animations: {
　//　UIViewをアニメーションさせる

}, completion:nil)

이거 하면 핑크색 박스처럼 점프가 끝납니다.

연결 애니메이션

completion을 nil로 쓰지 않고 계속하면 애니메이션이 끝난 후에 다른 애니메이션을 시작할 수 있습니다.

   UIView.animate(withDuration: 1.5, delay: 0.5, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.1, options: .curveEaseIn, animations: {
        //アニメーション１

        }, completion: {(finished: Bool) in

            UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseOut, animations: {
        　　//アニメーション２：アニメーション１が終わったら実行される

            }, completion: nil)
        })

완성 코드는여기.
앞으로도 이런 이슈가 실릴 예정이다.
[Animatior 클래스에서 이동, UITimingCurveProvider 사용법, CGAffinetransform, Present and Dismiss ViewController, UI V i e wCo t r o ller Animationing] 등
다음에는 Animator를 사용합니다.