본문 바로가기
iOS/iOS

Animation

by 패쓰킴 2022. 10. 11.
728x90

밑에서 천천히 올라오는 팝업창 구현

스토리보드 오토레이아웃 제약을 이용하여 구현하는 방식

1. 올라올 뷰를 뷰컨트롤러 화면보다 밑으로 배치

2. 팝업창의 bottom 제약조건을 outlet으로 연결

3. superView는 배경색을 clear Color로 설정

4. 팝업 애니메이션 코드 작성

superView는 투명한 검정색으로

팝업뷰(datePickerBackViewBottom)는 밑에서 위로 올라오도록 레이아웃 값 변경

func show() {
  UIView.animate(withDuration: 0.3, animations: {
    self.view.backgroundColor = UIColor(displayP3Red: 0, green: 0, blue: 0, alpha: 0.6)
  })
  UIView.animate(withDuration: 0.2, animations: {
    self.datePickerBackViewBottom.constant = 0
    self.view.layoutIfNeeded()
  })
}

(이렇게 제약조건의 값을 변경하는 과정을 애니메이션 적용을 하고 싶다면 반드시, `self.view.layoutIfNeede()` 를 호출 해주어야 한다.)

5. 팝업뷰컨트롤러 show action 호출

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

viewWillAppear에서 호출을 해주어야 팝업컨트롤러가 보여질때 애니메이션이 적용됨

viewDidLoad에서 호출 하게 되면 이미 애니메이션이 끝난 상태가 보여짐

 

키보드가 올라올 때

+ (void)animateWithKeyboard:(NSNotification*)notification view:(UIView *)view animation:(void(^)(CGRect))animation {
    CGFloat duration = [notification.userInfo[UIKeyboardAnimationDurationUserInfoKey] floatValue];
    NSValue * keyboardFrameBegin = [notification.userInfo valueForKey:UIKeyboardFrameBeginUserInfoKey];
    int curve = [notification.userInfo[UIKeyboardAnimationCurveUserInfoKey] intValue];
    
    UIViewPropertyAnimator * animate = [[UIViewPropertyAnimator alloc]initWithDuration:duration curve:curve animations:^{
        animation([keyboardFrameBegin CGRectValue]);
        [view layoutIfNeeded];
    }];
    [animate startAnimation];
}

사용

[Util animateWithKeyboard:noti view:self.view animation:^(CGRect keyboardFrame) {
   self.addBtnBottom.constant += (keyboardHeight - safeAreaBottom);
}];

참고 : https://www.advancedswift.com/animate-with-ios-keyboard-swift/

 

 

CGAffineTransform

CGPoint location = self.myView.frame.origin;
[UIView animateWithDuration:1.3f delay:0.0f options:UIViewAnimationCurveEaseIn animations:^{
  CGAffineTransform totalTransform = CGAffineTransformMakeTranslation(10, -30 );
  [self.myView setTransform:totalTransform]; // myView의 transform을 재세팅해준다.
} completion:nil];

기존의 myVIew의 좌표에서 `CGAffineTransformMakeTranslation(location.y, -30 )` 를 이용하여 x,y 값 만큼 움직여 준다.

따라서 myView의 좌표가 (100,100)이었다면 x에 10을 더하고 y에 30을 빼준만큼 움직이게 된다.

[UIView animateWithDuration:1.3f delay:0.0f options:UIViewAnimationCurveEaseIn animations:^{
  self.myView.alpha = 1;
  self.myView.frame = CGRectMake(10,30,100,100);
}completion:nil];

기존의 myView의 좌표를 `CGRectMake` 를 이용하여 x,y,width,height를 변경하여 움직여준다.

따라서, myView의 좌표가 (100,100)이었다면 x는 10, y는 20의 좌표로 변경된다.

 

 

728x90

'iOS > iOS' 카테고리의 다른 글

UIscrollView dynamic height  (0) 2022.10.14
특정 viewcontroller로 pop  (0) 2022.10.13
지도앱 URL Scheme  (0) 2022.10.05
UICollectionView 페이징  (1) 2022.09.30
햅틱 & 진동  (0) 2022.09.06

댓글