JDFlipNumberView

JDFlipNumberView & JDFlipImageView (SwiftUI ready)

Target Value Animation	Animated Time Display

The FlipNumberView is simulating an analog flip display (e.g. like those at the airport / train station). It’s well abstracted and easy to use. The FlipImageView let’s you run a similar animation on any view, e.g. images. See the example project for working examples (You can run pod try JDFlipNumberView to open the example project quickly.). Please open a Github issue, if you think anything is missing or wrong.

Installation

SPM

Not supported. (SPM doesn’t yet support mixed-language targets.)

Using CocoaPods

• pod 'JDFlipNumberView' all flip views, SwiftUI views & default imageset

To further limit what you depend on, use the following subpods. They don’t include the default image bundle, thus they are much more lightweight. See Customization below for infos, on how to use your own images.

• pod 'JDFlipNumberView/NoImageBundle', everything except the default image bundle
• pod 'JDFlipNumberView/NoImageBundle-NoSwiftUI', everything except the default image bundle & the SwiftUI views

Even more targeted:

• pod 'JDFlipNumberView/Core', only the JDFlipNumberView
• pod 'JDFlipNumberView/FlipImageView', only the JDFlipImageView
• pod 'JDFlipNumberView/FlipClockView', /Core + JDFlipClockView
• pod 'JDFlipNumberView/DateCountdownFlipView', /Core + JDDateCountdownFlipView
• pod 'JDFlipNumberView/DefaultImageBundle', the default image bundle, as it’s not included automatically in the other subpods

(For infos on cocoapods, have a look the cocoapods website)

Manual Installation

1. Add all files (or only the ones you want to) from JDFlipNumberView/JDFlipNumberView/*.{h,m} to your project
2. Add the JDFlipNumberView.bundle, if you want to use the default images

Included Views

The library offers multiple Views (Swift/ObjC name):

• FlipNumberView / JDFlipNumberView

  • The Standard FlipNumberView. It shows an integer value as FlipView. It has a choosable amount of digits. Can be animated in any way described in this document.

• FlipImageView / JDFlipImageView

  • An Image View with flip animations. Use it like a regular UIImageView, but set new images animated via setImageAnimated:duration:completion:

• DateCountdownFlipView / JDDateCountdownFlipView

  • A date countdown. Create it with a target date and it will display an animated flipping countdown showing the remaining days, hours, minutes and seconds until that date.

• FlipClockView / JDFlipClockView

  • A digital clock. Displays the current hour and minutes as animated flip views. Seconds can also be enabled. Always shows the current time.

• UIView+JDFlipImageView

  • A UIView category that makes it possible to transition between any two views using a flip animation.

Usage Example

Display a 4-digit FlipNumberView animating down once every second:

In SwiftUI:

struct SwiftExample: View {
    @State var value = 1337

    var body: some View {
        FlipNumberView(value: $value, animationStyle: .interval(interval: 1.0, direction: .down))
          .frame(height: 80)
    }
}

In Objective-C + UIKit:

// create a new FlipNumberView, set a value, start an animation
JDFlipNumberView *flipNumberView = [[JDFlipNumberView alloc] initWithInitialValue: 1337];
[flipNumberView animateDownWithTimeInterval: 1.0];

// add to view hierarchy and resize
[self.view addSubview: flipNumberView];
[flipNumberView sizeToFit];
flipNumberView.center = self.view.center;

That’s it. This will display a working, flipping, animating countdown view!
See the example project for other examples.

Available animations

In SwiftUI, see these:

public enum FlipNumberViewAnimationStyle {
    /// no animation on value changes
    case none

    /// a single flip to a new value
    case simple

    /// flip one-by-one until the new value is reached
    case continuous(duration: Double)

    /// flip up or down once per given interval
    case interval(interval: Double, direction: FlipNumberViewIntervalAnimationDirection)
}

For ObjC, see these:

• Simple - a single flip to a new value:

- (void)setValue:(NSInteger)newValue animated:(BOOL)animated;
- (void)animateToNextNumber;
- (void)animateToPreviousNumber;

• Continuous - flip one-by-one until the new value is reached:

- (void)animateToValue:(NSInteger)newValue duration:(CGFloat)duration;

• Interval - flip up or down once per given timeInterval:

- (void)animateUpWithTimeInterval:(NSTimeInterval)timeInterval;
- (void)animateDownWithTimeInterval:(NSTimeInterval)timeInterval;

Customization

A) Replace original images
Replace the images within the JDFlipNumberView.bundle. (In the Finder just Rightclick > Show Contents to see the images.)

When using Pods, make sure to use pod 'JDFlipNumberView/Core', so the default bundle won’t be copied. Just create a bundle named JDFlipNumberView.bundle in your project yourself.

B) Use multiple bundles
Add another graphics bundle to your project. A bundle is nothing else, than a regular folder, but named with .bundle as extension. You need one image per digit. 0.png, 1.png, 2.png, etc. See the next section on how to use multiple bundles.

Implementing a custom bundle

To use your own bundles, use the imageBundle: initializers:

[[JDFlipNumberView alloc] initWithDigitCount:<#count#> 
                                 imageBundle:[JDFlipNumberViewImageBundle imageBundleNamed:@"<#imageBundleName#>"]];
[[JDDateCountdownFlipView alloc] initWithDayDigitCount:<#count#> 
                                           imageBundle:[JDFlipNumberViewImageBundle imageBundleNamed:@"<#imageBundleName#>"]];

SwiftUI:

FlipNumberView(value: <#valueBinding#>, imageBundle: JDFlipNumberViewImageBundle(named: "<#imageBundleName#>"))

Feel free to use the original .psd file from the gfx folder to create custom numbers.

Twitter

I’m @calimarkus on Twitter. Maybe tweet, if you like JDFlipNumberView!

Shoutout

I found “FlipClock-SwiftUI” by @elpassion - a fully native SwiftUI flip-clock. It could be a good starting point for a native swift rewrite. I’m playing around with it in a fork a bit: FlipNumberView-Swift.