1. CGAffineTransform
    • Initial transforms
    • concatenating()
  2. UIView.animateKeyframes
  3. UIView.animate
    • usingSpringWithDamping
  4. Fetching info on animations

CGAffineTransform

After setting up layout, we need to set initial transform using CGAffineTransform

        currentUserImageView.transform = CGAffineTransform(translationX: 200, y: 0)

CGAffineTransform always starts from .identity position, size and rotation.

concatenating(_:)

Returns an affine transformation matrix constructed by combining two existing affine transforms. concatenate : 연결하다

        currentUserImageView.transform = CGAffineTransform(rotationAngle: angle).concatenating(CGAffineTransform(translationX: 200, y: 0))

UIView.animateKeyframes

If you want to add serial animations, using animateKeyframes will be proper. Set whole

        UIView.animateKeyframes(withDuration: 1.3, delay: 0, options: .calculationModeCubic, animations: {
            
        // animations
            
        }) { (_) in
            
        }

addKeyframe(withRelativeStartTime:relativeDuration:animations:)

Specifies the timing and animation values for a single frame of a keyframe animation.

            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.45, animations: {
                self.currentUserImageView.transform = CGAffineTransform(rotationAngle: angle)
                self.cardUserImageView.transform = CGAffineTransform(rotationAngle: -angle)
            })
            
            UIView.addKeyframe(withRelativeStartTime: 0.6, relativeDuration: 0.4, animations: {
                self.currentUserImageView.transform = .identity
                self.cardUserImageView.transform = .identity
            })

Remember CGAffineTransform always transform the view from the original!

Fetching info in animations

  1. Think “How can I pass the user or user's uid to view??” -> Data
  2. Using didset when you get passed user or user's uid
  3. Give attention to where fetching should be located

Bug: flashing image

set up animations after complete sd_setImage

    var cardUID: String! {
        didSet {
            Firestore.firestore().collection("users").document(cardUID).getDocument { (snapshot, err) in
                if let err = err {
                    print("Failed to fetch matched user data", err)
                    return
                }
                
                guard let dictionary = snapshot?.data() else { return }
                let cardUser = User(dictionary: dictionary)
                                                                                     
                guard let cardUserImageUrl = URL(string: cardUser.imageUrl1 ?? "") else { return }
                self.cardUserImageView.sd_setImage(with: cardUserImageUrl)
                self.discriptionLable.text = "You and \(cardUser.name ?? "") liked\neach other"
                
                guard let currentUserImageUrl = URL(string: self.currentUser.imageUrl1 ?? "") else { return }
                self.currentUserImageView.sd_setImage(with: currentUserImageUrl, completed: { (_, _, _, _) in
                    self.setupAnimations()
                })
            }
        }
    }

태그: ,

카테고리:

업데이트:

댓글남기기