Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to do animation in custom annotation pin when update annotation view

I want to do animation like "when scroll collection view cell the annotation pin goes Up/Down at the end of scrolling. But how to do animation like annotation pin goes Up when start scrolling and annotation pin goes Down when scrolling end in collection view

//code --> For Scrolling
func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    if scrollView == collectionView {
        NSLog("page collection %d",Int(scrollView.contentOffset.x/scrollView.frame.size.width))
        self.UpdateMapAnotationPin(Int(scrollView.contentOffset.x/scrollView.frame.size.width))
    }
}

//  -->When Update Pin

func UpdateMapAnotationPin(vIndex : Int) {
    if self.mapAnnotations.count != 0 {
        let info = self.mapAnnotations[vIndex]
        let aView = map.viewForAnnotation(info)
        info.imageName = "ic_map_pin1"
        info.tagPin = vIndex
        aView?.image = UIImage(named: info.imageName)

        if aView != nil {
            self.animationWithView(aView!)
        }
    }
}
//   --> For animation

func animationWithView(mkView : MKAnnotationView) {
    let point:MKMapPoint  =  MKMapPointForCoordinate(mkView.annotation!.coordinate);
    let endFrame:CGRect = mkView.frame;
    mkView.frame = CGRectMake(mkView.frame.origin.x, mkView.frame.origin.y - 20, mkView.frame.size.width, mkView.frame.size.height);
    let delay = 0.03
    UIView.animateWithDuration(0.5, delay: delay, options: UIViewAnimationOptions.CurveLinear, animations:{() in
        mkView.frame = endFrame
        }, completion:{(Bool) in
            UIView.animateWithDuration(0.05, delay: 0.0, options: UIViewAnimationOptions.CurveLinear, animations:{() in
                mkView.transform = CGAffineTransformMakeScale(1.0, 1.0) }, completion: {(Bool) in
                    UIView.animateWithDuration(0.3, delay: 0.0, options: UIViewAnimationOptions.CurveLinear, animations:{() in
                        mkView.transform = CGAffineTransformIdentity
                        }, completion: nil)
            })
    })
}
like image 261
Alpesh Desai Avatar asked Dec 15 '15 05:12

Alpesh Desai


1 Answers

I think you want to animated like AirBnb app annotations. You have to select the pin by calling it's viewforAnimation method

Steps 1.Make annotation using by assigning the custom id like this

class GridAnnotation: NSObject ,MKAnnotation{
    var title: String?
    var coordinate: CLLocationCoordinate2D
    var info: String
    var index: String

    init(title: String, coordinate: CLLocationCoordinate2D, info: String,index: String) {
        self.title = title
        self.coordinate = coordinate
        self.info = info
        self.index = index
    }
} 
 override func viewDidLoad() {
        super.viewDidLoad()
 let annotationStart = GridAnnotationStart(title: "", coordinate: firstLocation.coordinate, info: "\(zoneCreateModal.id)",index: "\(0)")

                    self.mapVw.addAnnotation(annotationSta

rt)

}

2.Get all annotations

 let arrAllAnnotations = self.mapVw.annotations.filter { $0 !== self.mapVw.userLocation }


 for someAnnotation in annotationsToRemove {
                    let strId = "Your current id"
                    if someAnnotation.isKind(of: AnnotationModal.self) {
                        let annotaion = someAnnotation as! AnnotationModal
                        if annotaion.info == strId {
//Call view for animation
    self.mapVw.selectAnnotation(someAnnotation, animated: true)

             self.mapVw.view(for: someAnnotation)

                        }
                    }
                }

5.Set type of new selected annoatation in viewForAnnotation

 func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {

        if (annotation.isKind(of: MKUserLocation.self)) {
            return nil
        }

 if annotation.isKind(of: GridAnnotationZoomModal.self) {
            let anView = MKAnnotationView(annotation: annotation, reuseIdentifier: "landingPoints")
            let annotationInfo = annotation as! GridAnnotationZoomModal
            imgView.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
if anView.isSelected == true {
                imgView.image = UIImage(named: "Your selected image name")
            }else{
 imgView.image = UIImage(named: "Your image not selected name")

}           

            anView.isDraggable = false
            anView.isEnabled = true
            anView.isUserInteractionEnabled = true
            anView.tag = Int(annotationInfo.index)!
            anView.addSubview(imgView)
            anView.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
            anView.centerOffset = CGPoint(x: 0,y: -15)
            return anView
        }
return nil


}
like image 130
Dhruv Narayan Singh Avatar answered Oct 18 '22 17:10

Dhruv Narayan Singh