Code Monkey home page Code Monkey logo

svpulsingannotationview's Introduction

SVPulsingAnnotationView

SVPulsingAnnotationView is a customizable Core Graphics replica of Apple's MKUserLocationView.

SVPulsingAnnotationView

Installation

CocoaPods

I'm not a big fan of CocoaPods, so tend to not keep it updated. If you really want to use SVPulsingAnnotationView with CocoaPods, I suggest you use pod 'SVPulsingAnnotationView', :head to pull from the master branch directly. I'm usually careful about what I push there and is the version I use myself in all my projects.

Manually

  • Drag the SVPulsingAnnotationView/SVPulsingAnnotationView folder into your project.
  • Add the QuartzCore and MapKit frameworks to your project.

Usage

(see sample Xcode project in /Demo)

You use SVPulsingAnnotationView just like any other MKAnnotationView:

- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation {
    if([annotation isKindOfClass:[MyAnnotationClass class]]) {
        static NSString *identifier = @"currentLocation";
        SVPulsingAnnotationView *pulsingView = (SVPulsingAnnotationView *)[self.mapView dequeueReusableAnnotationViewWithIdentifier:identifier];

        if(pulsingView == nil) {
            pulsingView = [[SVPulsingAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:identifier];
            pulsingView.annotationColor = [UIColor colorWithRed:0.678431 green:0 blue:0 alpha:1];
        }

        pulsingView.canShowCallout = YES;
        return pulsingView;
    }

    return nil;
}

Customization

SVPulsingAnnotationView can be customized with the following properties:

@property (nonatomic, strong) UIColor *annotationColor; // default is same as MKUserLocationView
@property (nonatomic, strong) UIColor *pulseColor; // default is same as annotationColor
@property (nonatomic, strong) UIImage *image; // default is nil, will use annotationColor as tintColor

@property (nonatomic, readwrite) NSTimeInterval pulseAnimationDuration; // default is 1s
@property (nonatomic, readwrite) NSTimeInterval outerPulseAnimationDuration; // default is 3s
@property (nonatomic, readwrite) NSTimeInterval delayBetweenPulseCycles; // default is 1s

Under the Hood

Both the annotation dot and halo ring are drawn using Core Graphics exclusively, therefore making customization possible. The halo ring animation is an authentic copy of Apple's original animation, figured out by introspecting MKUserLocationView.

The halo ring animation consists of a CAAnimationGroup encapsulating 3 distinct animations taking care of the opacity, scale, and the halo image itself. Like the original MKUserLocationView implementation, the animation switches between 3 distinct sizes of the halo ring image (drawn programmatically using haloImageWithRadius:) for crispier rendering.

For more juicy details, head over to my Recreating MKUserLocationView blog post.

Credits

SVPulsingAnnotationView is brought to you by Sam Vermette and contributors to the project. If you have feature suggestions or bug reports, feel free to help out by sending pull requests or by creating new issues. If you're using SVPulsingAnnotationView in your project, attribution would be nice.

Hat tip to Nick Farina for sharing the process of creating his UICalloutView replica.

svpulsingannotationview's People

Contributors

samvermette avatar mjburghard avatar gcamp avatar

Watchers

张宝才 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.