UIView.animate视图框架问题

Question

I'm struggling trying to make an animation. This is what's happening: video

The back card was supposed to do the same animation as in the beginning of the video, but it's doing a completely different thing. I'm checking the UIView.frame at the beginning of the animation and it's the same as the first time the card enters, but obviously something is wrong... Here is the code:

func cardIn() {
    let xPosition = (self.darkCardView?.frame.origin.x)! - 300
    let yPosition = (self.darkCardView?.frame.origin.y)!

    self.initialPos = self.darkCardView.frame

    let height = self.darkCardView?.frame.size.height
    let width = self.darkCardView?.frame.size.width

    self.darkCardView?.transform = (self.darkCardImageView?.transform.rotated(by: CGFloat(Double.pi/4)))!

    UIView.animate(withDuration: 1.1, animations: {
        self.darkCardView?.frame = CGRect(x: xPosition, y: yPosition, width: width!, height: height!)
        self.darkCardView?.transform = (self.darkCardImageView?.transform.rotated(by: CGFloat(0)))!
    })
}

func cardOut() {
    let xPosition = (self.darkCardView?.frame.origin.x)! - 600
    let yPosition = (self.darkCardView?.frame.origin.y)!

    let height = self.darkCardView?.frame.size.height
    let width = self.darkCardView?.frame.size.width

    self.darkCardView?.transform = (self.darkCardImageView?.transform.rotated(by: CGFloat(0)))!

    UIView.animate(withDuration: 1.0, delay: 0, options: .allowAnimatedContent, animations: {
        self.darkCardView?.frame = CGRect(x: xPosition, y: yPosition, width: width!, height: height!)
        self.darkCardView?.transform = (self.darkCardImageView?.transform.rotated(by: CGFloat(-Double.pi/4)))!
    }) { (true) in
        self.darkCardView?.transform = (self.darkCardImageView?.transform.rotated(by: CGFloat(0)))!
        self.darkCardView?.frame = self.initialPos

        self.cardIn()
    }
}

Does somebody know how can I repeat the same animation that's in the beginning of the video after cardOut function is called?

Answer 1

Given that we do not know where/when you are calling the above two functions I can only take a guess at what is happening.

So you have an animate in and an animate out, but what about a reset function?

Timeline: Animate the card in. ... Eventually animate the card out ... Reset the cards location to off screen to the right (location before animating in for the first time) ... animate the card in ... Repeat, ect....

Answer 2

Note that if you set a view's transform to anything other than the identity transform then the view's frame rect becomes "undefined". You can neither set it to a new value nor read it's value reliably.

You should change your code to use the view's center property if you're changing the transform.

As Jerland points out in their post, you also probably need to reset your back card to it's starting position before beginning the next animation cycle. (Set it to hidden, put it's center back to the starting position and set it's transform back to the identity transform.

EDIT:

This code:

UIView.animate(withDuration: 1.0, delay: 0, options: .allowAnimatedContent, animations: {
    self.darkCardView?.frame = CGRect(x: xPosition, y: yPosition, width: width!, height: height!)
    self.darkCardView?.transform = (self.darkCardImageView?.transform.rotated(by: CGFloat(-Double.pi/4)))!
}) { (true) in
    self.darkCardView?.transform = (self.darkCardImageView?.transform.rotated(by: CGFloat(0)))!
    self.darkCardView?.frame = self.initialPos

    self.cardIn()
}

Does not set the transform to identity. Try changing that line to

    self.darkCardView?.transform = .identity

Answer 3

I managed to solve the animation problem by calling viewDidLoad() instead of calling self.cardIn() in the end o cardOut completion block. But I don't want to depend on calling viewDidLoad every time a new card has to enter the screen...

Also, I didn't set any properties of the back card in viewDidLoad . I only have it in the .xib file. Any ideas?