How can I animate UIImageView when a user drags MKMapView?

Question

I have a UIImageView with an image, this image is a typical map collector. I put it on a card in a storyboard and set some restrictions.

When a user drags my map, this image remains untouched, I want to find a way to animate it - basically, I want to internalize it a little, so that it looks like dragged.

I already have two methods:

 func mapView(_ mapView: MKMapView, regionWillChangeAnimated animated: Bool) { } 

and

 func mapView(_ mapView: MKMapView, regionDidChangeAnimated animated: Bool) { } 

But I do not know how to animate the change in UIImageView.

I tried to add the following code to regionWillChangeAnimated :

 myPositionPicker.animate(withDuration: 1.5, delay: 0.05 * Double(index), usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: [], animations: { yawpPositionPicker.transform = CGAffineTransform(translationX: 0, y: 0) }, completion: nil) 

(where myPositionPicker is my UIImageView ), but I get an error

 Static member animate cannot be used on instance of type UIImageView 

I think the best animation for me would be UIViewAnimationOptions.curveEaseIn , but I don't know how to attach it to my UIImageView . Can you give me some hint?

Answer 1

👋

First of all, you are trying to use the static "animate" method in an instance of myPositionPicker . And this is wrong. Just replace

 myPositionPicker.animate(withDuration: 1.5, delay: 0.05 * Double(index), usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: [], animations: { yawpPositionPicker.transform = CGAffineTransform(translationX: 0, y: 0) }, completion: nil) 

FROM

 UIView.animate(withDuration: 1.5, delay: 0.05 * Double(index), usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: [], animations: { // Do whatever animations you want here. }, completion: nil) 

Further, if you want to create some simple animations (for example, changing the position of the UIImageView or changing its size), you can simply use the restrictions that have already been created and not use affine transformations.

For example, if your image is vertical with your map view. First, create a special @IBOutlet for this restriction in your UIViewController:

 @IBOutlet var pickerCenterYConsraint: NSLayoutConstraint! 

Secondly, plug this outlet into the restriction in the storyboard.

Thirdly, since I realized that your view controller is a delegate of your map view. So let me implement the map view delegate protocol as follows:

 func mapView(_ mapView: MKMapView, regionWillChangeAnimated animated: Bool) { UIView.animate(withDuration: 1.5, delay: 0.05, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: [], animations: { self.pickerCenterYConsraint.constant = 25.0 self.view.layoutIfNeeded() }, completion: nil) } func mapView(_ mapView: MKMapView, regionDidChangeAnimated animated: Bool) { UIView.animate(withDuration: 1.5, delay: 0.05, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: [], animations: { self.pickerCenterYConsraint.constant = 0.0 self.view.layoutIfNeeded() }, completion: nil) } 

And it's all! 🤗 Now your image will be animated while dragging the map. If you do not like this solution, you can create your own animation based on restrictions. Basically, you can do many things with restrictions. For example, with the exception of turns.