CODEWITHSUNDEEP
iosswiftanimationuiimageview
Pangu
Pangu

Reputation: 3819

How to animated a UIImageView smoothly in swift with AutoLayout?

I'm trying to replicate the animation of an app I currently use. In the app, after a picture is taken, if the user taps the UIImageView, it smoothly expands to a certain size, and upon tapping the UIImageView, it smoothly collapses to the original size.

Here is an example:

enter image description here

However, when I tried to replicate it, the animation is "wooply" as seen here:

enter image description here

Here's my code sample:

if recogizer.view == thumbnailImageView && isThumbnailExpanded == false
{
    UIView.animateWithDuration(1, animations: {() -> Void in

    self.thumbnailImageView!.frame.size.width = self.view.frame.size.width * 0.7
    self.thumbnailImageView!.frame.size.height = self.view.frame.size.height * 0.6
    self.thumbnailImageView!.frame.origin.x = (self.view.frame.width / 2) - (self.thumbnailImageView!.frame.size.width / 2)
    self.thumbnailImageView!.frame.origin.y = -100

    })

    isThumbnailExpanded = true
    }
else if recogizer.view == thumbnailImageView && isThumbnailExpanded == true
{
    UIView.animateWithDuration(1, animations: {() -> Void in

    self.thumbnailImageView!.frame.size.width = self.thumbnailImageViewWidth
    self.thumbnailImageView!.frame.size.height = self.thumbnailImageViewHeight
    self.thumbnailImageView!.frame.origin.x = self.thumbnailImageViewXPosition
    self.thumbnailImageView!.frame.origin.y = self.thumbnailImageViewYPosition

    })

    isThumbnailExpanded = false
}

Here's my autolayout constraints:

enter image description here How can I animate my UIImageView more smoothly as seen in above?

Thanks

Upvotes: 2

Views: 2804

Answers (1)

paulvs
paulvs

Reputation: 12053

The animation appears wobbly because you are changing the image's aspect ratio, you should maintain the aspect ratio so as not to squish the image.

Also, you should not animate a auto layout constraint-based UIView by changing its frame. Inside the animation block, you should change the image view constraints you added in the storyboard.

To get a reference to your storyboard created constraints, create an IBOutlet by control-dragging them to your view controller. This will create a variable of type NSLayoutConstraint in your code. Inside the animation block, change the constant property of each constraint you want to change and then call layoutIfNeeded on the view.

UIView.animateWithDuration(1, animations: {

    yourConstraint.constant = 20
    // any other constraints...
    // ...
    thumbnailImageView.layoutIfNeeded()
})

Upvotes: 3

Related Questions