reilost/JDFlipNumberView

iOS: An animated view for displaying "analog flipping numbers".

JDFlipNumberView

See screenshots below.

The Flip Number View is simulating an analog flip display (like those for the departure time on the airport).

It is using CoreAnimation to get the desired effect. It's well abstracted and should be really easy to use. But it still needs some work, so feel free to contribute!

Contents

You get three classes for different usecases:

• JDFlipNumberView
  A single animated digit. Range 0-9.

• JDGroupedFlipNumberView
  A grouped and chained choosable number of flipviews for higher numbers.
  It is using a variable amount of JDFlipNumberView instances itself and chains them together.

• JDDateCountdownFlipView
  A date countdown. Just init with a target date and add it as a subview.
  It is using four JDGroupedFlipNumberView instances itself and chains them together.

  
  Note: The JDDateCountdownFlipView is not yet production ready, because the maximumValue of the JDGroupedFlipNumberView is interpreted wrong. Don't use a maximum value on grouped flipViews and don't use the Date Countdown at all for now, because it behaves buggy. I'm trying to fix these bugs ASAP. (You may follow the progress via the issues and the branches other than master.)

How to use

Recommend: Use cocoapods to install it.

(OR add all files from JDFlipNumberView/JDFlipNumberView/ manually to your project, including the JDFlipNumberView.bundle.
And you also need to link the QuartzCore.framework)

In any case, after installing, you only need to follow these three steps, to use it:

1. Init the class
2. Set an int value (or a date)
3. Start the animation

Example: A countdown view from 1000 seconds to 0.

JDGroupedFlipNumberView *flipNumberView = [[JDGroupedFlipNumberView alloc] initWithFlipNumberViewCount: 4];
flipNumberView.intValue = 1000;
[flipNumberView animateDownWithTimeInterval: 1.0];

[self.view addSubview: flipNumberView];
flipNumberView.frame = CGRectMake(10,100,300,100);

That's it.
This will display a working, flipping, animating countdown view!

How to start the animation?

Use any of the following methods:

// basic animation
- (void) animateToNextNumber;
- (void) animateToPreviousNumber;

// timed animation
- (void) animateUpWithTimeInterval: (NSTimeInterval) timeInterval;
- (void) animateDownWithTimeInterval: (NSTimeInterval) timeInterval;

Do you use the JDFlipNumberView?

Feel free to add your app to the wiki.

Screenshots