[SWIFT] IOS 애니메이션 효과 - 3

[SWIFT] IOS 애니메이션 효과 - 3

continue 버튼을 누르면 로그인 화면으로 넘어가는 예시

실행화면

• visual effect view의 경우 아래와 같이 추가가능
  

  

  
  

  

1override func viewWillAppear(_ animated: Bool) {


2        super.viewWillAppear(animated)


3        


4        backgroundImage.alpha = 0.0


5        continueButton.alpha = 0.0


6        message.alpha = 0.0


7        


8    }

처음에 로고를 제외한 모든 내용을 가려 준 후

1UIView.animate(withDuration: 1, delay: 0.0, options: [], animations: {


2            


3            //display background image


4            self.backgroundImage.alpha = 1.0


5


6            }, completion:nil)


7        

백그라운드를 애니메이션을 통해 만들어줌

1UIView.animate(withDuration: 2.0, animations: {


2                


3                //display button


4            self.continueButton.alpha = 1.0


5                


6            }, completion:nil)

버튼의 경우 조금 더 느리게 만들어줌

1UIView.animate(withDuration: 2.0, delay:0.5, usingSpringWithDamping: 0.6, initialSpringVelocity: 0.0,options:[], animations: {


2                


3                //display button


4            self.continueButton.alpha = 1.0


5            


6        }, completion:nil)


7

버튼에 대한 애니메이션코드
SpringWithDamping은 위로 살짝 올라갔다가 돌아오는 효과를 Spring Velocity는 속도를 결정한다.

1 func marketingMessages(_ index: Int) {


2        var index = index


3        


4        let message = self.messages[index]


5        self.message.text = message


6        


7        //to reposition label 


8        self.message.center.y += 30.0


9        


10        //애니메이션을 계속 실행시킨다.


11        UIView.animateKeyframes(withDuration: 10.0, delay: 0.0, options: [], animations: {


12            


13            


14            //라벨을 보이게한 후


15            UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.10, animations: {


16                self.message.alpha = 0.5


17            })


18        


19            


20            //애니메이션을 Bountce를 준 후 사라지게함


21            UIView.addKeyframe(withRelativeStartTime: 0.90, relativeDuration: 0.05, animations: {


22                self.keyframeAnimation()


23            })


24            


25            


26        }, completion: {_ in


27            


28            //다시 콜백함수로 해당 텍스트를 교체해준다.


29            if index == self.messages.count-1{


30                


31                index = 0


32                


33            }else{


34                index += 1


35            }


36            


37            self.marketingMessages(index)


38        })


39        


40    }


41    


42    func keyframeAnimation() {


43        


44        UIView.animate(withDuration: 1.0, delay: 0.0,usingSpringWithDamping: 0.7, initialSpringVelocity: 0.0,  options: [.curveEaseOut],  animations: {


45            


46            self.message.center.y -= 30.0


47            


48        }, completion: nil)


49        


50    }


51