{"id":2167,"url":"https://github.com/calimarkus/JDFlipNumberView","last_synced_at":"2025-08-02T23:32:18.109Z","repository":{"id":2824745,"uuid":"3826902","full_name":"calimarkus/JDFlipNumberView","owner":"calimarkus","description":"[iOS] Animated analog flip numbers like airport/train-station displays (Swift/SwiftUI ready)","archived":false,"fork":false,"pushed_at":"2022-07-02T04:33:01.000Z","size":22003,"stargazers_count":785,"open_issues_count":5,"forks_count":138,"subscribers_count":64,"default_branch":"master","last_synced_at":"2024-10-29T21:03:26.552Z","etag":null,"topics":["animation","cocoapod","cocoapods","customizable","ios","swiftui","views"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/calimarkus.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-03-25T20:02:27.000Z","updated_at":"2024-09-05T08:33:28.000Z","dependencies_parsed_at":"2022-08-21T03:50:24.919Z","dependency_job_id":null,"html_url":"https://github.com/calimarkus/JDFlipNumberView","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calimarkus%2FJDFlipNumberView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calimarkus%2FJDFlipNumberView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calimarkus%2FJDFlipNumberView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calimarkus%2FJDFlipNumberView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/calimarkus","download_url":"https://codeload.github.com/calimarkus/JDFlipNumberView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228503142,"owners_count":17930520,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","cocoapod","cocoapods","customizable","ios","swiftui","views"],"created_at":"2024-01-05T20:16:06.398Z","updated_at":"2024-12-06T17:30:50.294Z","avatar_url":"https://github.com/calimarkus.png","language":"Objective-C","readme":"JDFlipNumberView \u0026 JDFlipImageView (SwiftUI ready)\n--------------------------------------------------\n\n| Target Value Animation | Animated Time Display |\n| ------------- | ------------- |\n| ![Target Animation](https://user-images.githubusercontent.com/807039/169300618-861a4d81-26cc-46c2-882b-1e4b6f0ffc4a.gif) | ![Time Display](https://user-images.githubusercontent.com/807039/169300625-9421b845-14c7-42c0-a00a-f4b8d97cce03.gif) |\n\nThe `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.\n\n![Screenshot](https://user-images.githubusercontent.com/807039/169299475-7dd36912-7eeb-4f30-a7c7-459b11e7099e.png)\n\n## Installation using CocoaPods\n\n- `pod 'JDFlipNumberView'` all flip views, SwiftUI views \u0026 default imageset\n\nTo 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](#customization) below for infos, on how to use your own images.\n\n- `pod 'JDFlipNumberView/NoImageBundle'`, everything except the default image bundle\n- `pod 'JDFlipNumberView/NoImageBundle-NoSwiftUI'`, everything except the default image bundle \u0026 the SwiftUI views\n\nEven more targeted:\n\n- `pod 'JDFlipNumberView/Core'`, only the `JDFlipNumberView`\n- `pod 'JDFlipNumberView/FlipImageView'`, only the `JDFlipImageView`\n- `pod 'JDFlipNumberView/FlipClockView'`, `/Core` + `JDFlipClockView`\n- `pod 'JDFlipNumberView/DateCountdownFlipView'`, `/Core` + `JDDateCountdownFlipView`\n- `pod 'JDFlipNumberView/DefaultImageBundle'`, the default image bundle, as it's not included automatically in the other subpods\n\n(For infos on cocoapods, have a look the [cocoapods website])\n\n## Manual Installation\n\n1. Add all files (or only the ones you want to) from `JDFlipNumberView/JDFlipNumberView/*.{h,m}` to your project\n2. Add the `JDFlipNumberView.bundle`, if you want to use the default images\n\n## Contents\n\nThe main classes are\n\n- `JDFlipNumberView` (SwiftUI: `FlipNumberView`)\n  - The **Standard FlipNumberView**. It shows an integer value as FlipView.\n  It has a choosable amount of digits. Can be animated in any way described in this document.\n\n- `JDFlipImageView` (SwiftUI: `FlipImageView`)\n  - An **Image View** with flip animations. Use it like a regular UIImageView, but set new images animated via `setImageAnimated:duration:completion:`\n  \n- `JDDateCountdownFlipView` (SwiftUI: `DateCountdownFlipView`)\n  - __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.\n  \n- `JDFlipClockView` (SwiftUI: `FlipClockView`)\n  - __A digital clock.__ Displays the current hour and minutes as animated flip views. Seconds can also be enabled. Always shows the current time.\n  \n- `UIView+JDFlipImageView`  \n  - A **UIView category** that makes it possible to transition between any two views using a flip animation.\n\n## Usage Example\n\nAfter installing you only need to follow some simple steps to get started. Here is a working example: A 4-digit `FlipNumberView` animating down once every second.\n\nObjective-C + UIKit:\n\n```objc\n// create a new FlipNumberView, set a value, start an animation\nJDFlipNumberView *flipNumberView = [[JDFlipNumberView alloc] initWithInitialValue: 1337];\n[flipNumberView animateDownWithTimeInterval: 1.0];\n\n// add to view hierarchy and resize\n[self.view addSubview: flipNumberView];\n[flipNumberView sizeToFit];\nflipNumberView.center = self.view.center;\n```\n\nIn SwiftUI it's even simpler:\n\n```swift\nstruct SwiftExample: View {\n    @State var value = 1337\n\n    var body: some View {\n        FlipNumberView(value: $value, animationStyle: .interval(interval: 1.0, direction: .down))\n          .frame(height: 80)\n    }\n}\n```\n\nThat's it. This will display a working, flipping, animating countdown view!  \nSee the example project for other examples.\n\n## Available animations\n\n- Simple (a single flip):\n\n```objc\n- (void)setValue:(NSInteger)newValue animated:(BOOL)animated;\n- (void)animateToNextNumber;\n- (void)animateToPreviousNumber;\n```\n\n- Continuous (Flipping through all numbers, until target is reached):\n\n```objc\n- (void)animateToValue:(NSInteger)newValue duration:(CGFloat)duration;\n```\n    \n- Interval (A timed animation without a target value, flipping once per `timeInterval`):\n\n```objc\n- (void)animateUpWithTimeInterval:(NSTimeInterval)timeInterval;\n- (void)animateDownWithTimeInterval:(NSTimeInterval)timeInterval;\n```\n\nIn SwiftUI, see these:\n\n```swift\npublic enum FlipNumberViewAnimationStyle {\n    case none\n    case simple\n    case continuous(duration: Double)\n    case interval(interval: Double, direction: FlipNumberViewIntervalAnimationDirection)\n}\n```\n\n## Customization\n\n**A) Replace original images**  \nReplace the images within the `JDFlipNumberView.bundle`. (In the Finder just `Rightclick \u003e Show Contents` to see the images.)\n\n\u003e 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.\n\n**B) Use multiple bundles**  \nAdd 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.\n\n#### Implementing a custom bundle\n\nTo use your own bundles, use the `imageBundle:` initializers:\n\n```objc\n[[JDFlipNumberView alloc] initWithDigitCount:\u003c#count#\u003e \n                                 imageBundle:[JDFlipNumberViewImageBundle imageBundleNamed:@\"\u003c#imageBundleName#\u003e\"]];\n[[JDDateCountdownFlipView alloc] initWithDayDigitCount:\u003c#count#\u003e \n                                           imageBundle:[JDFlipNumberViewImageBundle imageBundleNamed:@\"\u003c#imageBundleName#\u003e\"]];\n```\n\nSwiftUI:\n\n```swift\nFlipNumberView(value: \u003c#valueBinding#\u003e, imageBundle: JDFlipNumberViewImageBundle(named: \"\u003c#imageBundleName#\u003e\"))\n```\n\n*Feel free to use the original `.psd` file from the `gfx` folder to create custom numbers.*\n\n![digits](https://user-images.githubusercontent.com/807039/169639417-696466bd-28b7-4ed6-a406-863ac9f49a0b.png)\n\n## Twitter\n\nI'm [@calimarkus](http://twitter.com/calimarkus) on Twitter. Maybe [tweet](https://twitter.com/intent/tweet?button_hashtag=JDFlipNumberView\u0026text=I%20discovered%20a%20very%20nice%20and%20simple-to-use%20animated%20FlipView%20for%20iOS:%20https://github.com/calimarkus/JDFlipNumberView\u0026via=calimarkus), if you like `JDFlipNumberView`!\n\n\n\n\n[![tweetbutton](https://user-images.githubusercontent.com/807039/173472954-19d442b8-d367-4e74-a123-a003a9e5fb29.png)](https://twitter.com/intent/tweet?button_hashtag=JDFlipNumberView\u0026text=I%20discovered%20a%20very%20nice%20and%20simple-to-use%20animated%20FlipView%20for%20iOS:%20https://github.com/calimarkus/JDFlipNumberView\u0026via=calimarkus)\n\n## Shoutout\n\nI 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](https://github.com/calimarkus/FlipNumberView-Swift).\n\n[Github issue]: https://github.com/calimarkus/JDFlipNumberView/issues\n[cocoapods website]: http://cocoapods.org\n","funding_links":[],"categories":["Content","UI","etc","Objective-C"],"sub_categories":["Animation","Other free courses","Font","Other Testing"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalimarkus%2FJDFlipNumberView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalimarkus%2FJDFlipNumberView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalimarkus%2FJDFlipNumberView/lists"}