s4y
s4y

Reputation: 51685

UIView scale animation overshoots when changed

When I animate a change to a view's transform, then reset that change in another animation before the first animation finishes, everything's great (shown here with a rotation). The animation smoothly switches to the new target:

But when I do this with a scale, the animation overshoots magnificently:

Here's the breaking code:

UIView.animateWithDuration(1) {
    self.someView.layer.transform = CATransform3DMakeScale(0.001, 0.001, 1)
}
UIView.animateWithDuration(1,
    delay: 0.5,
    options: nil,
    animations: {
        self.someView.layer.transform = CATransform3DIdentity
    }, completion: nil
)

Has anyone else seen this? Am I doing something wrong?

EDIT: And is there a good workaround?

EDIT 2: I believe this is a duplicate of this question and am voting to close.

Upvotes: 0

Views: 788

Answers (2)

s4y
s4y

Reputation: 51685

This blog post provides the answer: in iOS 8, UIView animations are additive, and this has an unfortunate result with scale animations.

Basically, the second animation happens together with the first animation. The only solution is to explicitly remove the original animation before starting a new one:

view.layer.transform = view.layer.presentationLayer().transform
view.layer.removeAllAnimations()

Upvotes: 1

Conor Linehan
Conor Linehan

Reputation: 448

Hi I'm not quite sure what your looking for but if you want the view to go back to it's original scale you'd add the .Autoreverse flag.

UIView.animateWithDuration(1, delay: 0, options: .Autoreverse | .Repeat, animations: {
       myView.layer.transform = CATransform3DMakeScale(0.001, 0.001, 1)
    }, completion: nil)

While if you wanted to string animations together I'd do it within UIView.animateKeyframesWithDuration()

UIView.animateKeyframesWithDuration(2, delay: 0.0, options: nil, animations: {

        UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.5, animations: {
            // Animation 1
        })

        UIView.addKeyframeWithRelativeStartTime(1, relativeDuration: 0.5, animations: {
            // Animation 2
        })

    }, completion: nil)

Animation Gif

Upvotes: 0

Related Questions